JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<script src="//rawgithub.com/phpepe/highcharts-regression/master/highcharts-regression.js?8">
</script>
Highcharts Regression
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
JavaScript
$(function() {
// Create the chart
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Basic drilldown'
},
xAxis: {
type: 'category'
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true
}
}
},
series: [{
regression: true,
name: 'Things',
colorByPoint: true,
data: [{
x: 1,
y: 5,
drilldown: 'animals'
}, {
x: 2,
y: 2,
drilldown: 'fruits'
}, {
x: 3,
y: 4,
drilldown: 'cars'
}]
}],
drilldown: {
series: [{
id: 'animals',
regression: true,
data: [
[0, 4],
[1, 2],
[2, 1],
[3, 2],
[3, 1]
]
}, {
id: 'fruits',
regression: true,
data: [
[1, 4],
[2, 2]
]
}, {
id: 'cars',
regression: true,
data: [
[0, 4],
[1, 2],
[2, 2]
]
}]
}
});
});