Highcharts Demo

by maritavindedal

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
    
<div id="container"></div>

CSS

.highcharts-light {
            background-color: #ffffff;
            color: #000000;
        }
        .highcharts-light .highcharts-title {
            fill: #000000;
        }
        .highcharts-light .highcharts-axis-title {
            fill: #000000;
        }
        
        /* Dark mode styles */
        .highcharts-dark {
            background-color: #000000;
            color: #ffffff;
        }
        .highcharts-dark .highcharts-title {
            fill: #ffffff;
        }
        .highcharts-dark .highcharts-axis-title {
            fill: #ffffff;
        }

JavaScript

// Example data
    const data = [29.9, 71.5, 106.4, 129.2, 144.0, 176.0];

    // Initialize the chart with light mode
    Highcharts.chart('container', {
        chart: {
            className: 'highcharts-dark', // Change to 'highcharts-dark' for dark mode
        },
        title: {
            text: 'My Chart Title'
        },
        series: [{
            type: 'column',
            data: data
        }]
    });