Highcharts Demo

author(s): Torstein Hønsi

by Guillaume Seguin

HTML

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

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

CSS

#container {
    height: 400px;
}

JavaScript

Highcharts.chart('container', {
    "title": {},
    "chart": {
        "type": "column",
        "backgroundColor": "#FFFFFF",
        "spacing": [
            5,
            0,
            0,
            0
        ]
    },
    "credits": {
        "enabled": false,
        "text": "Source Insee 2020",
        "href": "https://www.insee.fr",
        "position": {
            "verticalAlign": "top",
            "y": 7
        }
    },
    "legend": {
        "enabled": true,
        "layout": "horizontal",
        "align": "center",
        "verticalAlign": "bottom",
        "backgroundColor": "#FFFFFF",
        "itemStyle": {
            "fontWeight": "400",
            "color": "#9e9e9e"
        },
        "symbolRadius": 0,
        "symbolWidth": 10,
        "symbolHeight": 10,
    padding:0
    },
    "tooltip": {
        "enabled": true,
        "valueDecimals": 0,
        "pointFormat": "<span style=\"color:{point.color}\">●</span> {series.name}: <b>{point.y} %</b><br/>"
    },
    "yAxis": {
        "labels": {
            "style": {
                "color": "#9e9e9e"
            }
        },
        "title": {
            "text": "",
            "style": {
                "color": "#242633"
            }
        },
        "reversedStacks": false,
        "tickAmount": 4,
        "opposite": true
    },
    "xAxis": {
        "categories": [
            "Agriculteurs",
            "Artisans",
            "Cadres",
            "Intermédiaires",
            "Employés",
            "Ouvriers",
            "Retraités",
            "Sans-emploi"
        ],
        "labels": {
            "rotation": 0,
            "allowOverlap": true,
            "style": {
                "color": "#9e9e9e"
            }
        }
    },
    "plotOptions": {
        "series": {
            "states": {
                "inactive": {
                    "opacity": 1
                }
            }
        },
        "column": {
            "borderRadius": 0,
           ...