olegkon1
Posts: 1
Joined: Tue May 04, 2021 1:46 pm

Using custom fonts with Highcharts

Hi,

I am trying to use 3rd party Typography fonts with Highcharts6 line graphs in Angular6 apps.
I use those fonts for divs with a CSS class, say class='abc-body-large'
Is there a similar way to do it?

I need to use it with x/y axis labels, tooltips, plotline labels.
I've seen samples of people do it via fontStyle/fontFamily, but that seems like a long and hard way.
There is already a 3rd party file with lots of CSS variables, but it comes to a css class. how can I apply it?
Any simpler ways?

Thank you,
Oleg.
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Using custom fonts with Highcharts

Hi,
Welcome to our forum and thanks for contacting us with your question!

You can use useHTML: true and create HTML elements, in some places you can for sure like in this example at annotations, line 26.

Demo with add custom fonts by class:
https://jsfiddle.net/BlackLabel/dv5zfqpu/

https://www.highcharts.com/docs/chart-c ... tting#html

https://api.highcharts.com/highcharts/tooltip.useHTML
https://api.highcharts.com/highcharts/tooltip.useHTML

Also, you can try to change styledMode https://api.highcharts.com/highcharts/chart.style

Let me know how are you doing with this.
Best regards.
Sebastian Hajdus
Highcharts Developer

Return to “Highcharts Usage”