CODEWITHSUNDEEP
highcharts
White Hat
White Hat

Reputation: 691

How to hide stackLabel in highcharts when it is bigger than the column

How can I hide a stackLabel (a label above the column) in highCharts when the text in the label is bigger than the column (As you can see in the image below). I want to show empty string when my data exceeds the column width.

This is part of the code which is responsible for showing the data:

yAxis: {
    stackLabels: {
        style: {
            color: 'black'
        },
        enabled: true
        formatter: function () {                    
             return this.total + " mm ";
       }
    }
}

enter image description here

Upvotes: 0

Views: 290

Answers (1)

morganfree
morganfree

Reputation: 12472

Create a function which loop through the stack labels and compare their width with the point's width - according to the comparison hide or show the label.

Function can look like this:

function hideLabel() {
  const axis = this.yAxis[0];
  const stacks = axis.stacks.column;
  const pointWidth = this.series[0].points[0].shapeArgs.width;

  Object.keys(stacks).forEach(key => {
    const label = stacks[key].label;

    label.attr({
      visibility: label.getBBox().width > pointWidth ? 'hidden' : 'visible'
    });
  })
}

Set this function on load and redraw events:

 chart: {
    type: 'column',
    events: {
      load: hideLabel,
      redraw: hideLabel
    }
},

example: http://jsfiddle.net/nq5ke47z/

Upvotes: 1

Related Questions