CODEWITHSUNDEEP
javascripthighcharts
Greg Jacobs
Greg Jacobs

Reputation: 131

Highcharts - Resizing Columns to Fix Data Label

I'm trying to get the columns of my Highcharts chart to resize in order to always leave room for the data labels.

Right now, I can only do one of the following:

  1. Have the data labels appear inside the columns themselves: jsfiddle.net/gjslick/LrAuf/
  2. Have the data labels cropped when they don't fit: jsfiddle.net/gjslick/L7LKA/1/
  3. Have the data labels display, but overlap other lines in the chart: jsfiddle.net/gjslick/WbQb4/1/

Is there any way to get the columns to be resized in order to guarantee that the label fits above/below the column? Thanks!

Upvotes: 0

Views: 835

Answers (1)

wergeld
wergeld

Reputation: 14442

My preference would be for #1. But, you could also try using xAxis.offset to add some padding between the xAxis labels and the actual chart area (see this one). But, as you can see I increased the negative value to be much larger than your original one. This shows how the yAxis is auto-scalling and it actually increases the padding a bit too much. To fix this you may need to go and get prefetch the maximum/minimum y-values and manually set the yAxis min/max.

    xAxis: [{
        offset: 14,
        title: {
            text: ''
        },
        type: 'category'
    }],
    yAxis: [{
        min: -10,
        max: 10,
        title: {
            text: ''
        },
        labels: {
            enabled: false
        },
        gridLineWidth: 0
    }],

Upvotes: 1

Related Questions