Chartjs-Multiple chartjs charts with the same configuration but different data

by

0👍

✅

The problem was in the datalabels formatter where the _meta index is not always 0. If you use multiple charts second chart index is 1 and third chart index is 2 etc.
I added this line of code to get current metaIndex using Object.keys()

let metaIndex = Object.keys(ctx.dataset._meta)[0]
let sum = ctx.dataset._meta[metaIndex].total;

Here is the working code:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>
    <script src="./js/script.js"></script>
</head>

<body>
    <div style="width: 100%; display: table;">
        <div style="display: table-row; height: 300px;">
            <div style="width:25%; display: table-cell;">
                <canvas id="canvas"></canvas>
            </div>
            <div style="width:25%; display: table-cell;">
                <canvas id="canvas1"></canvas>
            </div>
            <div style="width:25%; display: table-cell;">
                <canvas id="canvas2"></canvas>
            </div>
            <div style="width:25%; display: table-cell;">
                <canvas id="canvas3"></canvas>
            </div>
        </div>
    </div>
    <script>

      function chartconfig(data, label, labels) {
          Chart.defaults.global.defaultFontFamily = 'Lato';
          Chart.defaults.global.defaultFontSize = 12;
          config = {
              type: 'doughnut',
              data: {
                  datasets: [{
                      data,
                      backgroundColor: ['rgb(0, 140, 75)', 'rgb(94, 140, 0)'],
                      label,
                      labels,
                      hoverBorderWidth: 3,
                      fill: false,
                  },],
              },
              options: {
                  plugins: {
                      datalabels: {
                          color: '#000',
                          align: 'start',
                          anchor: 'end',
                          display: 'auto',
                          formatter: (value, ctx) => {
                              let chartIndex = Object.keys(ctx.dataset._meta)[0]
                              let sum = ctx.dataset._meta[chartIndex].total;
                              let percentage = (value * 100 / sum).toFixed(2) + "%";
                              let text = value + '\n' + percentage;
                              return text;
                          },
                      }
                  },
                  rotation: -0.8 * Math.PI,
                  legend: {
                      position: 'bottom',
                      labels: {
                          fontColor: '#000',
                          generateLabels: () => {
                              let labels = [];
                              config.data.datasets.forEach((ds, iDs) => labels = labels.concat(ds.labels.map((l, iLabel) => ({
                                  datasetIndex: iDs,
                                  labelIndex: iLabel,
                                  text: l,
                                  fillStyle: ds.backgroundColor[iLabel],
                                  hidden: chart ? chart.getDatasetMeta(iDs).data[iLabel].hidden : false,
                                  strokeStyle: '#fff'
                              }))));
                              return labels;
                          }
                      },
                      onClick: (event, legendItem) => {
                          let metaData = chart.getDatasetMeta(legendItem.datasetIndex).data;
                          metaData[legendItem.labelIndex].hidden = !metaData[legendItem.labelIndex].hidden;
                          chart.update();
                      }
                  },
                  tooltips: {
                      callbacks: {
                          label: (tooltipItem, data) => {
                              let dataset = data.datasets[tooltipItem.datasetIndex];
                              let index = tooltipItem.index;
                              return dataset.labels[index] + ": " + dataset.data[index];
                          }
                      }
                  }
              }
          };
          return config;
      }
  
      function addData(data, backgroundColor, labels) {
          chart.data.datasets.push({
              data,
              backgroundColor,
              labels,
              fill: false,
          });
          chart.update();
      }
  
      var data = [160, 150,];
      var label = ['Februar'];
      var labels = ['21.02.2020', '22.02.2020'];
      
      var config = chartconfig(data, label, labels);
      var ctx1 = document.getElementById("canvas").getContext("2d");
      var chart = new Chart(ctx1, config); // worked fine and appears
  
      var data = [120, 230,];
      var label = ['März'];
      var labels = ['21.03.2020', '22.03.2020'];
  
      var config = chartconfig(data, label, labels);
      var ctx2 = document.getElementById("canvas1").getContext("2d");
      var chart = new Chart(ctx2, config); //didnt appear
  
  </script>
  </body>
  </html>

Leave a comment