JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.highcharts.com/highcharts.src.js"></script>
<script src="https://rawgithub.com/phpepe/highcharts-regression/master/highcharts-regression.js"></script>
<div id="container"></div>
CSS
#container {
min-width: 310px;
max-width: 800px;
height: 400px;
margin: 0 auto
}
JavaScript
$(function() {
$('#container').highcharts({
title: {
text: 'SERIES COMBINATION'
},
exporting:false,
credits: {
enabled: false
},
chart: {
type: 'scatter',
zoomType: 'xy'
},
xAxis: {
gridLineWidth: 1,
lineColor: 'black',
tickWidth: 0,
title: {
text: 'voltage'
},
categories: ['0', '4', '8', '12', '16', '20', '24', '28', '32', '36', '40', '44', '48']
},
yAxis: {
lineWidth: 1,
lineColor: 'black',
title: {
text: 'Current'
},
},
plotOptions: {
scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
}
},
legend: false,
series: [{
regression: true,
regressionSettings: {
type: 'polynomial',
color: 'rgba(223, 183, 83, 0)',
dashStyle: 'dash'
},
name: 'SplineChart',
type: 'spline',
marker: {
enabled: false
},
data: [
[0, 5],
[4, 5],
[8, 5],
[12, 5],
[16, 5],
[20, 5],
[24, 5],
[28, 5],
[32, 5],
[36, 5],
[40, 5],
[44, 4.5],
[48, 0],
]
},
]
});
});