0

How would I draw a spline on columns in each category in Highcharts?

Let's say, I have 5 categories on the x-axis, and each category has 4 columns. Now I want a spline that passes through all the 4 columns in the category (each category should have a separate spline on its corresponding columns)

Is it possible if categories and columns change dynamically?

1 Answer 1

0

For column series you can disable grouping and set pointPlacement to a number value. Than, you can set x data values for spline series to fit them to the columns:

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    xAxis: {
        type: 'category',
        startOnTick: true,
        min: 0
    },
    plotOptions: {
        series: {
            grouping: false,
            pointWidth: 20
        }
    },
    series: [{
        data: [1, 1, 1, 1, 1],
        pointPlacement: -0.3
    }, {
        data: [2, 2, 2, 2, 2],
        pointPlacement: -0.1
    }, {
        data: [3, 3, 3, 3, 3],
        pointPlacement: 0.1
    }, {
        data: [4, 4, 4, 4, 4],
        pointPlacement: 0.3
    }, {
        type: 'spline',
        pointRange: 11,
        data: [
            [-0.3, 1],
            [-0.1, 2],
            [0.1, 3],
            [0.3, 4]
        ]
    }, {
        type: 'spline',
        pointRange: 11,
        data: [
            [0.7, 1],
            [0.9, 2],
            [1.1, 3],
            [1.3, 4]
        ]
    }]
});

Live demo: http://jsfiddle.net/BlackLabel/bdsfty2o/

API Reference:

https://api.highcharts.com/highcharts/series.column.grouping

https://api.highcharts.com/highcharts/series.column.pointWidth

https://api.highcharts.com/highcharts/series.column.pointPlacement

6
  • Thanks for response. Is it possible to add spline series by providing only y coordinates, so how would I set pointPlacement dynamically as my data series changes dynamically (I wont have fixed columns)
    – Aksha
    Feb 26, 2019 at 1:06
  • Hi Aksha, I think you could write some algorithm to calculate x values. How does your data change? Do you always have 4 columns in one category?
    – ppotaczek
    Feb 26, 2019 at 1:49
  • Thanks for the quick response. It won't limit to 4 columns, it can reach to 35 sometimes.
    – Aksha
    Feb 26, 2019 at 1:52
  • @Aksha, Please create some live demo with an example of data change.
    – ppotaczek
    Feb 26, 2019 at 1:55
  • I did one with sample data. But dint add spline series. [link] (jsfiddle.net/yh31um6f/3/)
    – Aksha
    Feb 26, 2019 at 2:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.