The Excellent Device to Examine A number of Datasets

Synchronized charts seek advice from a visualization approach the place a number of charts or graphs are linked collectively to show information in a coordinated method. This strategy is useful when analyzing relationships and tendencies between completely different information units.

A synchronized chart gives entry and interplay with two or extra charts concurrently. Which means actions carried out on one chart, comparable to positioning a cursor, clicking on a selected level, or activating a tooltip, are mirrored concurrently on corresponding positions or information factors throughout different synchronized charts primarily based on their x and y coordinates.

On this weblog, we’ll discover the synchronization characteristic within the Syncfusion React Charts part. Right here, we’ll use this characteristic to look at the connection between greenback worth modifications for various currencies.

Makes use of of synchronized charts

The use instances of synchronized charts are as follows:

1. Correlation evaluation: Unveiling interconnected relationships inside information.
2. Holistic view: Enabling a complete understanding by amalgamating a number of views.
3. Actual-time evaluation: Empowering instantaneous insights into evolving tendencies.
4. Comparative evaluation: Facilitating side-by-side comparisons for insightful observations.
5. Improved decision-making: Empowering knowledgeable and strategic selections.
6. Enhanced consumer expertise: Elevating the accessibility and value of knowledge.

Synchronizing chart components in React Charts

Let’s seamlessly analyze market information (relationship between greenback worth modifications for various currencies) by configuring the next components within the React Charts:

• Tooltip
• Crosshair
• Zooming
• Choice

Tooltip synchronization in React Charts

You’ll be able to simply synchronize tooltips throughout a number of charts, enhancing the consumer expertise of interconnected information. This course of includes two important strategies: showTooltip and hideTooltip.

When a consumer hovers over an information level in a chart, the showTooltip technique allows the presentation of related info throughout a number of charts. This characteristic makes it potential to show related information concurrently in synchronized charts.

The next are the parameters of the showTooltip technique:

• x: Represents the x-value of the purpose.
• y: Represents the y-value of the purpose.

The next code instance exhibits the best way to synchronize tooltips throughout the charts.

import {
  ChartComponent,
  SeriesCollectionDirective,
  LineSeries,
  AreaSeries,
  Tooltip,
  DateTime,
  SeriesDirective,
  Inject,
} from '@syncfusion/ej2-react-charts';

import { synchronizedData } from './financial-data';
import { Browser } from '@syncfusion/ej2-base';
export let zoomFactor;
export let zoomPosition;
export let pointColors = [];

const Candle = () => {
  let chart1;
    let chart2;
  
    let chart1MouseLeave = (args) => {
      chart2.hideTooltip();
    };
  
    let chart1MouseMove = (args) => {
      if ((!Browser.isDevice && !chart1.isTouch && !chart1.isChartDrag) || chart1.startMove) {
        chart2.startMove = chart1.startMove;
        chart2.showTooltip(args.x, args.y);
      }
    };
  
    let chart1MouseUp = (args) => {
      if (Browser.isDevice && chart1.startMove) {
        chart2.hideTooltip();
      }
    };
  
    let chart2MouseLeave = (args) => {
      chart1.hideTooltip();
    };
  
    let chart2MouseMove = (args) => {
      if ((!Browser.isDevice && !chart2.isTouch && !chart2.isChartDrag) || chart2.startMove) {
        chart1.startMove = chart2.startMove;
        chart1.showTooltip(args.x, args.y);
      }
    };
    let chart2MouseUp = (args) => {
      if (Browser.isDevice && chart2.startMove) {
        chart1.hideTooltip();
      }
    };
    return <div className="grid">
        <div className="g-col-6 g-col-md-4">
          <ChartComponent
            id="container1"
            ref={chart => chart1 = chart}
            width="30%" 
            chartMouseLeave={chart1MouseLeave.bind(this)}
            chartMouseMove={chart1MouseMove.bind(this)}
            chartMouseUp={chart1MouseUp.bind(this)}
            tooltip={{ allow: true, shared: true, header: '', format: '<b>€${level.y}</b><br>${level.x} 2023'}}
            title="US to Euro">
            <Inject companies={[LineSeries, DateTime, Tooltip]} />
            <SeriesCollectionDirective>
              <SeriesDirective sort="Line" dataSource={synchronizedData} xName="USD" yName="EUR"></SeriesDirective>
            </SeriesCollectionDirective>
          </ChartComponent>
        </div>
        <div className="g-col-6 g-col-md-4">
          <ChartComponent
            id="container2"
            width="30%"
            ref={chart => chart2 = chart}         
            chartMouseLeave={chart2MouseLeave.bind(this)}
            chartMouseMove={chart2MouseMove.bind(this)}
            chartMouseUp={chart2MouseUp.bind(this)}
            tooltip={{ allow: true, shared: true, header: '', format: '<b>₹${level.y}</b><br>${level.x} 2023' }}
            title="US to INR">
            <Inject companies={[AreaSeries, DateTime, Tooltip]} />
            <SeriesCollectionDirective>
              <SeriesDirective sort="Space" dataSource={synchronizedData} xName="USD" yName="INR"></SeriesDirective>
            </SeriesCollectionDirective>
          </ChartComponent>
        </div>
      </div>
};
export default Candle;

