CODEWITHSUNDEEP
csshighchartslabel
Jeya Suriya Muthumari
Jeya Suriya Muthumari

Reputation: 2021

HighCharts: How to format particular label column?

I need to show the label values inside the Highcharts bar chart. It can be implemented using dataLabels.Formatter function.

But when the bar is in consist-able size the labels are shown inside the bar and it is looking good. In some cases, the bar is very small in size comparing to the label.

Please see the code pen here, https://codepen.io/JGSpark/pen/YzzBydv?editors=1010

The last bar is very small and 40 is showing outside. As the color: 'white' is commonly used for all the labels it is showing in white though it is in outside.

How can I change the color of the label if it is showing out?

In this example, I need to change the color of label 40 to black. Any suggestions?

Upvotes: 0

Views: 1025

Answers (2)

Sebastian Wędzel
Sebastian Wędzel

Reputation: 11633

If your chart is not a dynamically created you can set the dataLabels.color for the particular point.

{
  y: 40,
  dataLabels: {
    color: 'black'
  }
}

Demo

API

EDIT

Another solution which I can suggest is to add a functionality inside the chart.events.load which will filter if dataLabels is aligned to left or right and set wanted color - it will work if more labels will be outside the column bar. 

    events: {
  load() {
    let chart = this,
      series = chart.series;

    series[0].points.forEach(p => {
      if (p.dataLabel.alignOptions.align === 'left') {
        p.dataLabel.css({
          color: 'black'
        })
      }
    })
  }
}

Demo API

Upvotes: 1

Shail_bee
Shail_bee

Reputation: 509

You need to add custom formatter which will check the size of yAxis value and will change the color of label accordingly:

formatter: function() { 
    var max = this.series.yAxis.max,
    color = this.y / max < 0.05 ? 'black' : 'white'; // 5% width
    return '<p style="color: ' + color + '">' + this.y + ' M</p>';
},

Upvotes: 1

Related Questions