Search code examples
chartsamchartsamcharts4

Is there a way to move freely in amcharts without snapping to the chart values?


Using a candlestick series chart, if I zoom in the data and use the scrollbars to move in one direction at a time, either vertically or horizontally it works fine.

If I use the mouse to move at two directions at the same time the chart goes crazy and keeps jumping between the position I am dragging with the mouse and the position where the data is.

Is it possible to make the chart ignore the position of the data when scrolling and only obbey the position being scrolled by the cursor?

    let chart = am4core.create(containerRef.current, am4charts.XYChart);
    chart.data = getData()

    const dateAxis = chart.xAxes.push(new am4charts.DateAxis());
    dateAxis.nonScaling = true;
    dateAxis.skipEmptyPeriods = true;

    const valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
    valueAxis.nonScaling = true;

    const series = chart.series.push(new am4charts.CandlestickSeries());
    series.dataFields.dateX = "date";
    series.dataFields.valueY = "close";
    series.dataFields.openValueY = "open";
    series.dataFields.lowValueY = "low";
    series.dataFields.highValueY = "high";
    series.simplifiedProcessing = true;

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

    chart.scrollbarX = new am4core.Scrollbar();
    chart.scrollbarY = new am4core.Scrollbar();


Solution

  • I managed to do it by setting the keepSelection value in the ValueChart:

     valueAxis.keepSelection = true
    

    Now even if I change the Y zoom and move across the zoomed chart it does not try to move the chart to the point where the data is or change my zoom automatically.