Highchart columns chart overlaps yAxis.plotLines labels

user_7607886 0
Viewed 1058

There is an overlapping issue when I tried to draw two yAxis.plotLines on column chart. The label of plotLines has been covered/overlapped by columns.

Please see the screenshot as below enter image description here 

$(function () {
$('#container').highcharts({
    chart: {
        zoomType: 'xy',
        height: 400
    },
    title: {
        text: null
    },
    xAxis: [{ // Suppier names xAxis
        max: 9.3,
        categories: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'],
        labels: {
            rotation: -90,

        }
    }],
    yAxis: [{ // Primary yAxis (Sales)
        title: {
            text: '<span class="axis-label">Sales Value (AED)</span>',
            useHTML: true,
            style: {
                color: '#89A54E'
            }
        },
        min: 0,
        max: 190234
    }, { // Secondary yAxis (Margin %)
        title: {
            text: '<span class="axis-label">Margin</span>',
            useHTML: true
        },
        labels: {
            format: '{value}%'
        },
        opposite: true,
        min: 0,
        max: 22,
        alignTicks: false,
        gridLineWidth: 0,
        plotLines: [{
            value: 11.66000,
            color: 'red',
            dashStyle: 'shortdash',
            width: 2,
            label: {
                text: '11.66%',
                align: 'right',
                style: {
                    color: 'red'
                }
            }
        }]
    }],
    tooltip: {
        shared: true
    },
    legend: {
        enabled: false
    },
    credits: {
        enabled: false
    },
    plotOptions: {
        series: {
            pointWidth: 25
        },
        column: {
            colorByPoint: true
        },
        line: {
            dataLabels: {
                enabled: true,
                format: '{y}%',
                style: {
                    fontWeight: 'bold',
                    color: '#000000',
                }
                //style: 'background-color:rgba(255,0,0,0.5);'
                //backgroundColor: '#FEFEFE',
                //shadow: true
            }
        }
    },
    series: [{
        name: 'Sales Value',
        color: '#FFA500',
        type: 'column',
        data: [104833.6400, 38023.0500, 53165.2200, 21674.0000, 37098.4700, 42679.6700, 23127.3300, 34588.5000, 33380.0000, 15453.0000],
        tooltip: {
            valuePrefix: 'AED'
        }
    }, {
        name: 'Margin After Discount (%)',
        color: 'lightblue',
        yAxis: 1,
        data: [12.10, 22.10, 9.40, 13.40, 10.90, 10.60, 9.70, 8.50, 8.00, 11.90],
        tooltip: {
            valueSuffix: '%'
        }
    }]
});

});

So, my question is, is there a way to allow overlapping in this case? However, I don't want to change the max value of xAxis. Here is my testing link:testing link

Thanks

highcharts css javascript
2 Answers

You need to add zIndex to plot lines like you did for the first line - Fiddle

user_32007990

It looks like you are using CSS properties in Javscript. I am not familiar with the package you are using, but there is usually an 'opacity' property that can define the element's visibility.

For example, Set the opacity of the red textbox to 0. This will make it invisible.

When you want to see it, set the opacity to 1.

The bars on top are automatically set to 1, because every element has opacity 1 by default.

plotLines: [{ value: 11.66000, color: 'red', dashStyle: 'shortdash', width: 2, label: { text: '11.66%', align: 'right', style: { color: 'red', opacity: 0 } }

user_65766910
Related