Come impostare un tema scuro nei tuoi grafici HighCharts

HighCharts è un’eccellente libreria JavaScript che permette di creare grafici interattivi per il web.

I colori predefiniti dei grafici sono gradevoli su pagine bianche o con tema chiaro; per adattarli a pagine scure si può procedere in 3 modi:

1. Includere uno dei temi base

Un tema HighCharts è un insieme di opzioni che vengono applicate prima della creazione di un grafico. Nel package highcharts.zip scaricabile dal sito ufficiale ci sono ben 14 temi base tra cui scegliere, che possono essere applicati così (esempio tema grigio):

<script src="/js/themes/gray.js"></script>

2. Creare un tema tramite opzioni JS

Se le combinazioni di colori dei temi base non ti soddisfano puoi creare un tema personalizzato, cioè un oggetto JavaScript apposito da attivare tramite la funzione setOptions(), come nell’esempio seguente:

Highcharts.theme = {
    colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572',
             '#FF9655', '#FFF263', '#6AF9C4'],
    chart: {
        backgroundColor: {
            linearGradient: [0, 0, 500, 500],
            stops: [
                [0, 'rgb(255, 255, 255)'],
                [1, 'rgb(240, 240, 255)']
            ]
        },
    },
    title: {
        style: {
            color: 'black'
        }
    },
    subtitle: {
        style: {
            color: '#666666'
        }
    },
    legend: {
        itemStyle: {
            color: 'black'
        },
        itemHoverStyle:{
            color: 'gray'
        }
    }
};

// Apply the theme
Highcharts.setOptions(Highcharts.theme);

3. Modificare i colori tramite CSS

Se il livello di personalizzazione raggiunto tramite JS non è sufficiente, si può agire direttamente tramite CSS. Nel codice seguente alcune delle modifiche possibili, agendo ad esempio sull’opacità degli assi e della griglia.

<style>
:root {
    --background-color: #222;
    --text-color: #ccc;
}
.highcharts-background {
    fill: var(--background-color);
}
.highcharts-container text {
    fill: var(--text-color) !important;
    stroke: none;
}
.highcharts-axis-title {
    fill-opacity: 0.7;
}
.highcharts-grid-line {
    stroke: var(--text-color);
    stroke-opacity: 0.2;
}
.highcharts-tooltip-box {
    fill: var(--background-color);
}
.highcharts-column-series rect.highcharts-point {
    stroke: var(--background-color);
}
</style>

Ovviamente le tre tecniche mostrate possono essere combinate tra loro (es. usare CSS solo per modificare l’opacità della griglia e JS per il resto), trova la soluzione più adatta ai tuoi scopi!