JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
JavaScript
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
plotOptions: {
column: {
zones: [{
value: 10, // Values up to 10 (not including) ...
color: 'blue' // ... have the color blue.
},{
color: 'red' // Values from 10 (including) and up have the color red
}]
}
},
series: [{
data: [7.0, 6.9, 9.5, 10.0, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}]
});
});