Untitled
unknown
javascript
4 years ago
2.7 kB
6
Indexable
<div>
<canvas id="myChart" width="400" height="400"></canvas>
</div>
<script>
const config = {
type: 'bar',
options: {
plugins: {
title: {
display: true,
text: 'Chart.js Bar Chart - Stacked'
},
},
responsive: true,
interaction: {
intersect: false,
},
scales: {
x: {
stacked: true,
},
y: {
stacked: true
}
}
}
};
Age: [50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80],
Conservative: [0.00, 3.00, 6.00, 9.00, 12.00, 15.00, 18.00, 21.00, 24.00, 27.00, 30.00, 34.00, 38.00, 42.00, 46.00, 50.00, 54.00, 58.00, 62.00, 66.00, 70.00, 73.00, 76.00, 79.00, 82.00, 85.00, 88.00, 91.00, 94.00, 95.00, 95.00],
Climate: [50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80],
Growth: [50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80],
const data = {
labels: Age,
datasets: [
{
label: 'Conservative',
data: Conservative,
backgroundColor: "rgba(0,0,0,1.0)",
stack: 'Stack 0',
},
{
label: 'Climate',
data: Climate,
backgroundColor: "rgba(0,0,0,1.0)",
stack: 'Stack 1',
},
{
label: 'Growth',
data: Growth,
backgroundColor: "rgba(0,0,0,1.0)",
stack: 'Stack 2',
},
]
};
var myChart = new Chart(
document.getElementById('myChart'),
config
);
</script>
Editor is loading...