Pan

Based on pan gesture( from Hammer.js), it also provides press gesture to trigger the interaction of the tooltip.

How to use

const F2 = require('@antv/f2/lib/index'); // require F2
require('@antv/f2/lib/interaction/pan'); // require the interaction

// ... create a chart instance

// call the interaction, should be call before chart.render()
chart.interaction('pan');

Configuration options

chart.interaction('pan', {
  mode: {String}, 
  panThreshold: {Number}, 
  pressThreshold: {Number},
  pressTime: {Number},
  limitRange: {Object},
  onStart: {Function},
  onProcess: {Function},
  onEnd: {Function}
});

Name	Type	Default	Description
mode	String	'x'	The direction of pan, can be 'x', 'y' or 'xy'. The default value is 'x'.
panThreshold	Number	10	Minimal pan distance required before recognizing.
pressThreshold	Number	9	Minimal movement that is allowed while pressing. press will trigger tooltip.
pressTime	Number	251	Minimal press time in ms.
limitRange	Object	Automatic calculation based on the range of data	The maximum and minimum range used to set the chart, needs to correspond to the data field corresponding to the x or y axis. Use the following: limitRange: { fieldA: { min: 0, max: 100 } }
onStart	Function	null	The callback after the start event is triggered.
onPress	Function	null	The callback after the process event is triggered.
onEnd	Function	null	The callback after the end event is triggered.

Demo

• pan for line chart

• pan for bar chart

• pinch and pan for scatter chart