billing threshold

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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
        Chart showing stacked columns for comparing quantities. Stacked charts
        are often used to visualize data that accumulates to a sum. This chart
        is showing data labels for each individual section of the stack.
    </p>
</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

const evolution = [ 4792.054, 3614.741, 6777.284000000001, 10942.533000000001, 7749.412, 1559.507, 5227.367, 8521.257, 1130.673];
const dates = ["2019-11-01","2019-12-01","2020-01-01","2020-02-01","2020-03-01","2020-04-01","2020-05-01","2020-06-01","2020-07-01"];
const threshod = 5000;

Highcharts.setOptions({

    lang: {
        decimalPoint: ',',
        thousandsSep: ' '
    }

});

Highcharts.chart('container', {
    chart: {
        type: 'column',
        backgroundColor: 'transparent'
    },
    title: {
        text: undefined
    },
    xAxis: {
        categories: dates.map(d => Highcharts.getOptions().lang.shortMonths[moment(d).month()])
    },
    yAxis: {
        labels: {
          formatter: function() {
            return Highcharts.numberFormat(this.value, 0) + ' €';
          }
        },
        min: 0,
        title: {
            text: ''
        },
        opposite: true,
        plotLines: [{
            value: threshod,
            dashStyle: 'Dash',
            color: 'red',
            width: 1,
            label: {
            		align: 'right',
                formatter: function () {
                    return this.options.value + ' €';
                },
                style: {
                    color: 'red'
                },
            },
            zIndex: 5
        }]
    },
    tooltip: {
        headerFormat: '<b>{point.x}</b><br/>',
        pointFormat: '{series.name}: {point.y:,.0f} €'
    },
    plotOptions: {
        column: {
            stacking: 'normal'
        }
    },
    series: [{
        color: '#767676',
        name: 'Consommation restante',
        data: evolution.map(v => v < threshod ? threshod-v : 0)
    }, {
        color: '#6490bd',
        name: 'Consommation actuelle',
        data: evolution
    }]
});