Chart.js #XXXX

by Akihiko Kusanagi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<canvas id="chart1" width=256 height=256 style="float: left"></canvas>
<canvas id="chart2" width=256 height=256 style="float: left"></canvas>
<canvas id="chart3" width=256 height=256 style="float: left"></canvas>
<canvas id="chart4" width=256 height=256 style="float: left"></canvas>

JavaScript

new Chart(document.getElementById('chart1'), {
  type: 'line',
  options: {
    responsive: false,
    legend: {
      display: false
    },
    title: {
      display: true,
      text: 'yAxes[0].ticks.maxTicksLimit: 7'
    },
    scales: {
      yAxes: [{
        ticks: {
          maxTicksLimit: 7,
          beginAtZero: true
        }
      }]
    }
  }
});
new Chart(document.getElementById('chart2'), {
  type: 'line',
  options: {
    responsive: false,
    legend: {
      display: false
    },
    title: {
      display: true,
      text: 'yAxes[0].ticks.maxTicksLimit: 8'
    },
    scales: {
      yAxes: [{
        ticks: {
          maxTicksLimit: 8,
          beginAtZero: true
        }
      }]
    }
  }
});
new Chart(document.getElementById('chart3'), {
  type: 'line',
  data: {
    datasets: [{
      data: [0, 2.5]
    }]
  },
  options: {
    responsive: false,
    legend: {
      display: false
    },
    title: {
      display: true,
      text: 'yAxes[0].ticks.maxTicksLimit: 8'
    },
    scales: {
      yAxes: [{
        ticks: {
          maxTicksLimit: 8,
          beginAtZero: true
        }
      }]
    }
  }
});
new Chart(document.getElementById('chart4'), {
  type: 'line',
  data: {
    datasets: [{
      data: [0, 2.5]
    }]
  },
  options: {
    responsive: false,
    legend: {
      display: false
    },
    title: {
      display: true,
      text: 'yAxes[0].ticks.maxTicksLimit: 9'
    },
    scales: {
      yAxes: [{
        ticks: {
          maxTicksLimit: 9,
          beginAtZero: true
        }
      }]
    }
  }
});