I have seen so many custom charts and I would like to know how to modify them too.
Is there a way on such a chart chart.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.js"></script>
<!-- this 2 are for zoom plugins -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chartjs-plugin-zoom.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.chart-container {
position: relative;
width: 90%;
height: 200px;
background-color: black;
color: white;
}
#chart {
width: 100%;
}
</style>
</head>
<body>
<div class="chart-container" id="chart-container" style="text-align:center;">
<canvas id="chart" style="display: inline-block;"></canvas>
</div>
<script>
const ctx = document.getElementById('chart').getContext('2d');
let data = [];
function generateRandomData(numPoints) {
let currentDate = new Date();
for (let i = 0; i < numPoints; i++) {
const rand_plus_or_minus = Math.round(Math.random()) * 2 - 1;
const y = Math.random() * 100 + 50;
new_date = parseInt(currentDate.getTime()/1000)*1000 + i * 24 * 60 * 60 * 1000;
data.push({
x: new_date,
y: y,
});
}
return data;
}
var rawData = generateRandomData(50);
const chart = new Chart(ctx, {
type: 'line',
data: {
datasets: [
{
type: 'line',
label: 'Dataset 1',
data: data,
borderColor: chartLineColor,
backgroundColor: chartLineColor,
borderWidth: 1,
fill: false,
pointStyle: 'circle',
hoverRadius: 5,
},
],
},
options: {
animation: false,
responsive: true,
maintainAspectRatio: false,
elements: {
point:{
radius: 0
},
},
plugins: {
tooltip: {
mode: 'index',
intersect: false,
enabled: true,
},
zoom: { //plugin
zoom: {
wheel: {
enabled: true,
},
pinch: {
enabled: true
},
mode: 'x',
limits: {
x: {min: 0, max: 100},
},
onZoomStart: ({ chart, event, point }) => {
document.getElementById('button_reset_mainchart_zoom').style = "display: block;";
},
},
},
},
interaction: {
mode: 'index',
intersect: false,
},
scales: {
x: {
type: 'linear',
title: {
display: true,
text: 'X Axis',
},
offset: false,
//offset: true,
},
y: {
title: {
display: true,
text: 'Y Axis',
},
},
},
},
});
function chartLineColor (firstvalue, lastvalue) {
firstvalue = data[0].y;
lastvalue = data[data.length - 1].y;
if (firstvalue < lastvalue) {
return 'red';
} else if (firstvalue > lastvalue) {
return 'green';
} else {
return 'grey';
}
}
</script>
<script>
resetZoomBtn = (chart) => {
chart.resetZoom()
};
</script>
<button id="button_reset_mainchart_zoom" type="button" class="btn btn-secondary" onclick="resetZoomBtn(chart); this.style = 'display: none;';">Reset Zoom</button>
</body>
</html>
Working sample:
https://jsfiddle.net/p1ocb8wf/2/
to get the difference between two points by clicking on an area of the graph with the mouse and dragging the mouse to the desired point of the canvas?
Look at the image to understand the result I would like to achieve:
