Search results

Stacking Series Total in React Chart component

25 Jan 2023 / 2 minutes to read

By using the annotation, you can show any element in desired view.

To show the total value in data points, follow the given steps:

Step 1:

Define annotation for each x point in chart, now change the annotation value in chart by using the annotationRender event. In this event, assign the stacked value of the last series to the annotation to show the total value of the stacking series.

Source
Preview
index.jsx
index.tsx
Copied to clipboard
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, AnnotationsDirective, AnnotationDirective, Legend, Category, Tooltip, DataLabel, StackingColumnSeries, ChartAnnotation } from '@syncfusion/ej2-react-charts';
function App() {
    const data = [
        { x: 'Jamesh', y0: 5, y1: 4, y2: 5 },
        { x: 'Michael', y0: 4, y1: 3, y2: 4 },
        { x: 'John', y0: 5, y1: 4, y2: 2 }
    ];
    const primaryxAxis = { valueType: 'Category' };
    const primaryyAxis = { minimum: 0, maximum: 15, interval: 5 };
    const marker1 = { visible: true, dataLabel: { position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } };
    const marker2 = { visible: true, dataLabel: { position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } };
    const marker3 = { visible: true, dataLabel: { position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } };
    const template1 = chartTemplate1;
    function chartTemplate1() {
        return (<div className='template'>
      <div style={{ color: 'gray', fontSize: '11px', fontWeight: 'bold', fill: 'gray' }}>
        <span>11</span>
      </div>
    </div>);
    }
    ;
    const template2 = chartTemplate2;
    function chartTemplate2() {
        return (<div className='template'>
      <div style={{ color: 'gray', fontSize: '11px', fontWeight: 'bold', fill: 'gray' }}>
        <span>10</span>
      </div>
    </div>);
    }
    ;
    const template3 = chartTemplate3;
    function chartTemplate3() {
        return (<div className='template'>
      <div style={{ color: 'gray', fontSize: '11px', fontWeight: 'bold', fill: 'gray' }}>
        <span>12</span>
      </div>
    </div>);
    }
    ;
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryxAxis} title='Fruit Consumption'>
      <Inject services={[StackingColumnSeries, Legend, Tooltip, DataLabel, Category, ChartAnnotation]}/>
      <AnnotationsDirective>
        <AnnotationDirective content={template1} coordinateUnits='Point' x='Jamesh' y={14.5}>
        </AnnotationDirective>
        <AnnotationDirective content={template2} coordinateUnits='Point' x='Michael' y={12}>
        </AnnotationDirective>
        <AnnotationDirective content={template3} coordinateUnits='Point' x='John' y={12}>
        </AnnotationDirective>
      </AnnotationsDirective>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} type='StackingColumn' xName='x' yName='y0' name='Apple' marker={marker1}></SeriesDirective>
        <SeriesDirective dataSource={data} type='StackingColumn' xName='x' yName='y1' name='Orange' marker={marker2}></SeriesDirective>
        <SeriesDirective dataSource={data} type='StackingColumn' xName='x' yName='y2' name='Grapes' marker={marker3}></SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
Copied to clipboard
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,AnnotationsDirective, AnnotationDirective,
         Legend,  Category, Tooltip, DataLabel, StackingColumnSeries, IAnnotationRenderEventArgs, ChartAnnotation ,AxisModel}
from'@syncfusion/ej2-react-charts';

function App() {

  const data: any[] = [
    { x: 'Jamesh', y0: 5, y1: 4, y2: 5 },
    { x: 'Michael', y0: 4, y1: 3, y2: 4 },
    { x: 'John', y0: 5, y1: 4, y2: 2 }
  ];
  const primaryxAxis: AxisModel = { valueType: 'Category' };
  const primaryyAxis: AxisModel = { minimum: 0, maximum: 15, interval: 5 };
  const marker1 = { visible: true, dataLabel: { position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } };
  const marker2 = { visible: true, dataLabel: { position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } };
  const marker3 = { visible: true, dataLabel: { position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } };
  const template1: any = chartTemplate1;
  function chartTemplate1(): any {
    return (<div className='template'>
      <div style={{ color: 'gray',fontSize:'11px',fontWeight:'bold',fill: 'gray'}}>
        <span>11</span>
      </div>
    </div>);
  };
  const template2: any = chartTemplate2;
  function chartTemplate2(): any {
    return (<div className='template'>
      <div style={{ color: 'gray',fontSize:'11px',fontWeight:'bold',fill: 'gray'}}>
        <span>10</span>
      </div>
    </div>);
  };
  const template3: any = chartTemplate3;
  function chartTemplate3(): any {
    return (<div className='template'>
      <div style={{ color: 'gray',fontSize:'11px',fontWeight:'bold',fill: 'gray'}}>
        <span>12</span>
      </div>
    </div>);
  };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryxAxis}
      title='Fruit Consumption' >
      <Inject services={[StackingColumnSeries, Legend, Tooltip, DataLabel, Category, ChartAnnotation]} />
      <AnnotationsDirective>
        <AnnotationDirective content={template1} coordinateUnits='Point' x='Jamesh' y={14.5}>
        </AnnotationDirective>
        <AnnotationDirective content={template2} coordinateUnits='Point' x='Michael' y={12}>
        </AnnotationDirective>
        <AnnotationDirective content={template3} coordinateUnits='Point' x='John' y={12}>
        </AnnotationDirective>
      </AnnotationsDirective>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} type='StackingColumn' xName='x' yName='y0' name='Apple'
          marker={marker1} ></SeriesDirective>
        <SeriesDirective dataSource={data} type='StackingColumn' xName='x' yName='y1' name='Orange'
          marker={marker2}></SeriesDirective>
        <SeriesDirective dataSource={data} type='StackingColumn' xName='x' yName='y2' name='Grapes'
          marker={marker3} ></SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

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