Chartjs-How to put a second pie chart right next to first pie chart inside the bootstrap card

by

2👍

✅

assuming you are trying to show the same chart twice. We can separate out the chart codes into a standalone function.

$(document).ready(function() {
   renderChart($("#chart-line"));
   renderChart($("#chart-line2"));
})

function renderChart(ctx) {
    var myLineChart = new Chart(ctx, {
        type: 'pie',
        data: {
            labels: ["Spring", "Summer", "Fall", "Winter"],
            datasets: [{
                data: [1200, 1700, 800, 200],
                backgroundColor: ["rgba(255, 0, 0, 0.5)", "rgba(100, 255, 0, 0.5)", "rgba(200, 50, 255, 0.5)", "rgba(0, 100, 255, 0.5)"]
            }]
        },
        options: {
            title: {
                display: true,
                text: 'Weather'
            }
        }
    });
};

Then in your html, add an additional canvas below with different id.

<canvas id="chart-line" width="399" height="400" class="chartjs-render-monitor" style="display: block; width: 400px; height: 500px;"></canvas>
<canvas id="chart-line2" width="399" height="400" class="chartjs-render-monitor" style="display: block; width: 400px; height: 500px;"></canvas>

Leave a comment