CODEWITHSUNDEEP
chart.js
Abishot2017
Abishot2017

Reputation: 89

Chartjs bar dataset label not showing

Trying to compare this year vs last year on bar chart and labels for dataset "this year" & "previous year" are not showing. This thing is specially handy when comparing multiple datasets side by side so any help is greatly appreciated. By the way my chartjs version is 2.1.4

  var chartdata = {
    type: 'bar',
    data: {
      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
      // labels: month,
      datasets: [
        {
          label: 'this year',
          backgroundColor: '#26B99A',
          data: sold1
        },
        {
          label: 'previous year',
          backgroundColor: '#03586A',
          data: sold2
        }
      ]
    }
  };

Upvotes: 6

Views: 18058

Answers (3)

Tuychiev Toir
Tuychiev Toir

Reputation: 370

this is working for me. Try youself

var chartdata = {
        type: 'bar',
        data: {
            labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
            datasets: [
                {
                    label: 'this year',
                    backgroundColor: '#26B99A',
                    data: sold1
                },
                {
                    label: 'previous year',
                    backgroundColor: '#03586A',
                    data: sold2
                }
            ]
        },
        "options": {
            "legend": {"position": "bottom"},
            "scales": {
                "xAxes": [
                    {
                        "beginAtZero": true,
                        "ticks": {
                            "autoSkip": false
                        }
                    }
                ]
            }
        }
    };

Upvotes: 1

Abhay Kumar
Abhay Kumar

Reputation: 5383

Set autoSkip for xAxis to false :

scales: {
  xAxes: [{
      beginAtZero: true,
      ticks: {
         autoSkip: false
      }
  }]
}

Upvotes: 13

Alex Baban
Alex Baban

Reputation: 11692

Check your sold1 and sold2.

console.log(sold1);
console.log(sold2);

For example this is working:

var chartdata = {
    {
        type: 'bar',
        data: {
          labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
          // labels: month,
          datasets: [
            {
              label: 'this year',
              backgroundColor: '#26B99A',
              data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
            },
            {
              label: 'previous year',
              backgroundColor: '#03586A',
              data: [2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]
            }
          ]
        }
    }
};



var ctx = document.getElementById('chartContainer').getContext('2d');
new Chart(ctx, chartdata);

JSFiddle https://jsfiddle.net/1davgzmh/1/

Upvotes: 1

Related Questions