CODEWITHSUNDEEP
javascriptchartshighchartsyaxis
koby
koby

Reputation: 33

Highcharts create custom yAxis labels

I want to create following chart example, the xAxis and lines are no problem - thats already done. But I just can't get the custom yAxis label configuration get to work. Could someone provide an example how to do that with highcharts?

Highchart Example

I tried something like this in my Axis options, but didn't get it to work like in the example picture:

yAxis: {
  tickPositioner() {
    return [1e-8, 0.000001, 0.0001, 0.01, 1, 100, 10000];
  },
  min: 0,
  labels: {
    reserveSpace: true,
    formatter() {
      return this.value;
    },
  },
}

the result of the above code is something like this:

Example result image of highcharts

Strange is, that code is coming the above example very near:

tickPositions: [-8, -7, -4, -2, 0, 1, 2, 4],
tickPositioner: null,

Note: It's hard to provide a example fiddle in here because the series I have for this are non-public and the dataset is likely 4000-8000 points.

Upvotes: 0

Views: 155

Answers (1)

ppotaczek
ppotaczek

Reputation: 39099

This is a perfect use case for the logarithmic y-axis type.

You can enable the option in the below way:

  yAxis: {
    type: 'logarithmic'
  }

However, to show negative values, you will need to add a small extension. Useful thread: https://www.highcharts.com/forum/viewtopic.php?t=49524

Live demo: https://jsfiddle.net/BlackLabel/9pgujcyd/

Docs: https://www.highcharts.com/docs/chart-concepts/axes#logarithmic

API Reference: https://api.highcharts.com/highcharts/yAxis.type

Upvotes: 1

Related Questions