problem with multiple datasets in chart.js

Question

I'm trying to use chart.js to create a bar chart that shows the number of ad impressions in an ad buy by publication. The desired chart would show a bar for each publication representing the number of impressions for the ad on that website.

I thought that this needs to happen as multiple datasets, one for each publication, where each dataset contains one data point. Here's the code I'm using for this approach:

var chartData_webbanner_300x600 = {
    labels: ["Publication 1", "Publication 2"],
    datasets: [
        {
            label: "Publication 1",
            backgroundColor: "#971317",
            data: [30000]
        },
        {
            label: "Publication 2",
            backgroundColor: "#0b72ba",
            data: [40000]
        },
    ]
};

window.onload = function() {

        var ctx_webbanner_300x600 = document.getElementById('chart_webbanner_300x600').getContext('2d');
    window.myBar = new Chart(ctx_webbanner_300x600, {
        type: 'bar',
        data: chartData_webbanner_300x600,
        options: {
            title: {
                display: true,
                text: 'Web Banner Impressions'
            },
            responsive: true,
        }
    });


}; //window.onload = function()

The resulting chart only shows one bar. Here's a screenshot:

I also tried this as a single dataset, but had no luck there. This is the approach I tried with that:

var chartData_webbanner_300x600 = {
    labels: ["Total Impressions"],
    datasets: [
        {
            label: ["Publication 1", "Publication 2"],
            backgroundColor: ["#971317","#0b72ba"],
            data: [30000,40000]
        }
    ]
};

window.onload = function() {

        var ctx_webbanner_300x600 = document.getElementById('chart_webbanner_300x600').getContext('2d');
    window.myBar = new Chart(ctx_webbanner_300x600, {
        type: 'bar',
        data: chartData_webbanner_300x600,
        options: {
            title: {
                display: true,
                text: 'Web Banner Impressions'
            },
            responsive: true,
        }
    });


}; //window.onload = function()

Here's how that is displaying (with no bars):

Please let me know if you have any ideas on what I'm doing wrong. Thank you for taking the time to help!

score 1 · Answer 1 · answered Feb 28 '19 at 18:04

I was able to get it working with this code:

var graphData = {
    labels: ['Publication 1', 'Publication 2'],
    datasets: [{
      label: 'Impressions',
      data: [30000, 40000],
      backgroundColor: [
        "#971317",
        "#0b72ba"
      ],
    }, ]
  };

var ctx_webbanner_300x600 = document.getElementById('chart_webbanner_300x600').getContext('2d');

var chr = new Chart(ctx_webbanner_300x600, {
    data: graphData,
    type: 'bar',
    options: {
        scales: {
                yAxes: [{
                    display: true,
                    ticks: {
                        beginAtZero: true   // minimum value will be 0.
                    }
                }]
            }
                }
  });

This is based on what I found here Setting specific color per label in chart.js and here How to set max and min value for Y axis - which overcame a problem where the scale was starting at the lowest value in my data set.

problem with multiple datasets in chart.js

1 Answers1