Define and apply theme on highcharts-react-official

user_12938545 0
Viewed 1013

I'm trying to update higcharts texts font globally, I coundn't find anywhere on documentation how to apply a custom theme using highcharts-react-official. Is there an equivalent of Highcharts.theme = style and Highcharts.setOption(Highcharts.theme)?

react-highcharts typescript reactjs highcharts javascript
1 Answers

A Highcharts theme is a set of pre-defined options that are applied as default Highcharts options before each chart is instantiated. The highcharts.zip package comes with some themes that can easily be applied to your chart by just including them: https://www.highcharts.com/docs/chart-design-and-style/themes

Of course, you can also create your own options. Changing theme is nothing more than just calling setOptions() with a new option.

Live demo: https://stackblitz.com/edit/highcharts-87w46s?file=Highchart.js

import DarkUnica from 'highcharts/themes/dark-unica';
DarkUnica(ReactHighcharts.Highcharts);

You can also check if the CSS styling approach will suit this case: https://www.highcharts.com/docs/chart-design-and-style/style-by-css

user_99965350
Related