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(2 - 1 / 0.9) }, }, { name: 'Zoom x +10%', handler(chart) { chart.zoom({x: 1.1}) } }, { name: 'Zoom x -10%', handler(chart) { chart.zoom({x: 2 - 1 / 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(2 - 1 / 0.9)
    },
  }, {
    name: 'Zoom x +10%',
    handler(chart) {
      chart.zoom({x: 1.1})
    }
  }, {
    name: 'Zoom x -10%',
    handler(chart) {
      chart.zoom({x: 2 - 1 / 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))