2 years ago

#66433

test-img

texas697

how to sync cursors across multiple chart amchartsv4

I am using amcharts v4.10.20. I am trying to sync cursor movement and zooming across multiple charts. Using examples from the documentation I managed to get the zoom sync to work but having no luck with the cursors.

    function syncDateAxes(syncWithAxis) {
  for (let i = 0; i < props.chartsRef?.current.length; i += 1) {
    const chart = props.chartsRef?.current[i];
    const dateAxis = chart.xAxes.getIndex(0);

    if (dateAxis && dateAxis !== syncWithAxis) {
      try {
        dateAxis.events.disableType("selectionextremeschanged");
        dateAxis.start = syncWithAxis.start;
        dateAxis.end = syncWithAxis.end;
        dateAxis.events.enableType("selectionextremeschanged");
      } catch (error) {
        console.log(error);
      }
    }
  }
}

chart.cursor.adapter.add("cursorPoint", function cursorPoint(point) {
  if (
    props.chartsRef?.current[0]?.scrollbarX &&
    props.chartsRef?.current[0]?.scrollbarX.isBusy
  ) {
    point.y = -1000;
  } else if (!chart.cursor.fitsToBounds(point)) {
    point.y = 0;
    chart.cursor.lineY.visible = false;
    const _cursor = chart.yAxes.getIndex(0);
    if (_cursor) {
      _cursor.cursorTooltipEnabled = false;
    }
  } else {
    chart.cursor.lineY.visible = true;
    const _cursor = chart.yAxes.getIndex(0);
    if (_cursor) {
      _cursor.cursorTooltipEnabled = true;
    }
  }
  return point;
});

xAxis.events.on(
  "selectionextremeschanged",
  function selectionextremeschanged(event) {
    syncDateAxes(event.target);
  }
);

I have working demo you can fork. WORKING DEMO

Think different solution could be using these.

https://www.amcharts.com/docs/v4/tutorials/tracking-cursors-position-via-api/

https://www.amcharts.com/docs/v4/tutorials/positioning-xy-cursor-via-api/#Moving_cursor_to_point

UPDATE: So I made some progress and created a fork with changes. FORKED_DEMO

It works but sometimes it errors out with

TypeError: Cannot read properties of null (reading 'push')

javascript

html

reactjs

charts

amcharts4

0 Answers

Your Answer

Accepted video resources