How To

Create a live chart

You can update a chart with live data by using the set interval.

To update live data in a chart, follow the given steps:

Step 1:

Initialize the chart with series.

Step 2:

Update the data to series, and refresh the chart at specified interval by using the set interval.

To refresh the chart, invoke the refresh method.

Source
Preview
index.tsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
         Legend, Category, Tooltip, DataLabel, LineSeries, ILoadedEventArgs}
from'@syncfusion/ej2-react-charts';
import { getElement } from '@syncfusion/ej2-charts';

class App extends React.Component<{}, {}>{

  private chart: ChartComponent;
  public series1: Object[] = [];
  public value: number = 10;
  public intervalId: any;
  public setTimeoutValue: number;
  public i: number = 0;
  public loaded(args: ILoadedEventArgs): void {
    this.setTimeoutValue = 100;
    this.intervalId = setInterval(
      () => {
        let i: number;
        if (getElement('charts') === null) {
          clearInterval(this.intervalId);
        } else {
          if (Math.random() > .5) {
            if (this.value < 25) {
              this.value += Math.random() * 2.0;
            } else {
              this.value -= 2.0;
            }
          }
          this.i++;
          this.series1.push({ x: this.i, y: this.value });
          this.series1.shift();
          args.chart.series[0].dataSource = this.series1;
          args.chart.refresh();
        }
      },
      this.setTimeoutValue);
  }
  constructor() {
    super()
    for (; this.i < 100; this.i++) {
      if (Math.random() > .5) {
        if (this.value < 25) {
          this.value += Math.random() * 2.0;
        } else {
          this.value -= 2.0;
        }
      }
      this.series1[this.i] = { x: this.i, y: this.value };

    }
  };

  render() {
    return <ChartComponent id='charts'
      primaryXAxis={{ majorGridLines: { width: 0 } }}
      primaryYAxis={{ minimum: 0, maximum: 50 }}
      loaded={this.loaded.bind(this)}>
      <Inject services={[LineSeries]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={this.series1} xName='x' yName='y' type='Line'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>
  }

};
ReactDOM.render(<App />, document.getElementById('charts'));

Prevent the data label when the data value is 0

To prevent the chart data label when the data value is 0, follow the given steps:

Step 1:

Get the point value and check whether the args.point.y value is zero or not by using the textRender event. If the value is zero, then set the args.cancel to true.

The output will appear as follows,

Source
Preview
index.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
         Legend, DateTime, Tooltip, DataLabel, LineSeries,  ITextRenderEventArgs,AxisModel}
