[Chartjs]-How can I specify "per dataset" parsing with Chart.js?

by

8👍

✅

Since the per-dataset parsing option is not yet available in the Chart.js version 2.8.0 you’re currently using, you may still obtain the same result through the Array.map() function.

Please take a look at your amended code and see how it works.

<!doctype html>
<html>

<head>
  <title>Example Chart</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
</head>

<body>
  <canvas id="canvas"></canvas>
  <script>
    const data = [
      { x: 'Jan', net: 100, cogs: 50, gm: 50 }, 
      { x: 'Feb', net: 120, cogs: 55, gm: 75 }
    ];
    const config = {
      type: 'bar',
      data: {
        labels: data.map(o => o.x),
        datasets: [{
          label: 'Net sales',
          data: data.map(o => o.net)
        }, {
          label: 'Cost of goods sold',
          data: data.map(o => o.cogs)
        }, {
          label: 'Gross margin',
          data: data.map(o => o.gm)
        }]
      },
      options: {
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: true
            }
          }]
        }
      }
    };

    window.onload = function() {
      const ctx = document.getElementById('canvas').getContext('2d');
      let chart = new Chart(ctx, config);
    };
  </script>
</body>

</html>

3👍

Apparently this per-dataset parsing option is available in upcoming Chart.js version 3.0.0 only. The current stable release however is 2.9.3.

Please take a look at your code below and see how it works with Chart.js 3.0.0 alpha-2.

<!doctype html>
<html>
<head>
    <title>Example Chart</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.0-alpha.2/chart.min.js"></script>
</head>

<body>
    <canvas id="canvas"></canvas>
    <script>
        const data = [{x: 'Jan', net: 100, cogs: 50, gm: 50}, {x: 'Feb', net: 120, cogs: 55, gm: 75}];
        const config = {
                type: 'bar',
                data: {
                    labels: ['Jan', 'Feb'],
                    datasets: [{
                        label: 'Net sales',
                        data: data,
                        parsing: {
                            yAxisKey: 'net'
                        }
                    }, {
                        label: 'Cost of goods sold',
                        data: data,
                        parsing: {
                            yAxisKey: 'cogs'
                        }
                    }, {
                        label: 'Gross margin',
                        data: data,
                        parsing: {
                            yAxisKey: 'gm'
                        }
                    }]
                },
            };

        window.onload = function() {
            const ctx = document.getElementById('canvas').getContext('2d');
            let chart  = new Chart(ctx, config);
        };
    </script>
</body>
</html>

-1👍

If you replace CDN existing code will work

Leave a comment