CODEWITHSUNDEEP
reactjschartshighchartslinechartreact-functional-component
Bhagyesh Bodhe
Bhagyesh Bodhe

Reputation: 21

labels customisation in line chart using highcharts

I am using line chart, where I have added plot bands ranges. I want to return those labels of y-axis which are present in plot bands.

labels: {
formatter: function () {
if ([-12, -10, 0.0, 6.5, 10, 20].includes(this.value)) {
return this.value;
}
return "";
},
},

I have added this labels object to y-axis

And also I am unable to set min and max value to y-axis max: 20, min: -12,

And there is extra white space added between x-axis and chart which I don't want

https://jsfiddle.net/bhagyeshbodhe/5x8cypqg/2/

Upvotes: 0

Views: 27

Answers (1)

ppotaczek
ppotaczek

Reputation: 39139

Use tickPositions instead of labels.formatter. For example:

tickPositions: [-12, -10, 0.0, 6.5, 10, 20]

Live demo: https://jsfiddle.net/BlackLabel/vz5ychx0/

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

Upvotes: 0

Related Questions