CSS theming

author(s): Torstein Hønsi

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container"></div>

CSS

@import url("https://code.highcharts.com/css/highcharts.css");

#container {
    height: 200px;
    max-width: 600px;
    min-width: 600px;
}

:root {
    /* Colors for data series and points */
    --highcharts-color-0: #F79A1F;
    --highcharts-color-1: #FF0000;
    --highcharts-color-2: #FFFF00;
    --highcharts-color-3: #00AA00;
    --highcharts-color-4: #CCCCCC;
    --highcharts-color-5: #00FFFF;
    --highcharts-color-6: #222222;    
}

JavaScript

// Data retrieved from https://en.wikipedia.org/wiki/Winter_Olympic_Games
Highcharts.chart('container', {

    chart: {
        type: 'column',
        styledMode: true
        
    },
legend: {
        enabled: false
    },
    title: {
        text: ''
    },

    xAxis: {
        categories: ['14', '15', '16', '17', '18', '19', '20', '21',  '22', '23',  
        '24', '25',  '26', '27', '28', '29', '30', '31', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
    },

    yAxis: {
        title: {
            text: ''
        }
    },
    plotOptions: {
        series: {
            stacking: 'normal',
            pointPadding: 0.0
        }
    },

    series: [{
        name: 'PV',
        data: [0, 26.8, 23.8, 26.9, 0.0, 19.4, 26.2, 36.6, 9.1, 37.2, 36.8, 28, 32.6, 0, 12.5, 24.3, 21.0, 9.6 , 26.900, 8.2, 8.4, 26.11, 26.2, 7.96, 6.9, 5, 5.1, 7.8, 4.9, 10],
        stack: 'Input'
    }, {
        name: 'Netzbezug',
        data: [0, 26.8, 23.8, 26.9, 0.0, 19.4, 26.2, 36.6, 9.1, 37.2, 36.8, 28, 32.6, 0, 12.5, 24.3, 21.0, 9.6 , 26.900, 8.2, 8.4, 26.11, 26.2, 7.96, 6.9, 5, 5.1, 7.8, 4.9, 10],
        stack: 'Input'
    }, {
        name: 'Akkuentladen',
        data: [0, 26.8, 23.8, 26.9, 0.0, 19.4, 26.2, 36.6, 9.1, 37.2, 36.8, 28, 32.6, 0, 12.5, 24.3, 21.0, 9.6 , 26.900, 8.2, 8.4, 26.11, 26.2, 7.96, 6.9, 5, 5.1, 7.8, 4.9, 10],
        stack: 'Input'
    }, {
        name: 'Netzeinspeisung',
        data: [0, 26.8, 23.8, 26.9, 0.0, 19.4, 26.2, 36.6, 9.1, 37.2, 36.8, 28, 32.6, 0, 12.5, 24.3, 21.0, 9.6 , 26.900, 8.2, 8.4, 26.11, 26.2, 7.96, 6.9, 5, 5.1, 7.8, 4.9, 10],
        stack: 'Input'
    }, {
        name: 'Auto',
        data: [0, 26.8, 23.8, 26.9, 0.0, 19.4, 26.2, 36.6, 9.1, 37.2, 36.8, 28, 32.6, 0, 12.5, 24.3, 21.0, 9.6 , 26.900, 8.2, 8.4, 26.11, 26.2, 7.96, 6.9, 5, 5.1, 7.8, 4.9, 10],
        stack: 'Output'
    }, {
        name: 'Akkuladen',
        data: [0, 26.8, 23.8, 26.9, 0.0, 19.4, 26.2, 36.6, 9.1, 37.2, 36.8, 28, 32.6, 0, 12.5,...