Chart.js - Multiple bar Charts - Only Show Last Chart - django

Question

Chart.js - Multiple Bar Charts - Only Show Last Chart.Basically data comes from django and is rendered in the template.Data is proper but only one of 2 charts are being rendered.
I also tried changing ctx but it did not worked
HTML Code
<div class="container">
<div id="container" class="col-6">
<canvas id="indiacanvas"></canvas>
</div>
<div id="container" class="col-6">
<canvas id="usacanvas"></canvas>
</div>
</div>
Basically data comes from django and is rendered in the template.Data is proper but only one of 2 charts are being rendered.
I also tried changing ctx but it did not worked
Script.js
//BAR CHART USD
var barChartData = {
labels: [{% for item in listyear1 %}'{{item| date:"Y"}}', {% endfor %}],
datasets: [
{
label: "Total amount",
backgroundColor: "lightblue",
borderColor: "blue",
borderWidth: 1,
data: [{% for inr in USATOTAL %}'{{inr}}', {% endfor %}],
},
{
label: "Amount Recieved",
backgroundColor: "lightgreen",
borderColor: "green",
borderWidth: 1,
data: [{% for rinr in RUSDS %} '{{rinr}}', {% endfor %}],
},
{
label: "Amount Left",
backgroundColor: "pink",
borderColor: "red",
borderWidth: 1,
data: [{% for linr in LUSDS %} '{{linr}}', {% endfor %}],
},
],
};
var chartOptions = {
responsive: true,
legend: {
position: "top",
},
title: {
display: true,
text: "YearWise Summary USD",
},
scales: {
yAxes: [
{
ticks: {
beginAtZero: true,
},
},
],
},
};
window.onload = function () {
var ctx = document.getElementById("usacanvas").getContext("2d");
window.myBar = new Chart(ctx, {
type: "bar",
data: barChartData,
options: chartOptions,
});
};
// Bar Chart India
var barChartData = {
labels: [{% for item in listyear %}'{{item| date:"Y"}}', {% endfor %}],
datasets: [
{
label: "Total amount",
backgroundColor: "lightblue",
borderColor: "blue",
borderWidth: 1,
data: [{% for inr in INDIATOTAL %}'{{inr}}', {% endfor %}],
},
{
label: "Amount Recieved",
backgroundColor: "lightgreen",
borderColor: "green",
borderWidth: 1,
data: [{% for rinr in RINR %} '{{rinr}}', {% endfor %}],
},
{
label: "Amount Left",
backgroundColor: "pink",
borderColor: "red",
borderWidth: 1,
data: [{% for linr in LINR %} '{{linr}}', {% endfor %}],
},
],
};
var chartOptions = {
responsive: true,
legend: {
position: "top",
},
title: {
display: true,
text: "YearWise Summary INR",
},
scales: {
yAxes: [
{
ticks: {
beginAtZero: true,
},
},
],
},
};
window.onload = function () {
var ctx = document.getElementById("indiacanvas").getContext("2d");
window.myBar = new Chart(ctx, {
type: "bar",
data: barChartData,
options: chartOptions,
});
};

Answer 1

Due to JavaScripts async nature, ctx might get reassigned. Try using ctx2 as variable name for the second chart.