CODEWITHSUNDEEP
highchartsseries
VladimirS
VladimirS

Reputation: 600

Highcharts show two line series with same values

I have series that may have same values region. For example from 2 till 7th in follows example:

$(function () {
$('#container').highcharts({
    chart: {
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    series: [{
        data: [29.9, 71.5, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 216.4, 194.1, 95.6, 54.4]
    }, {
        data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
    }]
});
});

Highcharts shows only one of the lines, the other line is simple over lay by first. What is the best approach to show such situation. I was trying to find a option that will let those be drawn back to back like stack on each other, but stack is different chart. What are the best choice to still present it?

Upvotes: 0

Views: 292

Answers (1)

Core972
Core972

Reputation: 4114

1st option

You could use transparent colors for each series like that :

series: [
    {
        color:'rgba(255,0,0,.5)',
        data: [29.9, 71.5, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 216.4, 194.1, 95.6, 54.4]
    }, {
        color:'rgba(0,0,255,.5)',
        data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
    }
]

Fiddle - Transparent colors

2nd option

Use different line width. The first serie will always be in the back so you can make it larger and it will surround the second serie :

series: [{
    lineWidth:6,
    marker:{
        radius : 7
    },
    data: [29.9, 71.5, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 216.4, 194.1, 95.6, 54.4]
}, {
    data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
}],

Fiddle - Line width

3rd option

Using the dashStyle API Doc :

series: [{
    data: [29.9, 71.5, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 216.4, 194.1, 95.6, 54.4]
}, {
    dashStyle: 'dot',
    data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
}],

Fiddle - dashStyle

Upvotes: 2

Related Questions