Formatting axis labels and gridlines

[hasm]

Hi There,

I want some special formatting in my chart but I cannot find the correct settings in the documentation.

1 Is it possible to make the first and last y-axis label a different color?

2 Is it possible to position the first label differently? (I now have all labels above the gridlines but need to have the first one below the gridline)

3 Is it possible to make the y-axis gridlines shorter than the x-axis. So add a small margin on both the start and the end.

The following visual example makes it hopefully a bit more clear what I want to achieve:
https://oc.bachmann.info/index.php/s/f46Q9AneXl4HMNb



What I have so far can be seen here:
https://jsfiddle.net/pt98mqke/



Greetings,

Hans

[dominik.c]

Hello hasm!

We appreciate you reaching out to us!

You can use formatter function for axis.labels and set useHTML property to true. Then you can the look and position of each label using HTML and CSS. Check out the demo in the link below and tell me what you think about it.

API references:
https://api.highcharts.com/highcharts/x ... ls.useHTML
https://api.highcharts.com/highcharts/x ... .formatter

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

Best regards!

[hasm]

Hello Dominik,

Yes this is very nice.
Now the maximum value can be different but I see that the this object contains the properties isFirst and isLast. Are there any objections, for this use case, to use these for changing position and color?

Greetings,

Hans

[dominik.c]

Hi again!

No, there aren't any. It's a good idea to use them. I just wanted to show you that by referring to label value you can get to each label of the axis.

Best regards!

[hasm]

Hello Dominik,


Thanks for your answer, this helps.

Do you maybe also have a suggestion about my third question (trimming the gridlines) or is this not possible?


Greetings,

Hans

[dominik.c]

Hi again!

There are no API options to do that, but you can use plotLines and draw two lines that will cover the gridLines where they start and end.

API references:
https://api.highcharts.com/highcharts/xAxis.plotLines

Demo:
https://jsfiddle.net/BlackLabel/9hwfb658/

Best regards!

[hasm]

Hello Dominik,


All Clear.


Thanks for your help is very usefull.


Greetings,

Hans

[dominik.c]

You're welcome!

In case of any further questions, feel free to contact us again.