chart js is not loading properly in angular app

Question

I am trying to add the Chartjs in my angular application. it's not loading the lowest value in the graph

my code

<canvas id="myChart" width="100" height="100" ng-if=""></canvas>

 var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    datasets: [{
      label: 'Applied',
      data: [10, 20, 30],
      backgroundColor: 'rgb(66, 158, 244)'
    }, {
        label: 'Separated',
        data: [20, 40, 15],
        backgroundColor: 'rgb(193, 27, 71)'
    }],
    labels: ['January', 'February', 'March']
  },

  // Configuration options go here
  options: {}
});

Can u create a demo example on plunkr.com and let me know – Shashank Vivek Apr 09 '19 at 11:04 — Shashank Vivek, Apr 09 '19 at 11:04

score 1 · Accepted Answer · answered Apr 09 '19 at 12:23

I think its because of the y-axis value got aligned with the data value (10 in this sample) and this made the bar invisible there. Can you try by specifying the y-axis ticks for the chart options as follows?

options: {
    scales: {
        yAxes: [{
            ticks: {
                min: 0,
                stepSize: 5,
            }
        }]
    }
}

chart js is not loading properly in angular app

1 Answers1