Line chart for grouped columns

[jonny]

Hi

The following demo: https://jsfiddle.net/gh/get/library/pur ... emo/combo/

I basically want to have the spline, but a data point for each of the columns, how should I do that??

[wojtek]

Hi jonny,

To make spline for each column you can use this approach:

1. Loop through each point of column series, there you have a shapeArgs property which contains plot details of each point (column),

2. Calculate xAxis and yAxis values (for each column) from plot.x and plot.y pixels value using axis.toValue method,

3. set a new data to spline series using series.setData method.

4. set xAxis and yAxis min = 0

Online example:
https://jsfiddle.net/wchmiel/02gb361v/

Api reference:
https://api.highcharts.com/highcharts/chart.events.load
https://api.highcharts.com/class-refere ... is#toValue
https://api.highcharts.com/class-refere ... es#setData
https://api.highcharts.com/highcharts/xAxis.min
https://api.highcharts.com/highcharts/yAxis.min

Kind regards.

[jonny]

Thanks so much for this, I just want to check, how would this differ if I already have an existing numerical data array for my splieData. So say: I have an array [14, 10, 9 ,11, 25, 1, 5, 15, 12, 8, 4, 3 ,3 , 1, 6] and I just need to represent that as a line graph series?

[wojtek]

jonny,

You can provide your data to spline series as usually and then inside load function use this y data for newly calculated data. Check the demo I posted below and let me know if I understood you properly.

Demo:
https://jsfiddle.net/wchmiel/hw36fqbs/1/

Kind regards.

[jonny]

Yes! Thanks so much

[wojtek]

You're welcome