Chartjs-Min value of chart (Chart.js)

by

0👍

✅

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
<canvas id="NbTicketsChart" width="50" height="50"></canvas>
<script>
  var NbCanvas = document.getElementById("NbTicketsChart");

  Chart.defaults.global.defaultFontFamily = "Lato";
  Chart.defaults.global.defaultFontSize = 18;

  var densityData = {
      label: 'Nombre de tickets sur la semaine',
      data: [20, 25, 30, 25, 30, 35, 40],
      backgroundColor: '#336ca6'

  };
  var barChart = new Chart(NbCanvas.getContext('2d'), {
    type: 'bar',
    data: {
    labels: ["J-1", "J-2", "J-3", "J-4", "J-5", "J-6", "J-7"],
    datasets: [densityData]
  }});

  barChart.options.scales.yAxes[0] = {ticks: {min: 0, max: 100, stepValue: 20}}
</script>

That was the good solution but doesn’t work with char.js 2.8 I use 2.7

1👍

This just frustrated me a fair bit. According to the documentation it seems your method should be working. I can only make it work by setting the scale after creating the chart, like below:

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
<canvas id="NbTicketsChart" width="50" height="50"></canvas>
<script>
  var NbCanvas = document.getElementById("NbTicketsChart");

  Chart.defaults.global.defaultFontFamily = "Lato";
  Chart.defaults.global.defaultFontSize = 18;

  var densityData = {
      label: 'Nombre de tickets sur la semaine',
      data: [20, 25, 30, 25, 30, 35, 40],
      backgroundColor: '#336ca6'

  };
  var barChart = new Chart(NbCanvas.getContext('2d'), {
    type: 'bar',
    data: {
    labels: ["J-1", "J-2", "J-3", "J-4", "J-5", "J-6", "J-7"],
    datasets: [densityData]
  }});

  barChart.options.scales.yAxes[0] = {ticks: {min: 0, max: 100, stepValue: 20}}
</script>

In posting this i’ve also noticed it doesn’t work when the canvas size is 400 by 400. 50 by 50 seems to work…

Leave a comment