I am plotting data in highcharts, but I want to take sum of grouping data and than plot that sum in highchart, currently able to plot inly single digit but i want to take sum of grouping data than plot it accordingly based on categories.
I am using below code, but able to print only single data point, but I want sum of digits :
const initialSeries = [{
name: 'Tokyo',
data: [
["tokyo", 10],
["tokyo", 63],
["tokyo", 50],
["tokyo", 54],
["tokyo", 49],
["tokyo", 33],
["tokyo", 17],
["tokyo", 15],
["tokyo", 11]
]
}, {
name: 'New York',
data: [
['New York', 56],
['New York', 79],
['New York', 97],
['New York', 18.4],
['New York', 65],
['New York', 140.5],
['New York', 43],
['New York', 88],
['New York', 4]
]
}, {
name: 'London',
data: [
['London', 9],
['London', 30],
['London', 51],
['London', 58],
['London', 56],
['London', 285],
['London', 11],
['London', 414],
['London', 53],
['London', 8],
['London', 145],
['London', 2]
]
}, {
name: 'Berlin',
data: [
['Berlin', 14],
['Berlin', 136],
['Berlin', 82],
['Berlin', 56],
['Berlin', 79],
['Berlin', 97],
['Berlin', 18],
['Berlin', 65],
['Berlin', 14],
['Berlin', 43],
['Berlin', 88],
['Berlin', 4]
]
}];
const parsedData = initialSeries.map(s => ({
name: s.name,
data: s.data.map(d => [d[0].toString(), d[1]])
}));
Highcharts.chart('container', {
chart: {
type: 'column',
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
type:'category',
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: parsedData
});
Any help would be highly appreciated. Thanks in advance
You can use reduce to create data structuree required by Highcharts. Example:
const parsedData = initialSeries.map(s => ({
name: s.name,
data: [
s.data.reduce((result, currentEl) => {
return [result[0], result[1] += currentEl[1]]
}, [s.name, 0])
]
}));
Live demo: http://jsfiddle.net/BlackLabel/rbdLnf4a/
API Reference: https://api.highcharts.com/highcharts/series.column.data