Negative and positive mixed stackbar.

[cablegunmaster]

I try to make a stacked diagram with on one side a positive bar and on the otherside a negative bar. But they don't seem to work together. It feels like it works like oil. seems to be stacking wrongly for this usecase. What can I do? I used the code example of stacked bar and fiddled around wondering if I can make it happen but it seemed the Y value seems to be wrong:

See the fiddle:
https://jsfiddle.net/7qscekw6/

[gionkunz]

Sorry for the late reply. It looks like we've never supported the use case of negative numbers in stacked bar charts. We might first solve it conceptually. For example what happens if you stack two series where they "cancel" each other out? I'm open for any suggestions.

series: [
  [100, 10, 5]
  [-100, -10, -5]
]

[tiesont]

I actually need to do this for a current project. The idea is to combine a stacked bar chart with a line chart to create a profit/loss graph. The positive value would be sales, the negative value would be costs, and the line would be rendered as the difference between the two (found by adding them together). Given this example data:

[100, 53, 45, 78],
[-75, -50, -64, -53],
[25, 3, -19, 25]

I would render the first two sets as a stacked chart, and then render the last set as a line chart. I could mock something up if you need a visual of what I'm talking about (and/or create a new issue if it makes more sense than posting here).

[ghost]

@gionkunz 100 to -100 will be a full height line. 10 to -10 a small line of 20 pixels height, and 5 to -5 a small 10 pixels line. Check this chart:

EDIT: forget numbers on image, the values:
[28, 28, 92, 79],
[37, 29, 41, 90]

[ghost]

Im currently in a middle of something, first i pass the two values on same serie like ({x:28, y: 37}) then on draw event i check the two value and replace elements:
`changeChart.on('draw', function(data) {
if(data.type == 'point') {

  //triangulo
  var triangle = new Chartist.Svg('path', {
    d: ['M',
      data.x,
      data.y - 5,
      'L',
      data.x - 5,
      data.y + 4,
      'L',
      data.x + 5,
      data.y + 4,
      'z'].join(' '),
    style: 'fill-opacity: 1'
  }, 'ct-area');

  //triangulo pra baixo
  var triangle2 = new Chartist.Svg('path', {
    d: ['M',
      data.x,
      data.y + 5,
      'L',
      data.x + 5,
      data.y - 4,
      'L',
      data.x - 5,
      data.y - 4,
      'z'].join(' '),
    style: 'fill-opacity: 1'
  }, 'ct-area');

  if(data.seriesIndex == 0) {
    if(data.value.x < data.value.y) {

      data.element.replace(triangle);
    } 

    if(data.value.x > data.value.y) {
    //  console.log(data);
      data.element.replace(triangle2);
    } 

  } else {

  }

}})`

But i have no idea how i will connect the points:

[Edubits]

Very similar issue as @tiesont here. For an example: Google Sheets handles this nicely.

[articque]

Need this too