CODEWITHSUNDEEP
highcharts
Rendy
Rendy

Reputation: 5698

How to move line series in Highchart?

I have this advanced format:

    series:[{
        name: 'X',
        type: 'column',
        color: '#F4811F'
    },{
        name: 'Y',
        type: 'column',
        color: '#8EB950'
    },{
        name: 'Z',
        type: 'column',
        color: '#5C97D3'
    }, {
        name: 'AvgX',
        type: 'line',
        lineWidth: 4,
        color: '#F4811F'
    }, {
        name: 'AvgY',
        type: 'line',
        lineWidth: 4,
        color: '#8EB950'
    }, {
        name: 'AvgZ',
        type: 'line',
        lineWidth: 4,
        color: '#5C97D3'
    }]

The displayed chart is like this

enter image description here

How can I move AvgX to be on X and AvgZ to be on Z? Is there any option in Highchart to do that?

Upvotes: 0

Views: 235

Answers (1)

ppotaczek
ppotaczek

Reputation: 39069

You can set right pointPlacement property for line series:

series: [{
    name: 'X',
    type: 'column',
    color: '#F4811F',
    data: [1, 1, 1]
}, {
    name: 'Y',
    type: 'column',
    color: '#8EB950',
    data: [1, 1, 1]
}, {
    name: 'Z',
    type: 'column',
    color: '#5C97D3',
    data: [1, 1, 1]
}, {
    name: 'AvgX',
    type: 'line',
    lineWidth: 4,
    pointPlacement: -0.2,
    color: '#F4811F',
    data: [2, 2, 2]
}, {
    name: 'AvgY',
    type: 'line',
    lineWidth: 4,
    color: '#8EB950',
    data: [3, 3, 3]
}, {
    name: 'AvgZ',
    type: 'line',
    lineWidth: 4,
    pointPlacement: 0.2,
    color: '#5C97D3',
    data: [4, 4, 4]
}]

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

API: https://api.highcharts.com/highcharts/series.line.pointPlacement

Upvotes: 1

Related Questions