from'@syncfusion/ej2-react-charts';
import {  EmitType } from '@syncfusion/ej2-base'

 class App extends React.Component<{}, {}> {

  public data: any[] = [
    { x: new Date(2005, 0, 1), y: 21 }, { x: new Date(2006, 0, 1), y: 24 },
    { x: new Date(2007, 0, 1), y: 0 }, { x: new Date(2008, 0, 1), y: 38 },
    { x: new Date(2009, 0, 1), y: 54 }, { x: new Date(2010, 0, 1), y: 57 },
  ];
  public primaryxAxis: AxisModel = { valueType: 'DateTime' };
  public primaryyAxis: AxisModel = { minimum: 0, maximum: 100, interval: 10 };
  public marker = { visible: true, dataLabel: { visible: true } };
  public textRender: EmitType<ITextRenderEventArgs> = (args: ITextRenderEventArgs): void => {
    if (args.text === '0') {
      args.cancel = args.point.y === 0;
    }
  };

  render() {
    return <ChartComponent id='charts'
      primaryXAxis={this.primaryxAxis}
      primaryYAxis={this.primaryyAxis}
      title='Inflation - Consumer Price'
      textRender={this.textRender}>
      <Inject services={[LineSeries, Legend, Tooltip, DataLabel, DateTime]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={this.data} xName='x' yName='y' width={2} name='Germany'
          type='Line' marker={this.marker}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>
  }

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

Format the tooltip value

Using tooltipRender event, you can able to format the datetime value instead of rendered value.

To format the datetime value,please follow the steps below

Step 1:

By using tooltipRender event we can able to get the current point x value. Using this value to format the tooltip by using formatDate method.

The output will appear as follows,

Source
Preview
index.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
         Legend, DateTime, Tooltip, DataLabel, LineSeries, ITextRenderEventArgs, ITooltipRenderEventArgs,AxisModel,TooltipSettingsModel }
from'@syncfusion/ej2-react-charts';
import { Internationalization } from '@syncfusion/ej2-base';

class App extends React.Component<{}, {}> {

  public data: any[] = [
    { x: new Date(2005, 0, 1), y: 21 }, { x: new Date(2006, 0, 1), y: 24 },
    { x: new Date(2007, 0, 1), y: 30 }, { x: new Date(2008, 0, 1), y: 38 },
    { x: new Date(2009, 0, 1), y: 54 }, { x: new Date(2010, 0, 1), y: 57 },
  ];
  public primaryxAxis: AxisModel = { valueType: 'DateTime' };
  public marker = { visible: true, height: 10, width: 10, dataLabel: { visible: true } };
  public tooltip: TooltipSettingsModel = { enable: true };
  public tooltipRender = (args: ITooltipRenderEventArgs) => {
    let intl: Internationalization = new Internationalization();
    let formattedString: string = intl.formatDate(new Date(args.point.x), { skeleton: 'yMd' });
    args.text = formattedString;
  };

  render() {
    return <ChartComponent id='charts'
      primaryXAxis={this.primaryxAxis}
      title='Inflation - Consumer Price'
      tooltipRender={this.tooltipRender}
      tooltip={this.tooltip}>
      <Inject services={[LineSeries, Legend, Tooltip, DataLabel, DateTime]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={this.data} xName='x' yName='y' width={2} name='Germany'
          type='Line' marker={this.marker}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>
  }

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

Add or remove a series from the chart dynamically

You can add or remove the chart series dynamically by using the addSeries or removeSeries method.

To add or remove the series dynamically, follow the given steps:

Step 1:

To add a new series to chart dynamically, pass the series value to the addSeries method.

To remove the new series from chart dynamically, pass the series index to the removeSeries method.

Source
Preview
index.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject,
ColumnSeries, Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, LineSeries,  Selection}
from'@syncfusion/ej2-react-charts';

class App extends React.Component<{}, {}>{

  public data: any[] = [{ x: 'John', y: 10000 },
  { x: 'Jake', y: 12000 },
  { x: 'Peter', y: 18000 },
  { x: 'James', y: 11000 },
  ];
  public chartInstance: ChartComponent;
  public add() {
    this.chartInstance.addSeries([{
      type: 'Column',
      dataSource: [{ x: 'John', y: 11000 }, { x: 'Jake', y: 16000 }, { x: 'Peter', y: 19000 },
      { x: 'James', y: 12000 }, { x: 'Mary', y: 10700 }],
      xName: 'x', width: 2,
      yName: 'y'
    }]);
  };
  public remove() {
    this.chartInstance.removeSeries(1);
  };

  render() {
    return (<div>
      <ButtonComponent value='add' cssClass='e-flat' onClick={this.add.bind(this)}>add</ButtonComponent>
      <ButtonComponent value='remove' cssClass='e-flat' onClick={this.remove.bind(this)}>remove</ButtonComponent>
      <ChartComponent id='charts' ref={chart => this.chartInstance = chart} primaryXAxis={{ valueType: 'Category' }}
        title='Sales Comparision'>
        <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, LineSeries, Category]} />
        <SeriesCollectionDirective>
          <SeriesDirective dataSource={this.data} xName='x' yName='y' type='Column' name='Sales'>
          </SeriesDirective>
        </SeriesCollectionDirective>
      </ChartComponent> </div>)
  }

};
ReactDOM.render(<App />, document.getElementById('charts'));

Customize the series points by using patterns

You can customize the series points by using the pointColorMapping property.

To customize the series point colors, follow the given steps:

Step 1:

Customize the point colors to set the color value by using the pointColorMapping property.

Source
Preview
index.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,AxisModel,CornerRadiusModel,
         Legend,  Category, Tooltip, DataLabel, ColumnSeries, IPointRenderEventArgs}
from'@syncfusion/ej2-react-charts';

class App extends React.Component<{}, {}> {

