Highcharts – Data label cut off

highcharts

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.

Best Answer

You can add marginRight to chart like this:

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

jsFiddle.

Related Topic