CODEWITHSUNDEEP
javascriptreactjstypescripthighchartsreact-highcharts
Bernardo Marques
Bernardo Marques

Reputation: 1055

Define and apply theme on highcharts-react-official

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)?

Upvotes: 5

Views: 2947

Answers (1)

madepiet
madepiet

Reputation: 884

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

Upvotes: 4

Related Questions