CODEWITHSUNDEEP
highcharts
Todd Ropog
Todd Ropog

Reputation: 1142

How to get Highcharts to keep rotated data labels within bounds of a chart?

If long data labels are rotated, they can easily extend outside the bounds of a chart. I would like to be able to keep the labels within the "graph area" of the chart.

The chart definition below demonstrates the issue. (fiddle here) Notice how the data labels in the middle go off the top of the chart. The spacingTop value prevents them from being truncated, but they have still "broken out" of the graph part of the chart. If the spacingTop value is set back to the default of 10, the labels get truncated.

chart: {
    plotBackgroundColor: '#f1f1f1',
    type: 'columnrange',
    inverted: false,
    spacingTop: 100
},
title: {
    text: ''
},
subtitle: {
    text: ''
},
xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
    columnrange: {
        dataLabels: {
            enabled: true,
            rotation: -60,
            x: 30,
            yHigh: -55,
            yLow: 9999,
            formatter: function () {
                return this.y + ' degrees Celsius';
            }
        }
    }
},
series: [{
    name: 'Temperatures',
    data: [
        [-9.7, 9.4],
        [-8.7, 6.5],
        [-3.5, 9.4],
        [-1.4, 19.9],
        [0.0, 22.6],
        [2.9, 29.5],
        [9.2, 30.7],
        [7.3, 26.5],
        [4.4, 18.0],
        [-3.1, 11.4],
        [-5.2, 10.4],
        [-13.5, 9.8]
    ]
}]

Is there a way make the graph area expand to keep labels within it's border?

Upvotes: 0

Views: 608

Answers (2)

Paweł Fus
Paweł Fus

Reputation: 45079

You can add extra space on the plotting area using yAxis.maxPadding, see: http://jsfiddle.net/wdb731j9/10/

But this still won't force dataLabels inside the plotting area. I think together with dataLabels.style.width you can get some kind of reliable solution: http://jsfiddle.net/wdb731j9/11/ (see comment inline).

Upvotes: 1

Nishith Kant Chaturvedi
Nishith Kant Chaturvedi

Reputation: 4769

You can use style in datalables , but still your plot area is small, either you should expand that or make the font size smaller.

style: {  
width: '50px'
       }

take a look here

Upvotes: 1

Related Questions