CODEWITHSUNDEEP
echarts
Andreas Köberle
Andreas Köberle

Reputation: 110892

How to link zoom in different charts in echarts

We have multiple charts with zoom. Is there a way to link all this charts so they always have the same zoom factor when the user zoom in one of the charts?

Upvotes: 3

Views: 4255

Answers (2)

C4d
C4d

Reputation: 3282

If you've got more events to track, creating the action can be simplified by letting echarts create it:

["datazoom", "legendselectchanged", /* more events*/].forEach((eventType: string) => {
    this.chartInstance1.on(eventType, (event) => {
        // Automatically create an action from the event
        let newEvent = this.chartInstance1.makeActionFromEvent(event);
        // Dispatch it directly
        this.chartInstance2.dispatchAction(newEvent);
    });
})

For everyone who wants to go further, also synchronizing mouse, legend and magic events, its easier to use the connect function.

Template:

// chart 1
<div echarts (chartInit)="onChartInit($event)"></div>
// chart 2
<div echarts (chartInit)="onChartInit($event)"></div>

Typescript:

import { connect, ECharts } from "echarts";

// ...

onChartInit(chart: ECharts) {
    this.charts.push(chart);
    
    if (this.charts.length === 2)
        // This will do the magic out of the box
        connect([charts[0], charts[1]]);
}

Upvotes: 1

Karel Reynaldo
Karel Reynaldo

Reputation: 41

When having multiple grids in the same chart is not a possibility, I use this trick to do the job:

myChart.on('datazoom', function (evt) {
    var zoom = myChart.getOption().dataZoom[0];
    myOtherChart.dispatchAction({
        type: 'dataZoom',
        dataZoomIndex: 0,
        startValue: zoom.startValue,
        endValue: zoom.endValue
    });
});

Both charts have dataZoom, in my case I hide the one in myOtherChart.

Upvotes: 4

Related Questions