Chart.js #5938 test03

by Akihiko Kusanagi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/nagix/nagix.github.io@chartjs/Chart.5938.js"></script>
<div style="overflow:hidden;">
<canvas id="chart1" width=150 height=400 style="float: left"></canvas>
<canvas id="chart2" width=150 height=400 style="float: left"></canvas>
<canvas id="chart3" width=150 height=400 style="float: left"></canvas>
<canvas id="chart4" width=150 height=400 style="float: left"></canvas>
<canvas id="chart5" width=150 height=400 style="float: left"></canvas>
<canvas id="chart6" width=150 height=400 style="float: left"></canvas>
</div>
<div style="overflow:hidden;">
<canvas id="chart7" width=270 height=270 style="float: left"></canvas>
</div>

JavaScript

var c = new Chart(document.getElementById('chart1'), {
  type: 'bar',
  data: {
    labels: [0, 1],
    datasets: [{
      data: [-0.3, 4.6]
    }]
  },
  options: {
    responsive: false,
    legend: {
      display: false
    },
    title: {
      display: true,
      text: 'a. maxTicksLimit: -'
    },
    scales: {
      xAxes: [{
        display: false
      }]
    }
  }
});
c.getDatasetMeta(0).data[1].custom = {backgroundColor: 'red'};


new Chart(document.getElementById('chart2'), {
  type: 'bar',
  data: {
    labels: [0, 1],
    datasets: [{
      data: [-0.5, 1.5]
    }]
  },
  options: {
    responsive: false,
    legend: {
      display: false
    },
    title: {
      display: true,
      text: 'b. maxTicksLimit: -'
    },
    scales: {
      xAxes: [{
        display: false
      }]
    }
  }
});
new Chart(document.getElementById('chart3'), {
  type: 'bar',
  data: {
    labels: [0, 1],
    datasets: [{
      data: [0.5, 2.5]
    }]
  },
  options: {
    responsive: false,
    legend: {
      display: false
    },
    title: {
      display: true,
      text: 'c. maxTicksLimit: 11'
    },
    scales: {
      xAxes: [{
        display: false
      }],
      yAxes: [{
        ticks: {
          maxTicksLimit: 11
        }
      }]
    }
  }
});
new Chart(document.getElementById('chart4'), {
  type: 'bar',
  data: {
    labels: [0, 1],
    datasets: [{
      data: [0.5, 2.5]
    }]
  },
  options: {
    responsive: false,
    legend: {
      display: false
    },
    title: {
      display: true,
      text: 'd. stepSize: 0.01, maxTicksLimit: 11'
    },
    scales: {
      xAxes: [{
        display: false
      }],
      yAxes: [{
        ticks: {
          stepSize: 0.01,
          maxTicksLimit: 11
        }
      }]
    }
  }
});
new Chart(document.getElementById('chart5'), {
  type: 'bar',
  data: {
    labels: [0, 1],
    datasets: [{
      data: [0, 2.5]
    }]
  },
  options: {
    responsive: false,
    legend: {
      display: false
    },
   ...