Table of contents
JS HTML 
Introduction
Highcharts.js is a popular JavaScript library that lets you make charts and graphs that you can interact with. It lets programmers make many different kinds of charts, such as line, column, bar, pie, scatter, and many others. Highcharts.js is made to be easy to use and change, and it gives you many options for how to format and style the charts. It also has some advanced features, like the ability to export data, zoom in and out, and use real-time data streams. Highcharts.js is used a lot in web applications, especially for showing data and making reports.
Draggable chart demo
Try for yourself, the chart points are draggable.
Chart data will appear here once you drag it :)
Here's how it's done:
function renderDraggableChart(container, data) {
let chart = Highcharts.chart(container, {
chart: {
animation: true
},
title: {
text: 'Temperature schedule'
},
xAxis: {
categories: ['0:00', '1:00', '2:00', '3:00', '4:00', '5:00', '6:00', '7:00', '8:00', '9:00', '10:00', '11:00', '12:00',
'13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00']
},
yAxis: {
softMin: 17,
softMax: 23,
tickInterval: 1,
title: {
text: 'Temperature ℃'
}
},
plotOptions: {
series: {
stickyTracking: false,
dragDrop: {
draggableY: true,
dragMinY: 0.1,
dragPrecisionY: 0.1,
},
point: {
events: {
drop: function (e) {
console.log(chart.series[0].yData)
}
}
},
},
column: {
stacking: 'normal',
minPointLength: 2
},
line: {
cursor: 'ns-resize'
}
},
tooltip: {
valueDecimals: 1,
formatter: function() {
return this.x + '<b> - ' + this.y.toFixed(1) + '℃</b>';
}
},
series: [{
name: '',
data: data
}]
});
}<div id="chart-1"></div>
<script>renderDraggableChart('chart-1',[18,18,18,18,18,18.5,20,20,20,19.7,19.7,19.7,19.7,19.7,19.7,20,20,20,20,20,20,20,19.5,18.5]);</script>Useful resources
Highcharts API Option: plotOptions.series.dragDrop
The draggable-points module allows points to be moved around or modified in the chart.