Stacked bar chat – strange behaviour of some of the bars being positive and negative

[hshahul]

Hi Team,

PicassoJS stacked bar chart is not rendering property if we have data with positive and negative values. Its adding/subtracting those values and showing final values as bar, some values are missing.

Please find the below code: JS:

var data = [{ "type": "matrix", "data": [ ["Year", "Month", "Sales"], ["2010", "Jan", 5], ["2010", "Feb", -7], ["2010", "Mar",2], ["2010", "Apr",-6],
["2011", "Jan",6], ["2011", "Feb", -2], ["2011", "Mar", 1], ["2011", "Apr", -5],
["2012", "Jan", 12], ["2012", "Feb", -8], ["2012", "Mar", 7], ["2012", "Apr", -3],
["2013", "Jan", 1], ["2013", "Feb", -5], ["2013", "Mar", 3], ["2013", "Apr", -2],
["2014", "Jan", -3], ["2014", "Feb",-4], ["2014", "Mar", -2], ["2014", "Apr",-3]
] }];

picasso.chart({ element: document.querySelector('#container'), data, settings: { collections: [{ key: 'stacked', data: { extract: { field: 'Year', props: { series: { field: 'Month' }, end: { field: 'Sales' } } }, stack: { stackKey: d => d.value, value: d => d.end.value } } }], scales: { y: { data: { collection: { key: 'stacked' } }, invert: true, // expand: 0.2, // min: 0 }, t: { data: { extract: { field: 'Year' } }, padding: 0.3 }, color: { data: { extract: { field: 'Month' } }, type: 'color' } }, components: [{ type: 'axis', dock: 'left', scale: 'y' },{ type: 'axis', dock: 'bottom', scale: 't' }, { type: 'legend-cat', scale: 'color', dock: 'top' },{ key: 'bars', type: 'box', data: { collection: 'stacked' }, settings: { major: { scale: 't' }, minor: { scale: 'y', ref: 'end' }, box: { fill: { scale: 'color', ref: 'series' } } } }] } })

--------------------------------- HTML---------------------------

---------------------------- CSS ----------------------------------- html, body { height: 500px; }

container {

height: 100%; }

------------------------------------------------ END-----------------------------------------

Please check the attachment output, If it is working only those set of values should be positive or negative only (2012 & 2014 years in Picture)

If one set of values are contain positive and negative values, those bar values are subtracted/ added and showing one or two box only (2010,2011 & 2013 years in PIcture)

Please let me some suggestions.

[miralemd]

Hi @hshahul

In the stack config you can specify a diverging offset to split the stacks between positive and negative:

stack: {
  stackKey: d => d.value,
  value: d => d.end.value,
  offset: 'diverging'
}

[hshahul]

Its working fine, Thank you so much for quick response.

Actually i couldn't find this solution in your documentations, please let me know have any other documentations to refer except picasso js site.

[miralemd]

All documentation we have is on the site, we are however aware that there are some docs missing and are planning to add that.