const root = createRoot(doc.getElementById('pattern'));
root.render(<Candle />);

Confer with the next output picture.

Crosshair synchronization in React Charts

Synchronizing crosshairs throughout a number of charts can considerably improve information evaluation and comparability. The showCrosshair and hideCrosshair strategies facilitate this synchronization.

When hovering over one chart, the showCrosshair technique will get invoked to point out the corresponding factors within the different charts.

The showCrosshair technique takes the next parameters:

• x: Represents the x-coordinate worth of the purpose.
• y: Represents the y-coordinate worth of the purpose.

The next code instance exhibits the best way to synchronize crosshair throughout the charts.

import { createRoot } from 'react-dom/shopper';
import * as React from 'react';
import { Chart, AreaSeries, SplineSeries, DateTime, Crosshair, IMouseEventArgs, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject } from '@syncfusion/ej2-react-charts';

import { synchronizedData } from './financial-data';
import { Browser } from '@syncfusion/ej2-base';
export let zoomFactor;
export let zoomPosition;
export let pointColors = [];

const Candle = () => {
  let chart1;
    let chart2;

    let chart1MouseLeave = (args) => {
        chart2.hideCrosshair();
    };

    let chart1MouseMove = (args) => {
        if ((!Browser.isDevice && !chart1.isTouch && !chart1.isChartDrag) || chart1.startMove) {
            chart2.startMove = chart1.startMove;
            chart2.showCrosshair(args.x, args.y);
        }
    };

    let chart1MouseUp = (args) => {
        if (Browser.isDevice && chart1.startMove) {
            chart2.hideCrosshair();
        }
    };

    let chart2MouseLeave = (args) => {
        chart1.hideCrosshair();
    };

    let chart2MouseMove = (args) => {
        if ((!Browser.isDevice && !chart2.isTouch && !chart2.isChartDrag) || chart2.startMove) {
            chart1.startMove = chart2.startMove;
            chart1.showCrosshair(args.x, args.y);
        }
    };
    let chart2MouseUp = (args) => {
        if (Browser.isDevice && chart2.startMove) {
            chart1.hideCrosshair();
        }
    };
    return <div className="control-section">
        <div className="row">
            <div className="col">
                <ChartComponent
                    width="50%"
                    id="container1"
                    ref={chart => chart1 = chart}
                    chartMouseLeave={chart1MouseLeave.bind(this)}
                    chartMouseMove={chart1MouseMove.bind(this)}
                    chartMouseUp={chart1MouseUp.bind(this)}
                    crosshair={{ allow: true, lineType: 'Vertical', dashArray: '2,2' }}
                    title="US to Euro">
                    <Inject companies={[SplineSeries, DateTime, Crosshair]} />
                    <SeriesCollectionDirective>
                        <SeriesDirective sort="Spline" dataSource={synchronizedData} xName="USD" yName="EUR"></SeriesDirective>
                    </SeriesCollectionDirective>
                </ChartComponent>
            </div>
            <div className="col">
                <ChartComponent
                    width="50%"
                    id="container2"
                    ref={chart => chart2 = chart}                  
                    chartMouseLeave={chart2MouseLeave.bind(this)}
                    chartMouseMove={chart2MouseMove.bind(this)}
                    chartMouseUp={chart2MouseUp.bind(this)}
                    crosshair={{ allow: true, lineType: 'Vertical', dashArray: '2,2' }}
                    title="US to INR">
                    <Inject companies={[AreaSeries, DateTime, Crosshair]} />
                    <SeriesCollectionDirective>
                        <SeriesDirective sort="Space" dataSource={synchronizedData} xName="USD" yName="INR" ></SeriesDirective>
                    </SeriesCollectionDirective>
                </ChartComponent>
            </div>
        </div>
    </div>
};
export default Candle;

const root = createRoot(doc.getElementById('pattern'));
root.render(<Candle />);

