Tutorials

How to add light and dark theme to Highcharts dashboards

by

Mustapha Mekhatria

4 minutes read

A bubble chart picture with a light theme on the right and dark theme on the left side

In this article, I will guide you through the process of building a straightforward dashboard using Highcharts Dashboards components. Additionally, I’ll demonstrate how easy it is to implement a light or dark mode feature.

Check below the dashboard that I will show in this article:

The dashboard visualizes the amount of vitamin A in the following foods: beef liver, lamb liver, cod liver oil, mackerel, and tuna. The dashboard has three sections:

A bubble chart on the left.
A data grid is on the right.
A simple panel at the bottom to switch between light and dark mode.

Let’s dive into the code.

Library

Make sure to include the necessary Highcharts Dashboards libraries:

<script src="https://code.highcharts.com/dashboards/dashboards.js"></script>
<script src="https://code.highcharts.com/dashboards/datagrid.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/dashboards/modules/dashboards-plugin.js"></script>

Data

The next step is to define the data. I am using a very simple data set structure:

const data = [
  ['Food', 'Vitamin A'],
  ['Beef Liver', 6421],
  ['Lamb Liver', 2122],
  ['Cod Liver Oil', 1350],
  ['Mackerel', 388],
  ['Tuna', 214]
];

Layout configuration

I use the gui object to define the overall structure and appearance of the dashboard. In this case, there is one row with two cells, one for the chart and the other one for the data grid:

gui: {
  layouts: [{
    id: 'layout-1',
    rows: [{
      cells: [{
        …
        id: 'dashboard-col-0'
      }, {
        …
        id: 'dashboard-col-1'
      }]
    }]
  }]
},

Components

The components array is where I define the individual components that will be placed in the cells of the dashboard. The first cell contains chart information, whereas the second has data grid information.

components: [{
  cell: 'dashboard-col-0',
  …
  chartOptions: {
    // ... (Highcharts chart configuration)
  }
}, {
  cell: 'dashboard-col-1',
  type: 'DataGrid',
  dataGridOptions: ...
}]

Light and dark mode

Finally, it is time to implement the light/dark mode functionality, and it is super easy.
Here is the HTML section:

 <h4>Color theme</h4>
 <label>
   <input type="radio" name="color-mode" value="none" checked>
   System default
 </label>
 <label>
   <input type="radio" name="color-mode" value="light">
   Light
 </label>
 <label>
   <input type="radio" name="color-mode" value="dark">
   Dark
 </label>

And here is the js snippet:

[...document.querySelectorAll('input[name="color-mode"]')]
.forEach(input => {
  input.addEventListener('click', e => {
    document.getElementById('container').className =
      e.target.value === 'none' ? '' : `highcharts-${e.target.value}`;
  });
});

Basically, I use a set of radio buttons for selecting the color theme and the snippet code to add click event listeners to these radio buttons. When a radio button is clicked, it updates the class of the ‘container’ element, triggering the application of the corresponding Highcharts Dashboard theme (light, dark, or none for system default). This class change influences the application of distinct color CSS variables. If you want to customize colors for either the light or dark themes, or both, you can refer to the highcharts.css file to understand how the colors are defined. This setup allows you to switch between different color themes for the Highcharts Dashboard dynamically. Simple right 🙂

Now, you know a new trick to create dashboards with light and dark modes with Highcharts dashboards. Explore these helpful links to delve deeper into creating your personalized theme style mode and enhancing dashboard styling through CSS.