Time Scale

Zooming is performed by clicking and selecting an area over the chart with the mouse. Pan is activated by keeping ctrl pressed.

const zoomOptions = { pan: { enabled: true, modifierKey: 'ctrl', }, zoom: { drag: { enabled: true }, mode: 'xy', }, }; // </block> const panStatus = () => zoomOptions.pan.enabled ? 'enabled' : 'disabled'; const zoomStatus = () => zoomOptions.zoom.drag.enabled ? 'enabled' : 'disabled';

const zoomOptions = {
  pan: {
    enabled: true,
    modifierKey: 'ctrl',
  },
  zoom: {
    drag: {
      enabled: true
    },
    mode: 'xy',
  },
};
// </block>
const panStatus = () => zoomOptions.pan.enabled ? 'enabled' : 'disabled';
const zoomStatus = () => zoomOptions.zoom.drag.enabled ? 'enabled' : 'disabled';

const NUMBER_CFG = {count: 500, min: 0, max: 1000}; const data = { datasets: [{ label: 'My First dataset', borderColor: Utils.randomColor(0.4), backgroundColor: Utils.randomColor(0.1), pointBorderColor: Utils.randomColor(0.7), pointBackgroundColor: Utils.randomColor(0.5), pointBorderWidth: 1, data: Utils.hourlyPoints(NUMBER_CFG), }] };

const NUMBER_CFG = {count: 500, min: 0, max: 1000};
const data = {
  datasets: [{
    label: 'My First dataset',
    borderColor: Utils.randomColor(0.4),
    backgroundColor: Utils.randomColor(0.1),
    pointBorderColor: Utils.randomColor(0.7),
    pointBackgroundColor: Utils.randomColor(0.5),
    pointBorderWidth: 1,
    data: Utils.hourlyPoints(NUMBER_CFG),
  }]
};

const config = { type: 'scatter', data: data, options: { scales: scales, plugins: { zoom: zoomOptions, title: { display: true, position: 'bottom', text: (ctx) => 'Zoom: ' + zoomStatus() + ', Pan: ' + panStatus() } }, } };

const config = {
  type: 'scatter',
  data: data,
  options: {
    scales: scales,
    plugins: {
      zoom: zoomOptions,
      title: {
        display: true,
        position: 'bottom',
        text: (ctx) => 'Zoom: ' + zoomStatus() + ', Pan: ' + panStatus()
      }
    },
  }
};

const scales = { x: { position: 'bottom', type: 'time', ticks: { autoSkip: true, autoSkipPadding: 50, maxRotation: 0 }, time: { displayFormats: { hour: 'HH:mm', minute: 'HH:mm', second: 'HH:mm:ss' } } }, y: { position: 'right', ticks: { callback: (val, index, ticks) => index === 0 || index === ticks.length - 1 ? null : val, }, grid: { borderColor: Utils.randomColor(1), color: 'rgba( 0, 0, 0, 0.1)', }, title: { display: true, text: (ctx) => ctx.scale.axis + ' axis', } }, };

const scales = {
  x: {
    position: 'bottom',
    type: 'time',
    ticks: {
      autoSkip: true,
      autoSkipPadding: 50,
      maxRotation: 0
    },
    time: {
      displayFormats: {
        hour: 'HH:mm',
        minute: 'HH:mm',
        second: 'HH:mm:ss'
      }
    }
  },
  y: {
    position: 'right',
    ticks: {
      callback: (val, index, ticks) => index === 0 || index === ticks.length - 1 ? null : val,
    },
    grid: {
      borderColor: Utils.randomColor(1),
      color: 'rgba( 0, 0, 0, 0.1)',
    },
    title: {
      display: true,
      text: (ctx) => ctx.scale.axis + ' axis',
    }
  },
};