I am making a website that needs to show charts. For that, I decided to use Chart JS.
The problem, is that when I try to load multiple charts on the same page, I am not able to do it.
For some reason, it’s only loading one chart, but the second one is not doing it.
I have check the variables name, and the id, and I don’t see where the fail could be at.
Thank you!
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<link rel="stylesheet" href="./assets/css/normalize.css">
<link rel="stylesheet" href="./assets/css/style.css">
</head>
<body>
<!-- CONTENIDO PRINCIPAL -->
<main id="main-content">
<div class="general-chart">
<span>X€</span><br>
<span style="font-size: 0.9em; font-weight: 400;">in Octobre</span>
<canvas id="myChart"></canvas>
</div>
<div class="income-chart">
<canvas id="myChart_second"></canvas>
</div>
</main>
<!-- CHART JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"
integrity="sha512-ElRFoEQdI5Ht6kZvyzXhYG9NqjtkmlkfYk0wr6wHxU9JEHakS7UJZNeml5ALk+8IKlU6jDgMabC3vkumRokgJA=="
crossorigin="anonymous"
referrerpolicy="no-referrer">
</script>
<!-- Scripts -->
<script src="./js/menu.js"></script>
<!-- GRAFICO SALDO -->
<script>
const ctx = document.getElementById("myChart").getContext("2d");
const labels = [
'2012',
'2013',
'2014',
'2015',
'2016',
'2017',
'2018',
'2019',
'2020',
];
//Gradient Fill
var gradient = ctx.createLinearGradient(0, 0, 0, 400);
gradient.addColorStop(0, 'rgba(105,53,211, 1');
gradient.addColorStop(1, 'rgba(105,53,211, 0.2');
const data = {
labels,
datasets: [
{
data: [211, 326, 165, 350, 420, 370, 500, 376, 415],
label: 'Titulo',
fill: true,
backgroundColor: gradient,
borderColor: '#6935D3',
pointBackgroundColor: '#4D1BB1',
},
],
};
const config = {
type: 'line',
data: data,
options: {
responsive: true,
plugins: {legend:{display: false}},
scales: {
x: {
grid: {
display: false,
drawBorder: false
}
},
y: {
grid: {
display: false,
drawBorder: false
},
ticks: {
display: false
},
}
},
},
};
const myChart = new Chart(ctx, config);
</script>
<!-- GRAFICO INGRESOS -->
<script>
const ctx2 = document.getElementById("myChart_second").getContext("2d");
const labels2 = [
'2012',
'2013',
'2014',
'2015',
'2016',
'2017',
'2018',
'2019',
'2020',
];
const data2 = {
labels2,
datasets: [
{
data: [211, 326, 165, 350, 420, 370, 500, 376, 415],
label: 'Title',
fill: true,
backgroundColor: gradient,
borderColor: '#6935D3',
pointBackgroundColor: '#4D1BB1',
},
],
};
const config2 = {
type: 'line',
data: data2,
options: {
responsive: true,
plugins: {legend:{display: false}},
scales: {
x: {
grid: {
display: false,
drawBorder: false
}
},
y: {
grid: {
display: false,
drawBorder: false
},
ticks: {
display: false
},
}
},
},
};
const myChart2 = new Chart(ctx2, config2);
</script>
</body>
</html>>Solution :
it is not displaying because it cannot find labels2, change below
const data2 = {
labels : labels2, //change here
datasets: [
{
data: [211, 326, 165, 350, 420, 370, 500, 376, 415],
label: 'Title',
fill: true,
backgroundColor: gradient,
borderColor: '#6935D3',
pointBackgroundColor: '#4D1BB1',
},
],
};