JSFiddle - React, Tailwind, and code Playground

Highcharts CSS Theme Demo

by tonytlwu

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. */

/* See http://www.highcharts.com/docs/chart-design-and-style/style-by-css for docs */

.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...

JavaScript

$(function () {
    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, false],
                ['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
        }]
    });
});