How to Adjust Scale of A Chart to Include DataLabels

[Lemon]

Hello,

I've added data labels to a chart and changed the position of data labels by the following way:

Code: Select all

plotOptions: {
   candlestick: {
      ... ,
      dataLabels: {
        enabled: true,
        ... ,
        formatter() {
          const dataMax = this.series.dataMax
          const dataMin = this.series.dataMin
          if (dataMax === dataMin) {
            return
          }
          const point = this.point
          const highestPrice = this.series.points.find((point) => point.high === dataMax)
          const lowestPrice = this.series.points.find((point) => point.low === dataMin)
          if (point.index === highestPrice.index) {
            point.customAlignLabel = point.plotHigh - 20
            point.customColor ='red'
            return point.high
          }
          if (point.index === lowestPrice.index) {
            point.customAlignLabel = point.plotLow
            point.customColor = 'green'
            return point.low
          }
        },
      },
    },
  },

Code: Select all

HighStock.addEvent(HighStock.Series, 'afterDrawDataLabels', function() {
  var series = this;
  series.points.forEach(function(point) {
    if (point.customAlignLabel && point.dataLabel) {
      point.dataLabel.attr({
        y: point.customAlignLabel
      });
      point.dataLabel.css({
        color: point.customColor
      });
      delete point.customAlignLabel;
    }
  });
});

Normally, the chart would adjust the scale of y axis automatically according to data.
However, I found that data labels sometimes could be almost out of the chart, which means the scale of y axis does not include data labels.
It looks like this: https://drive.google.com/file/d/1a2XuP5 ... sp=sharing
I'm wondering how I can make the scale change according to both data and data labels.

If the information mentioned above is not clear enough, please let me know.
Thank you for your help.

Best regards,

[dominik.c]

Hello Lemon!

We appreciate you reaching out to us!

Thanks for explaining your problem! But could you also reproduce the issue in an online editor that I could work on?

Example demo:
https://jsfiddle.net/BlackLabel/0pbeym97/

Best regards!

[Lemon]

Hello,

Maybe the following example may help: https://jsfiddle.net/BlackLabel/L6hcd5ve/1/
Thanks!

Best regards

[dominik.c]

Hi again!

To adjust the scale of the axis to the data you can check in load event what is the difference between the axis max value and the max point from the series. If the difference is too small you can update the axis max property to something higher so the dataLabel won't be displayed outside the chart.

API references:
https://api.highcharts.com/highcharts/chart.events.load
https://api.highcharts.com/class-refere ... xis#update

Demo:
https://jsfiddle.net/BlackLabel/6qyLfza9/

Best regards!

[Lemon]

I appreciate your help very much.

But there is a small problem.
I found that it may not work properly under situation of "1m", "3m," or "6m," since the axis max value is too high for data of the series.
So I tried to fix this problem by this way:

Code: Select all

 Highcharts.stockChart('container', {

    chart: {
      events: {
        load: function() {
          var chart = this,
            yMax = chart.yAxis[0].max,
            seriesMax = chart.series[0].dataMax;

          chart.series[0].points.forEach(function(point) {
            if (yMax - seriesMax < 10) {
              chart.yAxis[0].update({
                max: yMax + 25
              })
            }
            if (yMax - seriesMax > 10) {
              chart.yAxis[0].update({
                max: seriesMax
              })
            }
          })
        }
      }
    },
    
   ...
 }

However, I found this way sometimes makes the chart reload too frequently, and it may lead to a website crash.
Is there any adjustment should I make in the above-mentioned codes?
Or should I try another way if I want to avoid this kind of situation?

Best regards!

[dominik.c]

Hi again!

You can also use the same piece of code with the condition and updating after every change of extremes of the axis. For example, you can use afterSetExtremes event, link: https://api.highcharts.com/highcharts/y ... etExtremes

If something doesn't work for you please reproduce your issue in an online editor.

Best regards!

[Lemon]

Hi

Since the code as a whole is scattered throughout a team project, it's difficult to reproduce it to some degree.
But the problem of higher axis max value is the same as the example you provided in previous message.
Link: https://jsfiddle.net/BlackLabel/6qyLfza9/

The problem is, before adding any kind of events, the axis of all charts is originally adjust themselves according to data range.
However, this default function seems disappear after adding events.
Can I merely adjust the axis with the max point from the series and without making the default function disable?

Best regards!

[dominik.c]

Hi again!

You can move the code from the event "afterDrawDataLabels" to the redraw event of the chart. We're not using the update method so we can do that. Then after each redraw (e.g click buttons in rangeSelector) the dataLabels position would be changed.

Demo:
https://jsfiddle.net/BlackLabel/569svqLd/

Best regards!