Highcharts Demo

author(s): Torstein Hønsi

by J. Albert Bowden

HTML

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

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

CSS

@import 'https://code.highcharts.com/css/highcharts.css';

#container {
	height: 400px;
	max-width: 800px;
	margin: 0 auto;
}

/* General data label style */
.highcharts-data-label text {
	fill: black;
	text-shadow: 1px 1px white, 1px -1px white, -1px -1px white, -1px 1px white;
}

/* For the darkest columns, invert the data label text color and shadow */
.highcharts-data-label-color-0 text,
.highcharts-data-label-color-1 text,
.highcharts-data-label-color-4 text,
.highcharts-data-label-color-5 text,
.highcharts-data-label-color-7 text {
	fill: white;
	text-shadow: 1px 1px black, 1px -1px black, -1px -1px black, -1px 1px black;
}

JavaScript

Highcharts.chart('container', {

    chart: {
        type: 'column'
    },

    title: {
        text: 'Data labels with contrast'
    },

    subtitle: {
        text: 'Adjust data label color and shadow to underlying column'
    },

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        dataLabels: {
            enabled: true,
            inside: true
        },
        colorByPoint: true
    }]
});