Bar with negative stack

author(s): Torstein Hønsi

by Guillaume Seguin

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<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

// Data gathered from http://populationpyramid.net/germany/2015/

// Age categories
var categories = [
    'Ville', 'Code postal', 'Agglomération', 'Balcon',
    'Chauffage électrique', 'Parking', 'Térrasse', 'IRIS', 'Rez-de-chaussée',
    'Dernier étage', 'étage', 'Récent', 'Quartier', 'Pièces',
    'Surface'
];

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    
    legend: {
    	enable: false
    },
    
    title: {
        text: "Impact des caractéristiques du bien sur l'estimation"
    },
    xAxis: {
        categories: categories,
        reversed: false,
        labels: {
            step: 1,
        		rotation: 90
        }
    },
    yAxis: {
        title: {
            text: null
        },
        labels: {
            formatter: function () {
                return Math.abs(this.value) + '%';
            }
        },
    },

    plotOptions: {
        series: {
            dataLabels: {
                enabled: true,
                formatter: function () {
                  return Highcharts.numberFormat(this.y) + ' %';
                },/* 
                inside: true, */
                style: {
                	color: 'gray',
                	fontWeight: 'normal',
                  textOutline: 'none'
                },
            },
        		showInLegend: true
        }
    },

    series: [
    	{
        data: [
          {name: categories[0],x:0,y:13.176077319782683},
          {name: categories[1],x:1,y:9.038528530979521},
          {name: categories[2],x:2,y:3.5878642194491404},
          {name: categories[3],x:3,y:0.5256569836731886},
          {name: categories[4],x:4,y:0.05311056969233074},
          {name: categories[5],x:5,y:0.40846666813763866},
          {name: categories[6],x:6,y:0.5162470860828993},
          {name: categories[7],x:7,y:4.429037805376414},
          {name: categories[8], x:8,y:5.100892562374337},
          {name: categories[9],x:9,y:6.244767219412755},
          {name:...