I have three Chart.js charts that I want to display. When I try to start the second one, it does not load, even though I put the right ID and the JS from the Chart.js docs. When I tried to change the name of the id it did not work either. I also removed the chart-parent div from the second one, but that also did not work.
It seems like only the third chart is loading. Is there a solution?
/* Race/Ethnicity vs Age */
const data = {
//labels: ['Younger Than 18', '18-30', '31-45', 'Older than 45', 'Unknown'],
datasets: [{
label: 'Races/Ethnicities Killed',
data: [
20, 30, 30, 40, 50
],
backgroundColor: 'rgba(255, 26, 104, 0.2)',
borderColor: 'rgba(255, 26, 104, 1)',
tension: 0.4,
yAxisID: 'y'
},
{
label: 'Ages Killed',
data: [
10, 20, 30, 40, 50
],
backgroundColor: 'rgba(0, 26, 104, 0.2)',
borderColor: 'rgba(0, 26, 104, 1)',
tension: 0.4,
}]
};
// config
const config = {
type: 'line',
data,
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true,
type: 'linear',
position: 'left'
},
x1: {
labels: ['White (Non-Hispanic)', 'Black (Non-Hispanic)', 'Hispanic (Black Or White)', 'Asian', 'Unknown'],
},
x2: {
position: 'top',
labels: ['Younger than 18', '18-30', '31-45', 'Older than 45', 'Unknown'],
},
}
}
};
// render init block
const myChart = new Chart(
document.getElementById('chart'),
config
);
// Instantly assign Chart.js version
const chartVersion = document.getElementById('chartVersion');
chartVersion.innerText = Chart.version;
/* Race */
const ctx = document.getElementById('myChart');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div class="content">
<div class="box age">
<div class="chart-parent">
<canvas id="chartAge"></canvas>
</div>
</div>
<div class="box ethnicity">
<canvas id="myChart"></canvas>
</div>
<div class="box both">
<div class="chart-parent">
<canvas id="chart"></canvas>
</div>
<div class="description">
<h1>Race/Ethnicity vs. Age</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Exercitationem placeat unde illum doloremque cumque beatae
veritatis nulla, culpa autem sed.</p>
</div>
</div>
</div>
2
Answers
I am not sure this is what you want to happen but you miss 1 id on it. Let me know
a null value arrives at this line
I have commented out the line and it works.
Corrected example
https://jsfiddle.net/SeiryuV/o7dnczuv/3/