Studies - census stats - data label

author(s): Torstein Hønsi

by Guillaume Seguin

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: 152px;
    min-width: 300px;
    max-width: 800px;
    margin: 0 auto;
}

.highlight .highcharts-data-label-box {
    fill: #e0e0e0;
}

.highlight.highcharts-data-label text {
    font-weight: bold;
    fill: #4c6cd5;
}

JavaScript

Highcharts.chart('container', {
    "title": {
    	text: undefined
    },
    "chart": {
        "spacingTop": 8,
        "spacingBottom": 4,
        "spacingLeft": 0,
        "spacingRight": 0,
        "type": "column",
        
        styledMode: true
    },
    "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": 100,
        "plotBands": [
            {
                "color": "white",
                "from": 56.47163120567376,
                "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": 5.5,
                "to": 6.5
            }
        ]
    },
   ...