How to set different chart behaviour deppending on key pressed, in amcharts

Question

I know that I can control the zoom/pan behavior using the mouse like this:

    chart.cursor = new am4charts.XYCursor();
    chart.cursor.xAxis = dateAxis;
    chart.cursor.yAxis = valueAxis;
    chart.cursor.wheelable = true;
    chart.cursor.behavior = 'panXY';
    chart.mouseWheelBehavior = 'zoomXY';

That will make the chart to zoom on mouse wheel and move on drag. I would like to make the chart to also move (scroll) left/right if the mouse wheel is used when the CTRL key is pressed. So:

mouse wheel = zoom
CTRL + mouse wheel = scroll left/right

is that somehow possible?

score 0 · Accepted Answer · answered Jun 09 '20 at 07:31

Ok I managed to do it by adding some event handlers to the wrapper div:

  <div
      onMouseOut={e => {
          chart.mouseWheelBehavior = 'zoomXY';
      }}
      onMouseOver={e => {
          chart.mouseWheelBehavior = e.ctrlKey ? 'panX' : 'zoomXY';
      }}
      onWheel={e => {
          chart.mouseWheelBehavior = e.ctrlKey ? 'panX' : 'zoomXY';
      }}>
      <div className={styles.chartWrapper} ref={containerRef}>
      </div>
    </div>

How to set different chart behaviour deppending on key pressed, in amcharts

1 Answers1