Feature Modules in React Chart

25 Aug 202614 minutes to read

Chart features in the Syncfusion React Chart are opt-in. To use a specific series, axis, indicator, or feature such as tooltip, legend, or zoom, the corresponding module must be injected. Modules keep the base bundle small and let you include only what your chart needs.

Injecting modules

Import the modules you need from @syncfusion/ej2-react-charts and register them on the Chart class using the static Inject method. Place the Inject call once, outside the component function, so it runs when the module loads.

import * as React from 'react';
import { createRoot } from 'react-dom/client';
import {
  ChartComponent,
  Inject,
  SeriesCollectionDirective,
  SeriesDirective,
  Category,
  LineSeries,
  Legend,
} from '@syncfusion/ej2-react-charts';

const data = [
  { month: 'Jan', sales: 35 },
  { month: 'Feb', sales: 28 },
  { month: 'Mar', sales: 34 },
  { month: 'Apr', sales: 32 },
  { month: 'May', sales: 40 },
  { month: 'Jun', sales: 32 },
  { month: 'Jul', sales: 35 },
  { month: 'Aug', sales: 55 },
  { month: 'Sep', sales: 38 },
  { month: 'Oct', sales: 30 },
  { month: 'Nov', sales: 25 },
  { month: 'Dec', sales: 32 },
];
const xAxisCategory = { valueType: 'Category' };

function App() {
  return (
    <ChartComponent id="charts" primaryXAxis={xAxisCategory}>
      <Inject services={[LineSeries, Category, Legend]} />
      <SeriesCollectionDirective>
        <SeriesDirective
          dataSource={data}
          xName="month"
          yName="sales"
          name="Sales"
          type="Line"
        />
      </SeriesCollectionDirective>
    </ChartComponent>
  );
}
export default App;
const root = createRoot(document.getElementById('charts'));
root.render(<App />);
import * as React from "react";
import { createRoot } from 'react-dom/client';
import {  ChartComponent, Inject, SeriesCollectionDirective, SeriesDirective, Category, LineSeries } from '@syncfusion/ej2-react-charts';

const data: Object[] = [
    { month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
    { month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
    { month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
    { month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 },
    { month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
    { month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
];
const xAxisCategory = { valueType: 'Category' };

function App() {
  return <ChartComponent id="charts" primaryXAxis={xAxisCategory}>
    <Inject services={[LineSeries, Category]} />
    <SeriesCollectionDirective>
      <SeriesDirective dataSource={data} xName='month' yName='sales' name='Sales' type='Line'/>
    </SeriesCollectionDirective>
  </ChartComponent>
}
export default App;
const root = createRoot(document.getElementById('charts'));
root.render(<App />);

Tip: Importing only the modules you use enables tree-shaking and reduces the final bundle size.

The available chart modules are listed below.

Axis Type Feature Modules

Module Description
Category Inject this module to use the category axis type to visualize category (string) values.
DateTime Inject this module to use the date time axis type to visualize datetime values.
Logarithmic Inject this module to use the log axis type to visualize logarithmic values.
DateTimeCategory Inject this module to use the date time category axis type to visualize datetime category values.

Series Type Feature Modules

Module Description
LineSeries Inject this module to use the line type series in the chart.
StepLineSeries Inject this module to use the step line type series in the chart.
StackingLineSeries Inject this module to use the stacking line type series in the chart.
MultiColoredLineSeries Inject this module to use the multi-colored line type series in the chart.
SplineSeries Inject this module to use the spline type series in the chart.
AreaSeries Inject this module to use the area type series in the chart.
RangeAreaSeries Inject this module to use the range area type series in the chart.
RangeStepAreaSeries Inject this module to use the range step area type series in the chart.
SplineRangeAreaSeries Inject this module to use the spline range area type series in the chart.
StackingAreaSeries Inject this module to use the stacking area type series in the chart.
StackingStepAreaSeries Inject this module to use the stacking step area type series in the chart.
StepAreaSeries Inject this module to use the step area type series in the chart.
SplineAreaSeries Inject this module to use the spline area type series in the chart.
MultiColoredAreaSeries Inject this module to use the multi-colored area type series in the chart.
ColumnSeries Inject this module to use the column type series in the chart.
RangeColumnSeries Inject this module to use the range column type series in the chart.
StackingColumnSeries Inject this module to use the stacking column type series in the chart.
BarSeries Inject this module to use the bar type series in the chart.
StackingBarSeries Inject this module to use the stacking bar type series in the chart.
ScatterSeries Inject this module to use the scatter type series in the chart.
BubbleSeries Inject this module to use the bubble type series in the chart.
PolarSeries Inject this module to use the polar type series in the chart.
RadarSeries Inject this module to use the radar type series in the chart.
HiloSeries Inject this module to use the hilo type series in the chart.
HiloOpenCloseSeries Inject this module to use the hilo open close type series in the chart.
CandleSeries Inject this module to use the candle type series in the chart.
BoxAndWhiskerSeries Inject this module to use the box and whisker type series in the chart.
WaterfallSeries Inject this module to use the waterfall type series in the chart.
HistogramSeries Inject this module to use the histogram type series in the chart.
ParetoSeries Inject this module to use the pareto type series in the chart.
ErrorBar Inject this module to use the error bar feature in series.

Indicator Type Feature Modules

Module Description
AccumulationDistributionIndicator Inject this module to use the accumulation distribution indicator.
AtrIndicator Inject this module to use the average true range (ATR) indicator.
BollingerBands Inject this module to use the bollinger band indicator.
EMAIndicator Inject this module to use the exponential moving average (EMA) indicator.
MomentumIndicator Inject this module to use the momentum indicator.
MACDIndicator Inject this module to use the moving average convergence divergence (MACD) indicator.
RsiIndicator Inject this module to use the relative strength index (RSI) indicator.
SmaIndicator Inject this module to use the simple moving average (SMA) indicator.
StochasticIndicator Inject this module to use the stochastic indicator.
TmaIndicator Inject this module to use the triangular moving average indicator.

Other Feature Modules

Module Description
StripLine Inject this module to use the strip line feature.
Trendlines Inject this module to use the trendline feature.
DataLabel Inject this module to use the data label feature.
ChartAnnotation Inject this module to use the annotation feature.
Legend Inject this module to use the legend feature.
Tooltip Inject this module to use the tooltip feature.
Zoom Inject this module to use the zooming and panning feature.
DataEditing Inject this module to use the data editing feature.
Crosshair Inject this module to use the crosshair feature.
Selection Inject this module to use the selection feature.
Highlight Inject this module to use the highlight feature.
Export Inject this module to use the export feature.
MultiLevelLabel Inject this module to use the multi-level label feature.

See also