CODEWITHSUNDEEP
highcharts
jagdipa
jagdipa

Reputation: 540

highcharts data labels overlaps the plotlines value

I have a graph with both columns and lines. I have added a average line for the line graph using plotlines.

My problem is that the data label for the line overlaps the plotline text. I have reproduced the error here (see the last data label). : http://jsfiddle.net/cs8bqumy/

Can I add some padding after the last column to correct this?

$(function () {
            $('#container').highcharts({
                chart: {
                    zoomType: 'xy',
                    height: 400
                },
                title: {
                    text: null
                },
                xAxis: [{ // Suppier names xAxis
                    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: '%' }
                }
                ]
            });
        });

Upvotes: 3

Views: 6881

Answers (3)

Sebastian Bochan
Sebastian Bochan

Reputation: 37588

You can also set max value i.e as 9.3.

http://jsfiddle.net/cs8bqumy/2/

Upvotes: 3

Strikers
Strikers

Reputation: 4776

As mentioned in Adam's answer you can go and postion the datalabel of the last point.

instead of data labels I advice you to position the label of the plotLine.

you can control it using the x,y position attributes and aligning it to the left

label: {
    x: -50,
    y: 10
}

This will be the best solution if your plot line will never overlap with yAxis grid lines.

here is updated fiddle

Upvotes: 2

Adam N
Adam N

Reputation: 61

Highcharts allows you to modify the position of individual data labels in the data array. In your example, you would do that like so:

data: [12.10,22.10,9.40,13.40,10.90,10.60,9.70,8.50,8.00,{y:11.90, dataLabels: {y:-8}}],

Here it is in the API: http://api.highcharts.com/highcharts#series.data.dataLabels

Although it might be best to move your plotline label underneath the line. In your example, add y:20 to plotLines[0][label].

In the API: http://api.highcharts.com/highcharts#xAxis.plotLines.label.x

Upvotes: 0

Related Questions