search

chartjs / chartjs-plugin-zoom

Zoom and pan plugin for Chart.js
MIT License
581 stars 322 forks source link

Zoom can be trigger outside of the data region, into the Axis and Legend #727

Open hugo-valcourt opened 1 year ago

hugo-valcourt commented 1 year ago

Zoom can be trigger outside of the data region, into the Axis and Legend

"chart.js": "^4.2.0" "chartjs-plugin-zoom": "^2.0.0"

You can reproduce this on your website here : https://www.chartjs.org/chartjs-plugin-zoom/latest/samples/drag/category.html

On your example in the URL, try to zoom with a drag into the yAxis or the legend, the zoom will trigger.

1

2

Movie : https://user-images.githubusercontent.com/39559391/217556340-2b8fed1a-0344-40eb-a7f8-25f3d3f3961d.mov

Maybe related to https://github.com/chartjs/chartjs-plugin-zoom/issues/611 ?

hugo-valcourt commented 1 year ago

Maybe args.inChartArea could be usefull ?

  /**
   * @desc Called before processing the specified `event`. If any plugin returns `false`,
   * the event will be discarded.
   * @param {Chart} chart - The chart instance.
   * @param {object} args - The call arguments.
   * @param {ChartEvent} args.event - The event object.
   * @param {boolean} args.replay - True if this event is replayed from `Chart.update`
   * @param {boolean} args.inChartArea - The event position is inside chartArea
   * @param {object} options - The plugin options.
   */
  beforeEvent?(chart: Chart, args: { event: ChartEvent, replay: boolean, cancelable: true, inChartArea: boolean }, options: O): boolean | void;
  /**
   * @desc Called after the `event` has been consumed. Note that this hook
   * will not be called if the `event` has been previously discarded.
   * @param {Chart} chart - The chart instance.
   * @param {object} args - The call arguments.
   * @param {ChartEvent} args.event - The event object.
   * @param {boolean} args.replay - True if this event is replayed from `Chart.update`
   * @param {boolean} args.inChartArea - The event position is inside chartArea
   * @param {boolean} [args.changed] - Set to true if the plugin needs a render. Should only be changed to true, because this args object is passed through all plugins.
   * @param {object} options - The plugin options.
   */
  afterEvent?(chart: Chart, args: { event: ChartEvent, replay: boolean, changed?: boolean, cancelable: false, inChartArea: boolean }, options: O): void;