Chart.js #5933 test01

by Akihiko Kusanagi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://www.chartjs.org/dist/master/Chart.min.js"></script>
<div style="overflow:hidden;">
<canvas id="chart1" width=480 height=200 style="float: left"></canvas>
<canvas id="chart2" width=480 height=200 style="float: left"></canvas>
</div>
<div style="overflow:hidden;">
<canvas id="chart3" width=480 height=200 style="float: left"></canvas>
<canvas id="chart4" width=480 height=200 style="float: left"></canvas>
</div>
<div style="overflow:hidden;">
<canvas id="chart5" width=480 height=200 style="float: left"></canvas>
<canvas id="chart6" width=480 height=200 style="float: left"></canvas>
</div>
<div style="overflow:hidden;">
<canvas id="chart7" width=480 height=200 style="float: left"></canvas>
<canvas id="chart8" width=480 height=200 style="float: left"></canvas>
</div>
<div style="overflow:hidden;">
<canvas id="chart9" width=480 height=400 style="float: left"></canvas>
</div>

JavaScript

new Chart(document.getElementById('chart1'), {
  type: 'bar',
  data: {
    datasets: [{
      data: [
        {x: '2019-01-01', y: 1},
        {x: '2019-01-02', y: 2},
        {x: '2019-01-04', y: 4}
      ]
    }]
  },
  options: {
    responsive: false,
    legend: {
      display: false
    },
    title: {
      display: true,
      text: 'barThickness: undefined, offset: false, tick.source: \'data\', ticks.reverse: false'
    },
    scales: {
      xAxes: [{
        type: 'time',
        ticks: {
          source: 'data'
        }
      }],
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});
new Chart(document.getElementById('chart2'), {
  type: 'bar',
  data: {
    datasets: [{
      data: [
        {x: '2019-01-01', y: 1},
        {x: '2019-01-02', y: 2},
        {x: '2019-01-04', y: 4}
      ]
    }]
  },
  options: {
    responsive: false,
    legend: {
      display: false
    },
    title: {
      display: true,
      text: 'barThickness: undefined, offset: false, tick.source: \'data\', ticks.reverse: true'
    },
    scales: {
      xAxes: [{
        type: 'time',
        ticks: {
          source: 'data',
          reverse: true
        }
      }],
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});
new Chart(document.getElementById('chart3'), {
  type: 'bar',
  data: {
    datasets: [{
      data: [
        {x: '2019-01-01', y: 1},
        {x: '2019-01-02', y: 2},
        {x: '2019-01-04', y: 4}
      ]
    }]
  },
  options: {
    responsive: false,
    legend: {
      display: false
    },
    title: {
      display: true,
      text: 'barThickness: undefined, offset: true, tick.source: \'data\', ticks.reverse: false'
    },
    scales: {
      xAxes: [{
        type: 'time',
        offset: true,
        ticks: {
          source: 'data'
        }
      }],
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});
new...