I'm converting a series of Excel charts into Highcharts, and came across a curious situation involving a stacked area chart with both positive and negative values.
Here is now the chart is displayed in Excel, along with the accompanying data points. For illustration purposes, I've selected series G. Despite having all positive values in its data, it appears at the bottom of the stack, beneath the zero line.
Here is how the chart appears in Highcharts (see below). In this instance, series G appears above the chart, and all of the other series appear much differently than in Excel.
For reference, a fiddle of this chart can be found here: http://jsfiddle.net/brightmatrix/woye6xxw/. I've also included a code sample at the bottom of this post.
I've referred to the following questions here on Stack Overflow, but neither of which has been helpful in solving my issue, unfortunately:
- Highcharts - Area Chart - Stacking with series containing negative and positive values
- Highcharts - areaspline with negative values, area should be always at the bottom
Is there an attribute or setting that I'm missing in the API documentation that will permit the chart to draw these series in the same stacking order as in Excel? Is this possible in Highcharts?
$(function () {
Highcharts.chart('container', {
chart: { type: 'area', },
title: { text: 'Stacked Area Chart in Highcharts' },
xAxis: { categories: ['2007','2008','2009','2010','2011','2012','2013','2014','2015','2016'] },
plotOptions: {
series: {
marker: { enabled: false }, stacking: 'normal'
},
},
series: [
{ name: 'Total', data: [0,0.08,-0.31,-1.09,-1.82,-2.18,-2.49,-3.05,-3.12,-3.15] },
{ name: 'A', data: [0,-0.212001,-0.409192,-0.559879,-0.81,-1.089119,-1.313719,-1.606092,-1.808868,-2.041628] },
{ name: 'B', data: [0,0.239857,0.637651,0.733988,0.85,0.855423,0.938974,0.912378,1.017854,0.985514] },
{ name: 'C', data: [0,-0.096543,-0.271997,-0.512372,-0.70,-0.665893,-0.723534,-0.879249,-0.890587,-0.821584] },
{ name: 'D', data: [0,-0.098096,-0.170803,-0.688206,-0.92,-0.918492,-0.876488,-0.967249,-0.954217,-1.029596] },
{ name: 'E', data: [0,0.17794,0.31787,0.36,0.37,0.23917,0.17944,0.14766,0.05938,0.24891] },
{ name: 'F', data: [0,0.029755,-0.45174,-0.397836,-0.61,-0.56368,-0.593108,-0.462725,-0.351842,-0.210976] },
{ name: 'G', data: [0,0.013198,0.055014,0.019322,0.07,0.077394,0.061947,0.010502,0.035015,-0.055604] }
]
})
});