CODEWITHSUNDEEP
highcharts
Gabriel
Gabriel

Reputation: 211

Highcharts - Data label cut off

I took a sample jsfiddle and modified it here just to show a sample of what I experienced: http://jsfiddle.net/pMwuv/

Here is what my actual datalabel code looks like:

dataLabels: {
enabled: true,
align: 'left',
verticalAlign: 'top',
style: {
    color: 'black'
},
formatter: function () {
    if (this.x == 19) {
        return this.y + '<br>units left';
    };
}
}

What I am having on my area chart is that the last data label is cut off. Is there a way to increase the width of the container or add some type of padding so that the full label shows?

Just changing the x and y position of the label will not work for my area chart. I have my chart customized so that only the last point of the chart has a data label and i want it aligned to the right of the last point and not within the chart.

But if we can get the above sample fiddle to work then the same solution should work for me.

Upvotes: 4

Views: 13333

Answers (3)

Sebastian Bochan
Sebastian Bochan

Reputation: 37578

You can set spacingRight and add correct value.

Upvotes: 0

Alex P
Alex P

Reputation: 1751

You can add marginRight to chart like this:

chart: {
           renderTo: container,
           width: 550,
           marginRight: 35 
}

jsFiddle.

Upvotes: 4

falsarella
falsarella

Reputation: 12437

This is not a direct solution, but I suggest you to put the label at the yAxis:

    yAxis: {
        title: {
            text: 'Units left'
        }
    },

And remove the other attributes, leaving just enabled: true:

    plotOptions: {
        series: {
            dataLabels: {
                enabled: true
            }
        }
    },

See the fiddle

Upvotes: 0

Related Questions