How to work with multiple chart.js charts?

@mac 

To work with multiple chart.js charts, you can follow these steps:

1. Create a canvas element for each chart you want to display in your HTML file. For example, you can create two canvas elements with unique IDs:

1
2

<canvas id="chart1"></canvas>
<canvas id="chart2"></canvas>

1. Create a separate JavaScript file for each chart, where you can define the data, options, and configuration for the chart. For example, you can create two JavaScript files named chart1.js and chart2.js.
2. In each JavaScript file, initialize a new Chart object with the canvas element ID and pass in the data, options, and configuration for the chart. For example, in chart1.js:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

var ctx = document.getElementById('chart1').getContext('2d');
var chart1 = new Chart(ctx, {
    type: 'bar',
    data: {
        // data for chart 1
    },
    options: {
        // options for chart 1
    }
});

1. Repeat the same process for chart2.js, replacing the canvas element ID and data/options with the appropriate values for the second chart.
2. In your main HTML file, include the chart.js library and import both JavaScript files that contain the chart configurations. For example:

1
2
3

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="chart1.js"></script>
<script src="chart2.js"></script>

1. You should now see both charts displayed on your webpage, each with its own data and configuration settings.

By following these steps, you can easily work with multiple chart.js charts on the same page and customize them according to your needs.