Chartjs-Chart.js angular8 Y axis ticks

by

0👍

After changing the chart options, you need to invoke chart.update(). For more details, consult Updating Options from the Chart.js documentation.

Please run the following code sample and press the Update button to see how it works.

function updateYAxis() {
  chart.options.scales.yAxes[0].ticks.min = 20;
  chart.options.scales.yAxes[0].ticks.max = 100;
  chart.update();
}

const chart = new Chart(document.getElementById('myChart'), {
  type: 'bar',
  data: {
    labels: ['A', 'B', 'C'],
    datasets: [{
      label: 'My First Dataset',
      data: [30, 59, 80],
      fill: false,
      backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(255, 159, 64, 0.2)', 'rgba(255, 205, 86, 0.2)'],
      borderColor: ['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)'],
      borderWidth: 1
    }]
  },
  options: { 
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});
canvas {
  max-width: 300px;
}

button {
  background-color: #4CAF50;
  color: white;
  padding: 8px 14px;
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" width="10" height="5"></canvas>
<button onclick="updateYAxis()">Update</button>

Leave a comment