How can I draw this chart with chart.js or google chart or any javascript framework.
I want to plot exactely like this :
enter image description here
I need to draw the line with the same X point,
But I can’t find any option can rotate the green line to vertical.
<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<body>
<canvas id="myChart" style="width:100%;max-width:400px"></canvas>
<script>
var xValues = [0, 1, 2, 3, 4];
new Chart("myChart", {
type: "line",
data: {
labels: xValues,
datasets: [
{
data: [0, 0.8, 3.2, 4.8, 5],
borderColor: "red",
fill: false,
pointRadius: 1,
}, {
data: [5, 4.8, 3.2, 0.8, 0],
borderColor: "blue",
fill: false,
pointRadius: 1,
},{
data: [4,4],
borderColor: "green",
fill: false,
pointRadius: 5,
}]
},
options: {
legend: {display: false},
scales: {
y: {
beginAtZero: true
},
x: {
beginAtZero: true
},
xAxes: [{
ticks: {
display: false
}
}],
yAxes: [{
ticks: {
display: false
}
}]
}
}
});
</script>