Chart.js #6328 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=300 height=150></canvas>
  getValueForPixel(<span id="chart1-pixel"></span>): <span id="chart1-value"></span>
</div>
<div>
  <canvas id="chart2" width=300 height=150></canvas>
  getValueForPixel(<span id="chart2-pixel"></span>): <span id="chart2-value"></span>
</div>
<div>
  <canvas id="chart3" width=300 height=150></canvas>
  getValueForPixel(<span id="chart3-pixel"></span>): <span id="chart3-value"></span>
</div>
<div>
  <canvas id="chart4" width=300 height=150></canvas>
  getValueForPixel(<span id="chart4-pixel"></span>): <span id="chart4-value"></span>
</div>

JavaScript

function createChart(id, options) {
  new Chart(document.getElementById(id), {
    type: 'line',
    data: {
      labels: ['2015-01-01', '2015-01-25', '2015-02-01'],
      datasets: [{
        data: [0, 1, 2]
      }]
    },
    options: {
      responsive: false,
      legend: {
        display: false
      },
      title: {
        display: true,
        text: 'reverse: ' + options.reverse + ', offset: ' + options.offset
      },
      scales: {
        xAxes: [{
          type: 'time',
          offset: options.offset,
          ticks: {
            source: 'labels',
            reverse: options.reverse
          }
        }]
      },
      onHover: function(event) {
        var pixel = this._pixel = event.clientX - this.canvas.getBoundingClientRect().x
        var scale = this.scales['x-axis-0'];
        document.getElementById(id + '-pixel').innerHTML = pixel;
        document.getElementById(id + '-value').innerHTML = scale.getValueForPixel(pixel);
        this.update(0);
      }
    },
    plugins: [{
      afterDraw: function(chart) {
        var ctx = chart.ctx;
        ctx.strokeStyle = 'red';
        ctx.lineWidth = 1;
        ctx.beginPath();
        ctx.moveTo(chart._pixel, 0);
        ctx.lineTo(chart._pixel, chart.height);
        ctx.stroke();
      }
    }]
  });
}
createChart('chart1', {reverse: false, offset: false});
createChart('chart2', {reverse: false, offset: true});
createChart('chart3', {reverse: true, offset: false});
createChart('chart4', {reverse: true, offset: true});