Dynamic data update in React Accumulation Chart component

30 Sep 202413 minutes to read

Adding a new data point

The addPoint method is used to dynamically add a new data point to the accumulation chart series. This method is particularly useful when you want to update the chart with a new data point without having to refresh the entire accumulation chart. This method takes two parameters:

  • The first parameter is the new data point to add to your existing data source.
  • The optional second parameter specifies the animation duration for adding the new data point.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, Inject, AccumulationAnnotation, AccumulationAnnotationsDirective, AccumulationAnnotationDirective, AccumulationLegend, AccumulationSeries }
  from '@syncfusion/ej2-react-charts';
import { pieData } from '../datasource.ts';

function App() {

  const template = chartTemplate;
  const chartRef = React.useRef < AccumulationChartComponent > (null);
  let click = () => {
    if (chartRef.current) {
      (chartRef.current.series[0]).addPoint({ x: 'Dec', y: 15 });
    }
  }
  function chartTemplate() {
    return (<div className='template'>
      <div style={{ border: '1px solid black', backgroundColor: '#f5f5f5', padding: '5px 5px 5px 5px' }}>13.5</div>
    </div>);
  };

  return <div><AccumulationChartComponent id='charts' ref={chartRef} legendSettings={{ visible: false }} >
    <Inject services={[AccumulationAnnotation, AccumulationLegend]} />
    <AccumulationSeriesCollectionDirective>
      <AccumulationSeriesDirective dataSource={pieData} xName='x' yName='y' legendShape='Rectangle'>
      </AccumulationSeriesDirective>
    </AccumulationSeriesCollectionDirective>
  </AccumulationChartComponent>
    <button id='add' onClick={click}>click</button>
  </div>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, Inject, AccumulationAnnotation, AccumulationAnnotationsDirective, AccumulationAnnotationDirective, AccumulationLegend, AccumulationSeries }
  from '@syncfusion/ej2-react-charts';
import { pieData } from '../datasource.ts';

function App() {

  const chartRef = React.useRef<AccumulationChartComponent>(null);
  let click = () => {
    if (chartRef.current) {
      (chartRef.current.series[0] as AccumulationSeries).addPoint({ x: 'Dec', y: 15 });
    }
  }

  return <div><AccumulationChartComponent id='charts' ref={chartRef} legendSettings={{ visible: false }} >
    <Inject services={[AccumulationAnnotation, AccumulationLegend]} />
    <AccumulationSeriesCollectionDirective>
      <AccumulationSeriesDirective dataSource={pieData} xName='x' yName='y' legendShape='Rectangle'>
      </AccumulationSeriesDirective>
    </AccumulationSeriesCollectionDirective>
  </AccumulationChartComponent>
    <button id='add' onClick={click}>click</button>
  </div>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

Removing an existing data point

The removePoint method is used to dynamically remove a data point from the accumulation chart series. This method is particularly useful when you want to update the accumulation chart by removing an existing data point without having to refresh the entire accumulation chart. This method takes two parameters:

  • The first parameter is the index of the data point that needs to be removed from the existing data source.
  • The optional second parameter specifies the animation duration for removing the data point.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, Inject, AccumulationAnnotation, AccumulationAnnotationsDirective, AccumulationAnnotationDirective, AccumulationLegend, AccumulationSeries }
  from '@syncfusion/ej2-react-charts';
import { pieData } from '../datasource.ts';

function App() {

  const template = chartTemplate;
  const chartRef = React.useRef < AccumulationChartComponent > (null);
  let click = () => {
    if (chartRef.current) {
      (chartRef.current.series[0]).removePoint(0);
    }
  }
  function chartTemplate() {
    return (<div className='template'>
      <div style={{ border: '1px solid black', backgroundColor: '#f5f5f5', padding: '5px 5px 5px 5px' }}>13.5</div>
    </div>);
  };

  return <div><AccumulationChartComponent id='charts' ref={chartRef} legendSettings={{ visible: false }} >
    <Inject services={[AccumulationAnnotation, AccumulationLegend]} />
    <AccumulationSeriesCollectionDirective>
      <AccumulationSeriesDirective dataSource={pieData} xName='x' yName='y' legendShape='Rectangle'>
      </AccumulationSeriesDirective>
    </AccumulationSeriesCollectionDirective>
  </AccumulationChartComponent>
    <button id='add' onClick={click}>click</button>
  </div>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, Inject, AccumulationAnnotation, AccumulationAnnotationsDirective, AccumulationAnnotationDirective, AccumulationLegend, AccumulationSeries }
  from '@syncfusion/ej2-react-charts';
