Untitled

 avatar
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...