I'm using Flask and the library Chart JS to do graph visualization. However, I need to be able to use multiple y-axes (2 for the moment) and I can't figure out a way to make things work. I've already done it with data as lists but now that I am using dictionary-like data it seems to not fit anymore.
Here is my code:
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0/dist/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js" integrity="sha512-UXumZrZNiOwnTcZSHLOfcTs0aos2MzBWHXOHOuB0J/R44QB0dwY5JgfbvljXcklVf65Gc4El6RjZ+lnwd2az2g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/1.2.1/chartjs-plugin-zoom.min.js" integrity="sha512-klQv6lz2YR+MecyFYMFRuU2eAl8IPRo6zHnsc9n142TJuJHS8CG0ix4Oq9na9ceeg1u5EkBfZsFcV3U7J51iew==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.0.0/chartjs-plugin-datalabels.min.js" integrity="sha512-R/QOHLpV1Ggq22vfDAWYOaMd5RopHrJNMxi8/lJu8Oihwi4Ho4BRFeiMiCefn9rasajKjnx9/fTQ/xkWnkDACg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@2.0.0/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<div class="chart-container">
<canvas id="myChart_0">
<p> Fallback of a Graph </p>
</canvas>
</div>
<script>
const dataset_0 = [{
data: [{x:new Date('2022-10-21T00:00:00'),y:1.0},{x:new Date('2022-12-16T00:00:00'),y:2.0},{x:new Date('2023-01-20T00:00:00'),y:2.0}],
barThickness: 3.0 ,
backgroundColor: "blue" ,
pointRadius: 0.0 ,
type: "line" ,
yAxisID:'y',
borderColor: "blue" ,
label: "Graphs" ,
borderWidth: 0.0 ,
datalabels: {color: '#FFCE56'},
},
{
data: [{x:new Date('2022-10-21T00:00:00'),z:17.6},{x:new Date('2022-12-16T00:00:00'),z:16.9},{x:new Date('2023-01-20T00:00:00'),z:15.8}],
barThickness: 0.0 ,
backgroundColor: "red" ,
pointRadius: 0.0 ,
type: "bar" ,
borderColor: "red" ,
yAxisID:'z',
label: "Graph" ,
borderWidth: 1.0 ,
},
];
const data_0 = {
datasets : dataset_0
};
const config_0 = {
data: data_0,
options: {
animations:false,
responsive: true,
interaction: {
},
stacked: false,
plugins: {
title: {display: true, text: "None"},
legend: { labels: { filter: function(item, chart) { return item.text; }, boxHeight : 4, boxWidth: 20}, display: true },
},
scales: {
y: {
type: 'linear',
display: true,
position: 'left',
borderWidth : 0.001,
offset: true,
grid :{
display:true
},
},
z: {
type: 'linear',
display: true,
position: 'right',
borderWidth : 0.001,
offset: true,
grid :{
display:true
},
},
x1: {
type: "time",
display: true,
offset: true,
grid :{
display:false
},
},
},
},
};
const myChart_0 = new Chart(document.getElementById('myChart_0'), config_0);
</script>
I am hoping to get one graph with its scale on the right and the other on the left, so they can get their own scale because now the data is just on the same scale and it renders badly (with that current setup, I can't even see the line chart anymore).
I was wondering whether that difficulty was coming from the fact that the dictionary-like input makes you give both the labels and data at the same time or not.
If anyone knows how to deal with that issue, plz let me know!