import { pieData } from '../datasource.ts';

function App() {

  const chartRef = React.useRef<AccumulationChartComponent>(null);
  let click = () => {
    if (chartRef.current) {
      (chartRef.current.series[0] as AccumulationSeries).removePoint(0);
    }
  }

  return <div><AccumulationChartComponent id='charts' ref={chartRef} legendSettings={{ visible: false }} >
    <Inject services={[AccumulationAnnotation, AccumulationLegend]} />
    <AccumulationSeriesCollectionDirective>
      <AccumulationSeriesDirective dataSource={pieData} xName='x' yName='y' legendShape='Rectangle'>
      </AccumulationSeriesDirective>
    </AccumulationSeriesCollectionDirective>
  </AccumulationChartComponent>
    <button id='add' onClick={click}>click</button>
  </div>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

Replacing entire data points

To replace the existing data source in the accumulation chart with a new data source, you can simply use the setData method. This method allows you to replace the existing data points in the accumulation chart series with a new set of data points, enabling you to easily update the accumulation chart with new information. This method takes two parameters:

  • The first parameter is the new set of data points to be updated.
  • The optional second parameter specifies the animation duration for updating the new data source.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, Inject,AccumulationAnnotation, AccumulationAnnotationsDirective, AccumulationAnnotationDirective, AccumulationLegend, AccumulationSeries}
from'@syncfusion/ej2-react-charts';
import { pieData } from '../datasource.ts';

function App() {

  const chartRef = React.useRef<AccumulationChartComponent>(null);
  let click= ()=>{
    const newData = [
      { x: 'Jan', y: 3 },
      { x: 'Feb', y: 3.5 },
      { x: 'Mar', y: 7 },
      { x: 'Aug', y: 25 },
      { x: 'Sep', y: 21 },
      { x: 'Oct', y: 15 },
    ];

    if (chartRef.current) {
      (chartRef.current.series[0] ).setData(newData, 500);
    }
  }

  return <div><AccumulationChartComponent id='charts' ref={chartRef} legendSettings={{visible:false}} >
      <Inject services={[AccumulationAnnotation, AccumulationLegend]} />
      <AccumulationSeriesCollectionDirective>
        <AccumulationSeriesDirective dataSource={pieData} xName='x' yName='y' legendShape='Rectangle'>
        </AccumulationSeriesDirective>
      </AccumulationSeriesCollectionDirective>
    </AccumulationChartComponent>
    <button id='add' onClick={click}>click</button>
    </div>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, Inject,AccumulationAnnotation, AccumulationAnnotationsDirective, AccumulationAnnotationDirective, AccumulationLegend, AccumulationSeries}
from'@syncfusion/ej2-react-charts';
import { pieData } from '../datasource.ts';

function App() {

  const chartRef = React.useRef<AccumulationChartComponent>(null);
  let click= ()=>{
    const newData = [
      { x: 'Jan', y: 3 },
      { x: 'Feb', y: 3.5 },
      { x: 'Mar', y: 7 },
      { x: 'Aug', y: 25 },
      { x: 'Sep', y: 21 },
      { x: 'Oct', y: 15 },
    ];

    if (chartRef.current) {
      (chartRef.current.series[0] as AccumulationSeries).setData(newData, 500);
    }
  }

  return <div><AccumulationChartComponent id='charts' ref={chartRef} legendSettings={{visible:false}} >
      <Inject services={[AccumulationAnnotation, AccumulationLegend]} />
      <AccumulationSeriesCollectionDirective>
        <AccumulationSeriesDirective dataSource={pieData} xName='x' yName='y' legendShape='Rectangle'>
        </AccumulationSeriesDirective>
      </AccumulationSeriesCollectionDirective>
    </AccumulationChartComponent>
    <button id='add' onClick={click}>click</button>
    </div>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));