Chart.js #6326 test01

by Akihiko Kusanagi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://www.chartjs.org/dist/master/Chart.min.js"></script>
<div>
  <canvas id="chart1" width=165 height=150></canvas>
  <canvas id="chart2" width=165 height=150></canvas>
  <canvas id="chart3" width=165 height=150></canvas>
  <canvas id="chart4" width=165 height=150></canvas>
  <canvas id="chart5" width=165 height=150></canvas>
  <canvas id="chart6" width=165 height=150></canvas>
  <canvas id="chart7" width=165 height=150></canvas>
  <canvas id="chart8" width=165 height=150></canvas>
  <canvas id="chart9" width=330 height=150></canvas>
  <canvas id="chart10" width=330 height=150></canvas>
</div>

CSS

canvas {
  float: left;
  margin: 4px;
}

JavaScript

new Chart(document.getElementById('chart1'), {
  type: 'bar',
  data: {
    labels: ['A', 'B', 'C'],
    datasets: [{
      data: [1, 2, 3]
    }]
  },
  options: {
    responsive: false,
    legend: {
      display: false
    },
    title: {
      display: true,
      text: 'categoty scale, offset: false'
    },
    scales: {
      xAxes: [{
        type: 'category',
        offset: false,
        gridLines: {
          offsetGridLines: true
        }
      }],
      yAxes: [{
        ticks: {
          min: 0,
          max: 5
        }
      }]
    }
  }
});
new Chart(document.getElementById('chart2'), {
  type: 'bar',
  data: {
    labels: ['A', 'B', 'C'],
    datasets: [{
      data: [1, 2, 3]
    }]
  },
  options: {
    responsive: false,
    legend: {
      display: false
    },
    title: {
      display: true,
      text: 'categoty scale, offset: true'
    },
    scales: {
      xAxes: [{
        type: 'category',
        offset: true,
        gridLines: {
          offsetGridLines: true
        }
      }],
      yAxes: [{
        ticks: {
          min: 0,
          max: 5
        }
      }]
    }
  }
});
new Chart(document.getElementById('chart3'), {
  type: 'bar',
  data: {
    labels: ['A'],
    datasets: [{
      data: [1]
    }]
  },
  options: {
    responsive: false,
    legend: {
      display: false
    },
    title: {
      display: true,
      text: 'categoty scale, offset: false'
    },
    scales: {
      xAxes: [{
        type: 'category',
        offset: false,
        gridLines: {
          offsetGridLines: true
        }
      }],
      yAxes: [{
        ticks: {
          min: 0,
          max: 5
        }
      }]
    }
  }
});
new Chart(document.getElementById('chart4'), {
  type: 'bar',
  data: {
    labels: ['A'],
    datasets: [{
      data: [1],
      fill: false
    }]
  },
  options: {
    responsive: false,
    legend: {
      display: false
    },
    title: {
      display: true,
      text: 'categoty scale, offset: true'
 ...