2. Add a CSS file for style changes

Now we can add a CSS file to contain any style changes we wish to make.

Create a CSS file and make sure to include it in your page:

<linkhref="css/chart-style.css"rel="stylesheet"type="text/css">

3. Add new CSS rules

Let’s add some rules to our CSS file!

Start by changing the background colour. The Highcharts documents have a useful guide showing the CSS selectors for each element in the chart. Using this guide we can see that the selector for the background rectangle is .highcharts-background so let’s go ahead and add a new CSS rule:

.highcharts-background{fill:#223;}

We can continue to add rules for each element in the chart. For example we can change the font using:

.highcharts-container{font-family:"Lato",sans-serif;}

(Don’t forget to include the Google Font code in the header!)

Other selectors we’ve used to style the chart are: .highcharts-title (for the main title), .highcharts-legend-item (for legend items), .highcharts-axis (for the axes), .highcharts-axis-labels (for the axis labels), .highcharts-grid for the background grid and .highcharts-graph for the lines.

4. Add colour palette

Each series in the chart is assigned a specific class name starting .highcharts-color-0 etc. We’ll select some colours from the colour palette generator Coolors and add some more rules to change the colour of each line: