Highcharts Demo

author(s): Torstein Hønsi

by Guillaume Seguin

HTML

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

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

CSS

#container {
    height: 400px;
}

JavaScript

Highcharts.chart('container', {
    "title": {},
    "chart": {
        "height": 152,
        "spacingTop": 4,
        "spacingBottom": 0,
        "spacingLeft": 0,
        "spacingRight": 0,
        "type": "column"
    },
    "credits": {
        "enabled": false
    },
    "legend": {
        "enabled": true,
        "layout": "horizontal",
        "align": "center",
        "verticalAlign": "bottom",
        "symbolRadius": 0,
        "symbolWidth": 10,
        "symbolHeight": 10,
        "padding": 0,
        "itemStyle": {
            "fontWeight": "400",
            "color": "#9e9e9e"
        }
    },
    "tooltip": {
        "enabled": true,
        "valueDecimals": 0,
        "pointFormat": "<span style=\"color:{point.color}\">●</span> {series.name}: <b>{point.y}%</b><br/>"
    },
    "yAxis": {
        "labels": {
            "format": "{value}%",
            "style": {
                "color": "#9e9e9e"
            }
        },
        "title": {
            "text": "",
            "style": {
                "color": "#242633"
            }
        },
        "reversedStacks": false,
        "min": 0,
        "tickInterval": 25,
        "gridLineWidth": 1,
        "lineWidth": 0,
        "max": 75,
        "plotBands": [
            {
                "color": "white",
                "from": 19.1068515497553,
                "to": 75
            }
        ]
    },
    "xAxis": {
        "categories": [
            "Moins de 30m²",
            "30 à 39m²",
            "40 à 59m²",
            "60 à 79m²",
            "80 à 99m²",
            "100 à 119m²",
            "120m² et plus"
        ],
        "gridLineWidth": 0,
        "lineWidth": 0.5,
        "labels": {
            "style": {
                "color": "#9e9e9e"
            }
        },
        "plotBands": [
            {
                "color": "#e0e0e0",
                "from": 2.5,
                "to":...