CODEWITHSUNDEEP
javascriptchart.js
Anne
Anne

Reputation: 273

How can I specify "per dataset" parsing with Chart.js?

I'm trying to figure out how to use the yAxisKey option in ChartJS when specifying a dataset, but I'm running into trouble reproducing this example from the docs. I've tried searching for issues involving yAxisKey (or xAxisKey), the parsing options, and general info on specifying datasets, but have unfortunately come up blank so far.

Example

<!doctype html>
<html>
<head>
    <title>Example Chart</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></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>

This produces an empty-looking chart for me.

Screenshot of empty chart results

Am I missing something obvious? Misunderstanding the syntax?

Thanks in advance!

Upvotes: 5

Views: 7920

Answers (3)

Sachin Dhakad
Sachin Dhakad

Reputation: 1

If you replace CDN existing code will work

Upvotes: -1

uminder
uminder

Reputation: 26150

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>

Upvotes: 3

uminder
uminder

Reputation: 26150

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/[email protected]"></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>

Upvotes: 8

Related Questions