Column with rotated labels

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>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
   
</figure>

CSS

#container {
    height: 400px;
}

.highcharts-figure,
.highcharts-data-table table {
    min-width: 310px;
    max-width: 800px;
    margin: 1em auto;
}

.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid #ebebeb;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}

.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}

.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
    padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}

.highcharts-data-table tr:hover {
    background: #f1f7ff;
}

JavaScript

Highcharts.chart('container', {
    "title": {},
    "chart": {
        "height": 200,
        "style": {
            "fontSize": "10px"
        },
        "type": "column",
        "events": {}
    },
    "credits": {
        "enabled": false
    },
    "legend": {
        "enabled": true,
        "itemStyle": {
            "fontWeight": "100",
            "fontSize": "11px"
        },
        "symbolHeight": 8,
        "symbolWidth": 8,
        "margin": 4,
        "symbolRadius": 0
    },
    "tooltip": {
        "useHTML": false,
        "valuePrefix": "",
        "valueSuffix": " ",
        "valueDecimals": 0,
        "shared": true,
        "dateTimeLabelFormats": {
            "millisecond": "%A, %b %e, %H:%M:%S.%L",
            "second": "%A, %b %e, %H:%M:%S",
            "minute": "%A, %b %e, %H:%M",
            "hour": "%A, %b %e, %H:%M",
            "day": "%A, %b %e, %Y",
            "week": "Semaine du %A, %b %e, %Y",
            "month": "%B %Y",
            "year": "%Y"
        }
    },
    "yAxis": {
        "title": {
            "text": "Prix (€/m²)"
        }
    },
    "xAxis": {
        "visible": false
    },
    "plotOptions": {
        "column": {
            "groupPadding": 0.01,
            "pointPadding": 0,
            "threshold": null
        }
    },
    "series": [
        {
            "id": "b0b185b0-6f59-11ed-a247-f9c39e306ad80.16057578811489903",
            "type": "column",
            "name": "Les biens concurrents*",
            "legendIndex": 1,
            "borderColor": "#0c51c2",
            "color": "#ffffff",
            "data": [
                {
                    "y": 861.1111111111111
                }
            ],
            "linkedTo": "87b34140-3cd0-11ee-9b03-45a61b7413750.16057578811489903"
        },
        {
            "id": "731503d0-5956-11ed-a7ff-ddd9eac1278a0.16057578811489903",
            "type": "column",
            "name": "Les biens concurrents*",
            "legendIndex": 1,
           ...