Use chart.js create two pie-charts only can display

Question

I use chart.js create two pie chartys on the same page, but one of them can't display the graphics. Modifying the javascript still does not display it. I don't know what happened.

    <div>
      <div style="width: 300px;">
        <canvas id="piechart1"></canvas>
      </div>
    </div>
    <script>
      // setup 
      const data1 = {
        labels: ['connect', 'disconnect'],
        datasets: [{
          label: 'Weekly Sales',
          data: [40,60],
          backgroundColor: [
            'rgba(255, 26, 104, 0.2)',
            'rgba(54, 162, 235, 0.2)'
 
          ],
          borderColor: [
            'rgba(255, 26, 104, 1)',
            'rgba(54, 162, 235, 1)'
          ],
          borderWidth: 1
        }]
      };
  
      // config 
      const config1 = {
        type: 'pie',
        data1,
        options: {
          plugins:{
              labels:{
                  render: 'percentage',
                  // position:'outside'
              },
              title: {
                            display: true,
                            text: 'Electromechanical',
                            padding: {
                                top: 10,
                            },
                            font: {
                            size: 18
                        }
                        }
          }
        },
      };
  
      // render init block
      const piechart1 = new Chart(
        document.getElementById('piechart1'),
        config1
      );
    </script>

    <div>
      <div style="width: 300px;">
        <canvas id="myChart"></canvas>
      </div>
    </div>
    <script>
      // setup 
      const data = {
        labels: ['connect', 'disconnect'],
        datasets: [{
          label: 'Weekly Sales',
          data: [98,2],
          backgroundColor: [
            'rgba(255, 26, 104, 0.2)',
            'rgba(54, 162, 235, 0.2)'

          ],
          borderColor: [
            'rgba(255, 26, 104, 1)',
            'rgba(54, 162, 235, 1)'
          ],
          borderWidth: 1
        }]
      };

      // config 
      const config = {
        type: 'pie',
        data,
        options: {
          plugins:{
              labels:{
                  render: 'percentage',
                  // position:'outside'
              },
              title: {
                            display: true,
                            text: 'Traffic',
                            padding: {
                                top: 10,
                            },
                            font: {
                            size: 18
                        }
                        }
          }
        },
      };

      // render init block
      const myChart = new Chart(
        document.getElementById('myChart'),
        config
      );
    </script>

At first, it was thought that the parameters could not be displayed because of repeated parameters. After modification, only the title is displayed, and the graph still cannot be displayed.。

Answer 1

The issue is how you are configuring the first chart.

When you are setting "data" config, you are setting using the name of the variable which is "data1" and not "data" as CHART.js requires.

  // config 
  const config1 = {
    type: 'pie',
    data1,  // <-- WRONG!!!
    options: {

Use the following:

  // config 
  const config1 = {
    type: 'pie',
    data: data1,  // <-- CORRECT!!!
    options: {