Untitled
unknown
javascript
4 years ago
2.7 kB
5
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...