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
– Shashank Vivek

2019-04-09 11:04:20 +00:00
Commented Apr 9, 2019 at 11:04 — Shashank Vivek
– Shashank Vivek, Commented Apr 9, 2019 at 11:04

Master Po · Accepted Answer · 2019-04-09 12:23:05Z

1

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,
            }
        }]
    }
}

answered Apr 9, 2019 at 12:23

Master Po

1,7173 gold badges27 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

chart js is not loading properly in angular app

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related