Confer with the next picture.

Zooming synchronization in React Charts

Sustaining constant zoom ranges throughout a number of charts can considerably improve the visible expertise. To realize this synchronization, you have to leverage the zoomComplete occasion.

Throughout this occasion, we should always retrieve the zoomFactor and zoomPosition values particular to every chart. Subsequently, apply these obtained values to make sure uniformity throughout all of your charts. This streamlines the viewing expertise and ensures coherence in information evaluation throughout a number of visible representations.

The next code instance exhibits the best way to synchronize zooming throughout the charts.

import { createRoot } from 'react-dom/shopper';
import * as React from 'react';
import { useEffect } from 'react';
import { Chart, SplineAreaSeries, LineSeries, DateTime, Zoom, IZoomCompleteEventArgs, Choice, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject } from '@syncfusion/ej2-react-charts';
import { synchronizedData } from './financial-data';
import { Browser } from '@syncfusion/ej2-base';
export let zoomFactor;
export let zoomPosition;
export let pointColors = [];

const Candle = () => {
  let chart1;
    let chart2;

    let charts = [];
    useEffect(() => {
        charts = [chart1, chart2];
    }, []);
    let zoomFactor = 0;
    let zoomPosition = 0;

    let zoomComplete = (args) => {
        if (args.axis.identify === 'primaryXAxis') {
            zoomFactor = args.currentZoomFactor;
            zoomPosition = args.currentZoomPosition;
            zoomCompleteFunction(args);
        }
    };

    let zoomCompleteFunction = (args) => {
        for (let i = 0; i < charts.size; i++) {
            if (args.axis.collection[0].chart.ingredient.id !== charts[i].ingredient.id) {
                charts[i].primaryXAxis.zoomFactor = zoomFactor;
                charts[i].primaryXAxis.zoomPosition = zoomPosition;
                charts[i].zoomModule.isZoomed = args.axis.collection[0].chart.zoomModule.isZoomed;
                charts[i].zoomModule.isPanning = args.axis.collection[0].chart.zoomModule.isPanning;
            }
        }
    }
    return <div className="control-section">
        <div className="row">
            <div className="col">
                <ChartComponent
                    id="container1"
                    width="50%"
                    ref={chart => chart1 = chart} 
                    zoomSettings={{
                        enableMouseWheelZooming: true,
                        enablePinchZooming: true,
                        enableScrollbar: false,
                        enableDeferredZooming: false,
                        enableSelectionZooming: true,
                        enablePan: true,
                        mode: 'X',
                        toolbarItems: ['Pan', 'Reset']
                    }}
                    zoomComplete={zoomComplete.bind(this)}
                    titleStyle={{ textAlignment: 'Close to' }}
                    title="US to Euro">
                    <Inject companies={[LineSeries, DateTime, Zoom, Selection]} />
                    <SeriesCollectionDirective>
                        <SeriesDirective sort="Line" dataSource={synchronizedData} xName="USD" yName="EUR" ></SeriesDirective>
                    </SeriesCollectionDirective>
                </ChartComponent>
            </div>
            <div className="col">
                <ChartComponent
                    id="container2"
                    ref={chart => chart2 = chart}
                    width="50%"
                    zoomSettings={{
                        enableMouseWheelZooming: true,
                        enablePinchZooming: true,
                        enableScrollbar: false,
                        enableDeferredZooming: false,
                        enableSelectionZooming: true,
                        enablePan: true,
                        mode: 'X',
                        toolbarItems: ['Pan', 'Reset']
                    }}
                    zoomComplete={zoomComplete.bind(this)}
                    titleStyle={{ textAlignment: 'Close to' }}
                    title="US to INR">
                    <Inject companies={[SplineAreaSeries, DateTime, Zoom, Selection]} />
                    <SeriesCollectionDirective>
                        <SeriesDirective sort="SplineArea" dataSource={synchronizedData} xName="USD" yName="INR"></SeriesDirective>
                    </SeriesCollectionDirective>
                </ChartComponent>
            </div>
        </div>
    </div>
};
export default Candle;

const root = createRoot(doc.getElementById('pattern'));
root.render(<Candle />);

Confer with the next output picture.

Choice synchronization in React Charts

You’ll be able to spotlight or choose particular information factors or areas of curiosity in a single chart, and the corresponding information factors or areas are then mechanically highlighted or chosen in different synchronized charts. This course of could be achieved through the use of the selectionComplete occasion.

You’ll be able to simply apply desired values to different charts by copying and pasting the values straight from this occasion to the respective chart.

Confer with the next code instance to synchronize choice in charts.

