API

// Note: changes to these actions are not applied to the buttons. const actions = [ { name: 'Zoom +10%', handler(chart) { chart.zoom(1.1); } }, { name: 'Zoom -10%', handler(chart) { chart.zoom(0.9); }, }, { name: 'Zoom x +10%', handler(chart) { chart.zoom({x: 1.1}); } }, { name: 'Zoom x -10%', handler(chart) { chart.zoom({x: 0.9}); }, }, { name: 'Pan x 100px (anim)', handler(chart) { chart.pan({x: 100}, undefined, 'default'); } }, { name: 'Pan x -100px (anim)', handler(chart) { chart.pan({x: -100}, undefined, 'default'); }, }, { name: 'Zoom x: 0..-100, y: 0..100', handler(chart) { chart.zoomScale('x', {min: -100, max: 0}, 'default'); chart.zoomScale('y', {min: 0, max: 100}, 'default'); } }, { name: 'Reset zoom', handler(chart) { chart.resetZoom(); } } ];

// Note: changes to these actions are not applied to the buttons.
const actions = [
  {
    name: 'Zoom +10%',
    handler(chart) {
      chart.zoom(1.1);
    }
  }, {
    name: 'Zoom -10%',
    handler(chart) {
      chart.zoom(0.9);
    },
  }, {
    name: 'Zoom x +10%',
    handler(chart) {
      chart.zoom({x: 1.1});
    }
  }, {
    name: 'Zoom x -10%',
    handler(chart) {
      chart.zoom({x: 0.9});
    },
  }, {
    name: 'Pan x 100px (anim)',
    handler(chart) {
      chart.pan({x: 100}, undefined, 'default');
    }
  }, {
    name: 'Pan x -100px (anim)',
    handler(chart) {
      chart.pan({x: -100}, undefined, 'default');
    },
  }, {
    name: 'Zoom x: 0..-100, y: 0..100',
    handler(chart) {
      chart.zoomScale('x', {min: -100, max: 0}, 'default');
      chart.zoomScale('y', {min: 0, max: 100}, 'default');
    }
  }, {
    name: 'Reset zoom',
    handler(chart) {
      chart.resetZoom();
    }
  }
];

const NUMBER_CFG = {count: 20, min: -100, max: 100}; 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.points(NUMBER_CFG), }, { label: 'My Second 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.points(NUMBER_CFG), }] };

const NUMBER_CFG = {count: 20, min: -100, max: 100};
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.points(NUMBER_CFG),
  }, {
    label: 'My Second 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.points(NUMBER_CFG),
  }]
};

const config = { type: 'scatter', data: data, options: { scales: scales, } };

const config = {
  type: 'scatter',
  data: data,
  options: {
    scales: scales,
  }
};

const scaleOpts = { reverse: true, 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: 'top', }, y: { position: 'right', }, }; Object.keys(scales).forEach(scale => Object.assign(scales[scale], scaleOpts));

const scaleOpts = {
  reverse: true,
  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: 'top',
  },
  y: {
    position: 'right',
  },
};
Object.keys(scales).forEach(scale => Object.assign(scales[scale], scaleOpts));