Adrian Mare
Adrian Mare

Reputation: 99

Highcharts multiple series and axes types overlapping

I have a problem with a highcharts graph, regarding overlapping of multiple axes. There are 2 types of series, one type column and one type line. I want the line type to be always above the others and never intersect them.

You may see my problem here: http://jsfiddle.net/99tC7/

Anticipated thank you for any help provided.

$('#container').highcharts({
        title: {
            text: 'Title',
            x: -20 //center
        },
        xAxis: {
            categories: [ "5.11.13", "6.11.13", "7.11.13", "8.11.13", "9.11.13"],
            labels: {
                rotation: 270
            }
        },
        yAxis: [{
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }],
            title:{
                text: "Number 1"
            },
        },
        {
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }],
            title:{
                text: "Number 2"
            },
            opposite: true,
            max:50,
            minPadding:5,
        }],
        legend: {
            layout: 'horizontal',
            align: 'center',
            verticalAlign: 'bottom',
            borderWidth: 0
        },
        tooltip: {
            enabled: false
        },
        plotOptions: {
            line: {
                dataLabels: {
                    enabled: true,
                    formatter: function() {
                            return this.y +'%';
                    }
                }
            },
            column: {                    
                dataLabels: {
                    enabled: true,
                    formatter: function() {
                            return this.y;
                    }
                }
            }
        },
        series: [{
            name: 'L1',
            type: 'column',
            color: '#FF0000',
            yAxis: 0,
            data: [1, 5, 9, 10, 12]
            },
            {
            name: 'L2',
            type: 'column',
            color: '#00FF00',
            yAxis: 0,
            data: [16, 16, 106, 12, 11]
            },
            {
            name: 'L3',
            yAxis: 1,
            data: [38, 24, 37, 29, 37]
            }
        ]
    });

Upvotes: 1

Views: 2631

Answers (1)

Sebastian Bochan
Sebastian Bochan

Reputation: 37588

You can try to set correct min/max values in both yAxis like here http://jsfiddle.net/99tC7/1/

Upvotes: 1

Related Questions