import { createRoot } from 'react-dom/shopper';
import * as React from 'react';
import { useEffect } from 'react';
import { ColumnSeries, Zoom, IZoomCompleteEventArgs, Choice, ISelectionCompleteEventArgs, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Class } from '@syncfusion/ej2-react-charts';
import { synchronizedData } from './financial-data';
 
export let zoomFactor;
export let zoomPosition;
export let pointColors = [];

const Candle = () => {
  let chart1;
    let chart2;
    let charts = [];
    useEffect(() => {
        charts = [chart1, chart2];
    }, []);
    let zoomFactor = 0;
    let zoomPosition = 0;
    let depend = 0;

    let zoomComplete = (args) => {
        if (args.axis.identify === 'primaryXAxis') {
            zoomFactor = args.currentZoomFactor;
            zoomPosition = args.currentZoomPosition;
            zoomCompleteFunction(args);
        }
    };

    let zoomCompleteFunction = (args) => {
        for (let i = 0; i < charts.size; i++) {
            if (args.axis.collection[0].chart.ingredient.id !== charts[i].ingredient.id) {
                charts[i].primaryXAxis.zoomFactor = zoomFactor;
                charts[i].primaryXAxis.zoomPosition = zoomPosition;
                charts[i].zoomModule.isZoomed = args.axis.collection[0].chart.zoomModule.isZoomed;
                charts[i].zoomModule.isPanning = args.axis.collection[0].chart.zoomModule.isPanning;
            }
        }
    };

    let selectionComplete = (args) => {
        selectionCompleteFunction(args);
    };

    let selectionCompleteFunction = (args) => {
        if (depend == 0) {
            for (var j = 0; j < args.selectedDataValues.size; j++) {
                args.selectedDataValues[j].level = args.selectedDataValues[j].pointIndex;
                args.selectedDataValues[j].collection = args.selectedDataValues[j].seriesIndex;
            }
            for (var i = 0; i < charts.size; i++) {
                if (args.chart.ingredient.id !== charts[i].ingredient.id) {
                    charts[i].selectedDataIndexes = args.selectedDataValues;
                    depend += 1;
                    charts[i].dataBind();
                }
            }
            depend = 0;
        }
    };

    let chartData = [
      { x: 'GBR', y: 27 },
      { x: 'CHN', y: 26 },
      { x: 'AUS', y: 8 },
      { x: 'RUS', y: 19 },
      { x: 'GER', y: 17 },
      { x: 'UA', y: 2 }
    ];
    return<div className="control-section">
        <div className="row">
            <div className="col">
                <ChartComponent
                    id="container1"
                    width="50%"
                    ref={chart => chart1 = chart}                     
                    selectionComplete={selectionComplete.bind(this)}
                    title="US to Euro"
                    selectionMode="Level"
                    selectionPattern='Field'>
                    <Inject companies={[ColumnSeries, Category, Zoom, Selection]} />
                    <SeriesCollectionDirective>
                        <SeriesDirective sort="Column" dataSource={chartData} xName="x" yName="y" width={2} ></SeriesDirective>
                    </SeriesCollectionDirective>
                </ChartComponent>
            </div>
            <div className="col">
                <ChartComponent
                    id="container2"
                    width="50%"
                    ref={chart => chart2 = chart}
                    chartArea={{ border: { width: 0 } }}
                    selectionComplete={selectionComplete.bind(this)}
                    title="US to INR"
                    selectionMode="Level"
                    selectionPattern='Field'>
                    <Inject companies={[ColumnSeries, Category, Zoom, Selection]} />
                    <SeriesCollectionDirective>
                        <SeriesDirective sort="Column" dataSource={chartData} xName="x" yName="y" width={2} ></SeriesDirective>
                    </SeriesCollectionDirective>
                </ChartComponent>
            </div>
        </div>
    </div>
};
export default Candle;

const root = createRoot(doc.getElementById('pattern'));
root.render(<Candle />);

Confer with the next output picture. 

References

For extra particulars, seek advice from the synchronized React Charts documentation and demo. 

Conclusion

Thanks for studying! On this weblog, we explored the best way to synchronize components within the Syncfusion React Charts to match a number of information units. Check out this highly effective software and share your suggestions within the feedback part.

The brand new model of Important Studio is offered on the License and Downloads web page for our present clients. For those who’re new to Syncfusion, we’re providing a 30-day free trial to expertise the big range of options we offer.

You may also contact us by way of our assist discussion board, assist portal, or suggestions portal. We’re all the time keen that can assist you!

Associated blogs