linear-ratio.md

Linear Scales + maintainAspectRatio

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

// <block:data:1>
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),
  }]
};
// </block:data>

// <block:scales:2>
const scaleOpts = {
  reverse: true,
  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));
// </block:scales>

// <block:zoom:0>
const dragColor = Utils.randomColor(0.4);
const zoomOptions = {
  pan: {
    enabled: true,
    mode: 'xy',
    modifierKey: 'shift',
  },
  zoom: {
    mode: 'xy',
    drag: {
      enabled: true,
      borderColor: 'rgb(54, 162, 235)',
      borderWidth: 1,
      backgroundColor: 'rgba(54, 162, 235, 0.3)',
      maintainAspectRatio: true,
    }
  }
};
// </block:zoom>

const zoomStatus = () => zoomOptions.zoom.drag.enabled ? 'enabled' : 'disabled';

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

const actions = [
  {
    name: 'Toggle zoom',
    handler(chart) {
      zoomOptions.zoom.drag.enabled = !zoomOptions.zoom.drag.enabled;
      chart.update();
    }
  }, {
    name: 'Reset zoom',
    handler(chart) {
      chart.resetZoom();
    }
  }
];

module.exports = {
  actions,
  config,
};