Highcharts Demo

author(s): Torstein Hønsi

by tin nguyen

HTML

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

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

CSS

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

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

/* Since we're redefining colors after highcharts.css, we need to be specific 
because otherwise some properties would be overwritten. Note that the preferred and 
much simpler way to change the color scheme is to set the colors array in the highcharts.scss 
SASS file and build it to CSS. */
.highcharts-point.highcharts-color-0,
.highcharts-legend-item.highcharts-color-0 .highcharts-point,
.highcharts-tooltip .highcharts-color-0 {
	fill: #b3597c;
}
.highcharts-tooltip.highcharts-color-0,
.highcharts-data-label-connector.highcharts-color-0 {
	stroke: #b3597c;
}

.highcharts-point.highcharts-color-1,
.highcharts-legend-item.highcharts-color-1 .highcharts-point,
.highcharts-tooltip .highcharts-color-1 {
	fill: #c4688c;
}
.highcharts-tooltip.highcharts-color-1,
.highcharts-data-label-connector.highcharts-color-1 {
	stroke: #c4688c;
}

.highcharts-point.highcharts-color-2,
.highcharts-legend-item.highcharts-color-2 .highcharts-point,
.highcharts-tooltip .highcharts-color-2 {
	fill: #78a8d1;
}
.highcharts-tooltip.highcharts-color-2,
.highcharts-data-label-connector.highcharts-color-2 {
	stroke: #78a8d1;
}

.highcharts-point.highcharts-color-3,
.highcharts-legend-item.highcharts-color-3 .highcharts-point,
.highcharts-tooltip .highcharts-color-3 {
	fill: #7991d2;
}
.highcharts-tooltip.highcharts-color-3,
.highcharts-data-label-connector.highcharts-color-3 {
	stroke: #7991d2;
}

.highcharts-point.highcharts-color-4,
.highcharts-legend-item.highcharts-color-4 .highcharts-point,
.highcharts-tooltip .highcharts-color-4 {
	fill: #7d7bd4;
}
.highcharts-tooltip.highcharts-color-4,
.highcharts-data-label-connector.highcharts-color-4 {
	stroke: #7d7bd4;
}

.highcharts-point.highcharts-color-5,
.highcharts-legend-item.highcharts-color-5 .highcharts-point,
.highcharts-tooltip .highcharts-color-5 {
	fill:...

JavaScript

Highcharts.chart('container', {

    title: {
        text: 'Pie point CSS'
    },

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

    series: [{
        type: 'pie',
        allowPointSelect: true,
        keys: ['name', 'y', 'selected', 'sliced'],
        data: [
            ['Apples', 29.9, true],
            ['Pears', 71.5, false],
            ['Oranges', 106.4, false],
            ['Plums', 129.2, false],
            ['Bananas', 144.0, false],
            ['Peaches', 176.0, false],
            ['Prunes', 135.6, true, true],
            ['Avocados', 148.5, false]
        ],
        showInLegend: true
    }]
});