Chart.js #5961 test01

by Akihiko Kusanagi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.23.0/moment.min.js"></script>
<script src="https://www.chartjs.org/dist/master/Chart.min.js"></script>
<canvas id="chart1" width=512 height=160></canvas>
<canvas id="chart2" width=512 height=160></canvas>
<canvas id="chart3" width=512 height=160></canvas>
<canvas id="chart4" width=420 height=160 style="float: left"></canvas>

JavaScript

var chart1 = new Chart(document.getElementById('chart1'), {
  type: 'line',
  data: {
    datasets: [{
      data: [0, 1]
    }],
    labels: ['2015-01-01T20:00:00', '2015-01-01T20:01:00']
  },
  options: {
    responsive: false,
    legend: {
      display: false
    },
    title: {
      display: true,
      text: 'ticks.fontColor: \'red\', ticks.fontSize: 12'
    },
    scales: {
      xAxes: [{
        type: 'time',
        ticks: {
          autoSkip: false,
          fontColor: 'red',
          fontSize: 12
        }
      }]
    }
  }
});
var fontColor = 'red';
var fontSize = 12;
setInterval(function() {
  chart1.options.scales.xAxes[0].ticks.fontColor = fontColor = fontColor === 'red' ? 'blue' : 'red';
  chart1.options.scales.xAxes[0].ticks.fontSize = fontSize = fontSize === 12 ? 16 : 12;
  chart1.options.title.text = 'ticks.fontColor: \'' + fontColor + '\', ticks.fontSize: ' + fontSize;
  chart1.update(0);
}, 1000);
new Chart(document.getElementById('chart2'), {
  type: 'line',
  data: {
    datasets: [{
      data: [0, 1]
    }],
    labels: ['2015-01-01T20:00:00', '2015-01-01T20:01:00']
  },
  options: {
    responsive: false,
    legend: {
      display: false
    },
    title: {
      display: true,
      text: 'ticks.major.enabled: false'
    },
    scales: {
      xAxes: [{
        type: 'time',
        ticks: {
          autoSkip: false,
          major: {
            enabled: false,
            fontColor: 'green',
            fontSize: 24,
            callback: function(value) {
              return [value, '[major]'];
            }
          },
          minor: {
            fontColor: 'blue',
            fontSize: 12,
            callback: function(value) {
              return [value, '[minor]'];
            }
          }
        }
      }]
    }
  }
});
new Chart(document.getElementById('chart3'), {
  type: 'line',
  data: {
    datasets: [{
      data: [0, 1]
    }],
    labels: ['2015-01-01T20:00:00', '2015-01-01T20:01:00']
  },
  options:...