Highcharts Demo

author(s): Øystein Moseng

by hendrikdegraaf

HTML

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

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

CSS

#container {
    max-width: 800px;
    height: 400px;
    margin: 1em auto;
}

JavaScript

Highcharts.chart('container',
   {
    "chart": {
        "type": "column",
        "spacingTop": 20,
        "style": {
            "fontFamily": "Arial"
        },
        "events": {}
    },
    "title": {
        "text": "2024",
        "margin": 30,
        "align": "center",
        "style": {
            "color": "#212934",
            "fontSize": "18px",
            "fontWeight": "normal",
            "fontStyle": "normal",
            "whiteSpace": "nowrap",
            "overflow": "hidden",
            "textOverflow": "ellipsis"
        }
    },
    "subtitle": {
        "align": "center",
        "style": {
            "color": "#4a5768",
            "fontSize": "13px",
            "fontWeight": "normal",
            "fontStyle": "normal",
            "whiteSpace": "nowrap",
            "overflow": "hidden",
            "textOverflow": "ellipsis"
        }
    },
    "xAxis": [
        {
            "categories": [
                "Bo",
                "Bombali",
                "Bonthe",
                "Kailahun",
                "Kambia",
                "Kenema",
                "Koinadugu",
                "Kono",
                "Moyamba",
                "Port Loko",
                "Pujehun",
                "Tonkolili",
                "Western Area"
            ],
            "title": {
                "text": null
            },
            "labels": {
                "style": {
                    "color": "#404b5a",
                    "fontSize": "11px",
                    "fontWeight": "normal",
                    "fontStyle": "normal"
                }
            },
            "index": 0,
            "isX": true,
            "internalKey": "highcharts-ri59mbu-55"
        }
    ],
    "yAxis": [
        {
            "min": 0,
            "title": {
                "text": null
            },
            "gridLineColor": "#F1F1F1",
            "labels": {
                "style": {
                    "color": "#404b5a",
            ...