  public data: any[] = [
    { x: 'BGD', y: 106, text: 'Bangaladesh', color: 'url(#chess)' },
    { x: 'BTN', y: 103, text: 'Bhutn', color: 'url(#cross)' },
    { x: 'NPL', y: 198, text: 'Nepal', color: 'url(#circle)' },
    { x: 'THA', y: 189, text: 'Thiland', color: 'url(#rectangle)' },
    { x: 'MYS', y: 250, text: 'Malaysia', color: 'url(#line)' }
  ];
  public primaryxAxis: AxisModel = { valueType: 'Category' };
  public primaryyAxis: AxisModel = { minimum: 0, maximum: 300, interval: 50 };
  public cornerradius: CornerRadiusModel = { bottomLeft: 10, bottomRight: 10, topLeft: 10, topRight: 10 };

  render() {
    return <ChartComponent id='charts'
      primaryXAxis={this.primaryxAxis}
      primaryYAxis={this.primaryxAxis}
      title='Tiger Population - 2016'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={this.data} xName='x' yName='y' width={2} name='Tiger' pointColorMapping='color'
          type='Column' cornerRadius={this.cornerradius} >
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>
  }

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

Show the total value for stacking series in data label

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.tsx
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';

class App extends React.Component<{}, {}> {

  public 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 }
  ];
  public primaryxAxis: AxisModel = { valueType: 'Category' };
  public primaryyAxis: AxisModel = { minimum: 0, maximum: 15, interval: 5 };
  public marker1 = { visible: true, dataLabel: { position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } };
  public marker2 = { visible: true, dataLabel: { position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } };
  public marker3 = { visible: true, dataLabel: { position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } };
  public template1: any = this.chartTemplate1;
  public chartTemplate1(): any {
    return (<div className='template'>
      <div style={{ color: 'gray',fontSize:'11px',fontWeight:'bold',fill: 'gray'}}>
        <span>11</span>
      </div>
    </div>);
  };
  public template2: any = this.chartTemplate2;
  public chartTemplate2(): any {
    return (<div className='template'>
      <div style={{ color: 'gray',fontSize:'11px',fontWeight:'bold',fill: 'gray'}}>
        <span>10</span>
      </div>
    </div>);
  };
  public template3: any = this.chartTemplate3;
  public chartTemplate3(): any {
    return (<div className='template'>
      <div style={{ color: 'gray',fontSize:'11px',fontWeight:'bold',fill: 'gray'}}>
        <span>12</span>
      </div>
    </div>);
  };

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

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

Customize the marker with different shape

By using the pointRender, you can customize the marker shape.

To Customize the marker shape, follow the given steps:

Step 1:

Customize the marker shape in each data point by using the pointRender event. Using this event, you can set the shape value to the argument.

Source
Preview
index.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, AxisModel,
         Legend,  Category, Tooltip, DataLabel, LineSeries, Marker, IPointRenderEventArgs}
from'@syncfusion/ej2-react-charts';
import { EmitType} from '@syncfusion/ej2-base';

class App extends React.Component<{}, {}> {

  public data: any[] = [
    { x: 'WW', y: 12, text: 'World Wide' },
    { x: 'EU', y: 5, text: 'Europe' },
    { x: 'APAC', y: 15, text: 'Pacific' },
    { x: 'LATAM', y: 6.4, text: 'Latin' },
    { x: 'MEA', y: 30, text: 'Africa' },
    { x: 'NA', y: 25.3, text: 'America' }
  ];
  public pointRender: EmitType<IPointRenderEventArgs> = (args: IPointRenderEventArgs): void => {
    let shapes: string[] = ['Diamond', 'Circle', 'Rectangle', 'Line', 'Triangle', 'Rectangle'];
    args.shape = shapes[args.point.index];
  };
  public primaryxAxis: AxisModel = { valueType: 'Category' };
  public primaryyAxis: AxisModel = { minimum: 0, maximum: 60, interval: 15 };
  public marker = {
    visible: true, width: 10, height: 10,
    shape: 'Diamond'
  };

