Here's a question I have regarding a stacked area graph visualization.
Take a look at this image: https://i.sstatic.net/Rk9tg.png
What I'm aiming for is to have "test1" end directly at 2024, instead of gradually fading out towards 2028. Similarly, for "test2" and "test3", I want them to start directly at 2028 without any fade-in effect from 2024.
If anyone knows if achieving this is possible, I would greatly appreciate your insights. I've checked the API reference but didn't find any relevant information.
VIEW DEMO ON JSFIDDLE along with the code snippet:
$(function () {
var yAxisLabels = [0, 20000, 40000, 60000, 80000, 100000, 120000];
var xCategories = ['2016', '2020', '2024', '2028', '2032', '2036', '2040'];
$('#container').highcharts({
chart: {
type: 'area'
},
xAxis: {
tickmarkPlacement: 'on',
title: {
enabled: false
},
labels: {
formatter: function() {
return xCategories[this.value];
}
},
startOnTick: false,
endOnTick: false,
minPadding: 0,
maxPadding: 0,
},
yAxis: {
startOnTick: true,
title: {
enabled: false
},
tickPositioner: function() {
return yAxisLabels;
},
labels: {
formatter: function() {
return "€ " + this.value;
}
}
},
tooltip: {
shared: true,
valueSuffix: ' millions'
},
plotOptions: {
area: {
stacking: 'normal',
lineColor: '#666666',
lineWidth: 1
},
series: {
fillOpacity: 1
}
},
series: [{
name: 'test1',
data: [113864, 113864, 113864, 0, 0, 0, 0],
color: 'rgba(0,0,0,1)'
}, {
name: 'test2',
data: [0, 0, 0, 87905, 87905, 87905, 87905]
}, {
name: 'test3',
data: [0, 0, 0, 14211, 14211, 14211, 14211]
}]
});
});