Highcharts dark mode support and styledMode

Created on 25 June 2025, 8 days ago

Problem/Motivation

When using a dark mode theme, such as Gin dark mode, charts do not render nicely.
Highcharts in particular has dark mode support documented here: https://www.highcharts.com/docs/dashboards/light-dark-theme
Dark mode can be enabled by adding some custom CSS for the dark-mode styling and setting the chart "styledMode" to false, so that the CSS rules apply instead of inline settings.
It will then switch automatically based on the system setting, or wrapper class.
However, the chart module highcharts integration doesn't support enabled the "styledMode" parameter
https://api.highcharts.com/highcharts/chart.styledMode

Steps to reproduce

Enable Gin theme dark mode in the theme settings and check the chart display.

Proposed resolution

Let's add support for the "styledMode" chart option for highcharts, default FALSE (same as current).

Remaining tasks

Add setting and option configuration to apply the styledMode config option,

User interface changes

New setting option for Chart > Styled mode (default FALSE)

Data model changes

New Highchart config setting for Global options > Chart > Styled mode

✨ Feature request
Status

Active

Version

5.1

Component

Highcharts integration

Created by

πŸ‡³πŸ‡ΏNew Zealand davidwhthomas

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

Production build 0.71.5 2024