  render() {
    return <ChartComponent id='charts'
      primaryXAxis={this.primaryxAxis}
      primaryYAxis={this.primaryyAxis}
      title='FB Penetration of Internet Audience'
      pointRender={this.pointRender}>
      <Inject services={[LineSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={this.data} xName='x' yName='y' width={2} name='December 2007'
          type='Line' marker={this.marker} >
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>
  }

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

Customize each shape in legend

By using the legendRender, you can customize the legend shape.

To Customize the legend shape, follow the given steps:

Step 1:

Set the shape value for each legend using args.shape in legendRender event.

Source
Preview
index.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, AxisModel,
         Legend,  Category, Tooltip, DataLabel, StepAreaSeries , ILegendRenderEventArgs }
from'@syncfusion/ej2-react-charts';
import { EmitType} from '@syncfusion/ej2-base';

class App extends React.Component<{}, {}> {

  public data: any[] = [
    { x: 2000, y: 416 }, { x: 2001, y: 490 },
    { x: 2002, y: 470 }, { x: 2003, y: 500 },
    { x: 2004, y: 449 }, { x: 2005, y: 470 },
    { x: 2006, y: 437 }, { x: 2007, y: 458 }
  ];
  public data1: any[] = [
    { x: 2000, y: 180 }, { x: 2001, y: 240 },
    { x: 2002, y: 370 }, { x: 2003, y: 200 },
    { x: 2004, y: 229 }, { x: 2005, y: 210 },
    { x: 2006, y: 337 }, { x: 2007, y: 258 }
  ];
  public legendRender: EmitType<ILegendRenderEventArgs> = (args: ILegendRenderEventArgs): void => {
    if (args.text === 'Renewable') {
      args.shape = 'Circle';
    } else if (args.text === 'Non-Renewable') {
      args.shape = 'Triangle';
    }
  };
  public primaryxAxis: AxisModel = { valueType: 'Double' };
  public primaryyAxis: AxisModel = { valueType: 'Double' };

  render() {
    return <ChartComponent id='charts'
      primaryXAxis={this.primaryxAxis}
      primaryYAxis={this.primaryyAxis}
      title='FB Penetration of Internet Audience'
      legendRender={this.legendRender}>
      <Inject services={[StepAreaSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={this.data} type='StepArea' xName='x' yName='y' width={2} name='Renewable'>
        </SeriesDirective>
        <SeriesDirective dataSource={this.data1} type='StepArea' xName='x' yName='y' width={2} name='Non-Renewable' >
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>
  }

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

Create a table in tooltip

You can show the tooltip as table by using template property in tooltip.

Follow the given steps to show the table tooltip,

Step 1:

Initialize the tooltip template div as shown in the following html page,

    <div id='templateWrap'>
        <table style="width:100%;  border: 1px solid black;">
        <tr><th colspan="2" bgcolor="#00FFFF">Female</th></tr>
        <tr><td bgcolor="#00FFFF">${x}:</td><td bgcolor="#00FFFF">${y}</td></tr>
        </table>
    </div>

Step 2:

To show that tooltip template, set the element id to the template property in tooltip.

Source
Preview
index.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject, StripLine,
ColumnSeries, Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, LineSeries,  Selection, StripLinesDirective, StripLineDirective,
AxisModel, TooltipSettingsModel}
from'@syncfusion/ej2-react-charts';

class App extends React.Component<{}, {}> {

  public data: any[] = [
    { x: 1, y: 20 }, { x: 2, y: 22 }, { x: 3, y: 10 }, { x: 4, y: 12 }, { x: 5, y: 5 },
    { x: 6, y: 15 }, { x: 7, y: 6 }, { x: 8, y: 12 }, { x: 9, y: 34 }, { x: 10, y: 7 },
  ];
  public primaryxAxis: AxisModel = { title: 'Overs' };
  public primaryyAxis: AxisModel = { title: 'Runs' };
  public template:any =this.chartTemplate;
  public tooltip: TooltipSettingsModel = {
    enable: true,
    template: this.template
  };
  public chartTemplate(args:any){
   return (<div id="templateWrap">
      <table style={{width:'100%',margin: '5px', border: '1px solid black' ,backgroundColor:'#00FFFF'}}>
        <tbody><tr><th colSpan={2}>Female</th></tr>
          <tr><td>{args.x}</td><td>:</td><td>{args.y}</td></tr>
        </tbody>
      </table>
    </div>);
  }
  public marker = { visible: true };

  render() {
    return <ChartComponent id='charts'
      primaryXAxis={this.primaryxAxis}
      primaryYAxis={this.primaryyAxis}
      title='India Vs Australia 1st match'
      tooltip={this.tooltip}>
      <Inject services={[LineSeries, Legend, Tooltip, DataLabel, Category, StripLine]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={this.data} xName='x' yName='y' type='Line' marker={this.marker}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>
  }

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

By using annotation, you can place any html elements to chart in a desired view.

To create footer and watermark for chart, follow the given steps:

Step 1:

Initialize the custom elements by using the annotation property.

By using the content option of the annotation object, you can specify the id of the element that needs to be displayed in the chart area as follow,

Source
Preview
index.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ChartAnnotation, AnnotationsDirective, AnnotationDirective,
         Legend, Category, Tooltip, DataLabel, SplineSeries ,AxisModel}
from'@syncfusion/ej2-react-charts';

class App extends React.Component<{}, {}> {

  public data: any[] = [
    { x: 'Sun', y: 15 }, { x: 'Mon', y: 5 },
    { x: 'Tue', y: 32 }, { x: 'Wed', y: 15 },
    { x: 'Thu', y: 29 }, { x: 'Fri', y: 24 },
    { x: 'Sat', y: 18 }
  ];
  public primaryxAxis: AxisModel = { valueType: 'Category' };
  public primaryyAxis: AxisModel = { minimum: 0, maximum: 60, interval: 20 };
  public marker = { visible: true };
  public animation = { enable: true, duration: 1200, delay: 100 };
  public content: any = this.chartTemplate;
  public chartTemplate(): any {
    return (<div className='template'>
      <a href="https://www.syncfusion.com" target="_blank">www.syncfusion.com</a>
    </div>);
  }

  render() {
    return <ChartComponent id='charts'
      primaryXAxis={this.primaryxAxis}
      primaryYAxis={this.primaryyAxis}
      title='Olympic Medals'>
      <Inject services={[SplineSeries, Legend, Tooltip, DataLabel, Category, ChartAnnotation]} />
      <AnnotationsDirective>
        <AnnotationDirective content={this.content} coordinateUnits='Point' x='Wed' y={20}>
        </AnnotationDirective>
        <AnnotationDirective content={this.content} coordinateUnits='Pixel' x={440} y={600}>
        </AnnotationDirective>
      </AnnotationsDirective>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={this.data} xName='x' yName='y' name='Max Temp' marker={this.marker}
          animation={this.animation} type='Spline'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>
  }

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

Mark a threshold in chart

You can mark a threshold in chart by using the stripline.

To mark a threshold in chart, follow the given steps:

Step 1:

By using the start and end properties of striplines object in vertical axis, you can mark the threshold for y values of the series.

Source
Preview
index.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject, StripLine,AxisModel,
ColumnSeries, Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, LineSeries,  Selection, StripLinesDirective, StripLineDirective}
from'@syncfusion/ej2-react-charts';

class App extends React.Component<{}, {}> {

  public data: any[] = [
    { x: 1, y: 20 }, { x: 2, y: 22 }, { x: 3, y: 0 }, { x: 4, y: 12 }, { x: 5, y: 5 },
    { x: 6, y: 15 }, { x: 7, y: 6 }, { x: 8, y: 12 }, { x: 9, y: 34 }, { x: 10, y: 7 },
  ];
  public primaryxAxis: AxisModel = { title: 'Overs' };
  public primaryyAxis: AxisModel = { title: 'Runs', stripLines: [{ start: 15, end: 15.1, color: '#ff512f', visible: true }] };
  public marker = { visible: true };

  render() {
    return <ChartComponent id='charts'
      primaryXAxis={this.primaryxAxis}
      primaryYAxis={this.primaryyAxis}
      title='India Vs Australia 1st match' width='650' height='350'>
      <Inject services={[LineSeries, Legend, Tooltip, DataLabel, Category, StripLine]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={this.data} xName='x' yName='y' type='Line' Marker={this.marker}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>
  }

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

Show percentage value in pie tooltip

By using the tooltipRender event, you can show the percentage value for each point of pie series in tooltip.

To show the percentage value in pie tooltip, follow the given steps:

Step 1:

By using the tooltipRender event, you can get the args.point.y and args.series.sumOfPoints values. You can use these values to calculate the percentage value for each point of pie series. To display the percentage value in tooltip, use the args.content property.

The output will appear as follows,

Source
Preview
index.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective,
  IAccTooltipRenderEventArgs, Inject, AccumulationDataLabel, AccumulationTooltip, PieSeries,
  AccumulationDataLabelSettingsModel,TooltipSettingsModel
} from '@syncfusion/ej2-react-charts';
import{ EmitType } from '@syncfusion/ej2-base';

class App extends React.Component<{}, {}> {

  public data: any[] = [
    { 'x': 'Chrome', y: 37 }, { 'x': 'UC Browser', y: 17 },
    { 'x': 'iPhone', y: 19 }, { 'x': 'Others', y: 4, text: '4' },
    { 'x': 'Opera', y: 11 }
  ];
  public datalabel: AccumulationDataLabelSettingsModel = { visible: true, position: 'Inside', name: 'text' };
  public tooltip: TooltipSettingsModel = { enable: true };
  public tooltipRender: EmitType<IAccTooltipRenderEventArgs> = (args: IAccTooltipRenderEventArgs): void => {
    let value: any = args.point.y / args.series.sumOfPoints * 100;
    args.text = args.point.x + '' + Math.ceil(value) + '' + '%';
  };

  render() {
    return <AccumulationChartComponent id='charts' tooltip={this.tooltip} title='Mobile Browser Statistics'
      tooltipRender={this.tooltipRender}>
      <Inject services={[AccumulationTooltip, PieSeries, AccumulationDataLabel]} />
      <AccumulationSeriesCollectionDirective>
        <AccumulationSeriesDirective dataSource={this.data} xName='x' yName='y' radius='70%' dataLabel={this.datalabel}>
        </AccumulationSeriesDirective>
      </AccumulationSeriesCollectionDirective>
    </AccumulationChartComponent>
  }

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

Bind colors for each data label template from the data source

You can bind text and interior information for a point from dataSource other than x and y value. To change color for the background in the datalabel template, you can use ${point.text}. To use point.text, you have to bind the property from dataSource to name in the datalabel options.

Follow the given steps to show the table tooltip,

Step 1:

Initialize the datalabel template div as shown in the following html page,

    <script id="index" type="text/x-template">
    <div id='templateWrap' style="background-color: ${point.text}; border-radius: 3px;"><span>${point.y}</span></div>
    </script>

Step 2:

To show that datalabel template, set the element id to the template property in datalabel.

Source
Preview
index.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject, StripLine,
ColumnSeries, Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, LineSeries,  Selection, StripLinesDirective, StripLineDirective}
from'@syncfusion/ej2-react-charts';

class App extends React.Component<{}, {}> {

  public data: any[] = [
    { x: 10, y: 7000, color: 'red' },
    { x: 20, y: 1000, color: 'yellow' },
    { x: 30, y: 12000, color: 'orange' },
    { x: 40, y: 14000, color: 'skyblue' },
    { x: 50, y: 11000, color: 'blue' },
    { x: 60, y: 5000, color: 'green' },
    { x: 70, y: 7300, color: 'pink' },
    { x: 80, y: 9000, color: 'white' },
    { x: 90, y: 12000, color: 'magenta' },
    { x: 100, y: 14000, color: 'purple' },
    { x: 110, y: 11000, color: 'teal' },
    { x: 120, y: 5000, color: 'gray' },
  ];
  public template:any =this.chartTemplate;
  public marker = { visible: true, dataLabel: { visible: true, name: 'color', template: this.template } };
  public chartTemplate(args:any){
        return (<div id="templateWrap" style={{ border:'1px solid black', backgroundColor:'red', padding:'3px 3px 3px 3px'}}>
          <div>{args.point.x}</div>
          <div>{args.point.y}</div>
        </div>);
  }
  render() {
    return <ChartComponent id='charts'>
      <Inject services={[LineSeries, Legend, Tooltip, DataLabel, Category, StripLine]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={this.data} xName='x' yName='y' type='Line' marker={this.marker}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>
  }

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


{% endraw %}