Reject outside chartArea

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, mode: 'xy', modifierKey: 'ctrl', }, zoom: { mode: 'xy', // here is the magic! onZoomStart: ({chart, point}) => chart.isPointInArea(point), drag: { enabled: true, borderColor: 'rgb(54, 162, 235)', borderWidth: 1, backgroundColor: 'rgba(54, 162, 235, 0.3)' } } }

const zoomOptions = {
  pan: {
    enabled: true,
    mode: 'xy',
    modifierKey: 'ctrl',
  },
  zoom: {
    mode: 'xy',
    // here is the magic!
    onZoomStart: ({chart, point}) => chart.isPointInArea(point),
    drag: {
      enabled: true,
      borderColor: 'rgb(54, 162, 235)',
      borderWidth: 1,
      backgroundColor: 'rgba(54, 162, 235, 0.3)'
    }
  }
}

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, plugins: { zoom: zoomOptions, title: { display: true, position: 'bottom', text: () => 'Zoom: ' + zoomStatus() } }, } }

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

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))