Pareto Chart in React Chart

17 Aug 202624 minutes to read

Pareto

A Pareto chart displays the cumulative contribution of each category to a total, sorted in descending order. It combines a Column series (the per-category values) with a Line series (the cumulative percentage). The data is sorted automatically and a secondary value axis for the cumulative line is added by default.

Follow these steps to render a Pareto series:

Set the series type: Set the series type to Pareto in the series configuration. Map the category to xName and the numeric value to yName.
Inject the necessary modules: Add ParetoSeries, ColumnSeries, and LineSeries to the services array of the Inject component inside ChartComponent. This registers the functionality required to render a Pareto series.

index.jsx
index.tsx
datasource.jsx
datasource.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ParetoSeries, ColumnSeries, LineSeries, Legend, Category, Tooltip, DataLabel } from '@syncfusion/ej2-react-charts';
import { chartData } from './datasource';
function App() {
    const primaryxAxis = { title: 'Defects', valueType: 'Category' };
    const primaryyAxis = { title: 'Frequency', minimum: 0, maximum: 150, interval: 30 };
    const tooltipsettings = { enable: true };
    const marker = { visible: true, width: 10, height: 10 };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} tooltip={tooltipsettings} title='Defect vs Frequency'>
                    <Inject services={[ColumnSeries, LineSeries, ParetoSeries, Legend, Tooltip, Category, DataLabel]}/>
                    <SeriesCollectionDirective>
                    <SeriesDirective dataSource={chartData} xName='x' yName='y' name='Defect' type='Pareto' marker={marker}>
                        </SeriesDirective>
                    </SeriesCollectionDirective>
              </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
    AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ChartTheme,LegendSettingsModel,TooltipSettingsModel,ParetoSeries,ColumnSeries,LineSeries,
    Legend, Category, Tooltip, ILoadedEventArgs, DataLabel
} from '@syncfusion/ej2-react-charts';
import { chartData } from './datasource';

function App() {
    const primaryxAxis: AxisModel= {  title: 'Defects', valueType: 'Category' }  ;
    const primaryyAxis: AxisModel= {   title: 'Frequency', minimum: 0, maximum: 150,interval: 30 }  ;
    const tooltipsettings: TooltipSettingsModel={ enable: true };
    const marker={ visible: true, width: 10, height: 10};

        return <ChartComponent id='charts'
                primaryXAxis={ primaryxAxis }
                primaryYAxis={ primaryyAxis }
                tooltip={ tooltipsettings }
                title='Defect vs Frequency'>
                    <Inject services={[ColumnSeries, LineSeries, ParetoSeries, Legend, Tooltip, Category, DataLabel]} />
                    <SeriesCollectionDirective>
                    <SeriesDirective dataSource={chartData}  xName='x' yName='y' name='Defect' type='Pareto'
                        marker={ marker }>
                        </SeriesDirective>
                    </SeriesCollectionDirective>
              </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let chartData = [
    { x: 'Traffic',    y: 56 }, 
    { x: 'Child Care', y: 44.8 },
    { x: 'Transport',  y: 27.2 }, 
    { x: 'Weather',    y: 19.6 },
    { x: 'Emergency',  y: 6.6 }
];
export let chartData: Object[] = [
    { x: 'Traffic',    y: 56 }, 
    { x: 'Child Care', y: 44.8 },
    { x: 'Transport',  y: 27.2 }, 
    { x: 'Weather',    y: 19.6 },
    { x: 'Emergency',  y: 6.6 }
];

Binding data with series

You can bind data to the chart using the dataSource property within the series configuration. This allows you to connect a JSON dataset or remote data to your chart. To display the data correctly, map the fields from the data to the chart series xName and yName properties.

index.jsx
index.tsx
datasource.jsx
datasource.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ParetoSeries, ColumnSeries, LineSeries, Legend, Category, Tooltip, DataLabel } from '@syncfusion/ej2-react-charts';
import { chartData } from './datasource';
function App() {
    const primaryxAxis = { title: 'Defects', valueType: 'Category' };
    const primaryyAxis = { title: 'Frequency', minimum: 0, maximum: 150, interval: 30 };
    const tooltipsettings = { enable: true };
    const marker = { visible: true, width: 10, height: 10 };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} tooltip={tooltipsettings} title='Defect vs Frequency'>
                    <Inject services={[ColumnSeries, LineSeries, ParetoSeries, Legend, Tooltip, Category, DataLabel]}/>
                    <SeriesCollectionDirective>
                    <SeriesDirective dataSource={chartData} xName='x' yName='y' name='Defect' type='Pareto' marker={marker}>
                        </SeriesDirective>
                    </SeriesCollectionDirective>
              </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
    AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ChartTheme,LegendSettingsModel,TooltipSettingsModel,ParetoSeries,ColumnSeries,LineSeries,
    Legend, Category, Tooltip, ILoadedEventArgs, DataLabel
} from '@syncfusion/ej2-react-charts';
import { chartData } from './datasource';

function App() {
    const primaryxAxis: AxisModel= {  title: 'Defects', valueType: 'Category' }  ;
    const primaryyAxis: AxisModel= {   title: 'Frequency', minimum: 0, maximum: 150,interval: 30 }  ;
    const tooltipsettings: TooltipSettingsModel={ enable: true };
    const marker={ visible: true, width: 10, height: 10};

        return <ChartComponent id='charts'
                primaryXAxis={ primaryxAxis }
                primaryYAxis={ primaryyAxis }
                tooltip={ tooltipsettings }
                title='Defect vs Frequency'>
                    <Inject services={[ColumnSeries, LineSeries, ParetoSeries, Legend, Tooltip, Category, DataLabel]} />
                    <SeriesCollectionDirective>
                    <SeriesDirective dataSource={chartData}  xName='x' yName='y' name='Defect' type='Pareto'
                        marker={ marker }>
                        </SeriesDirective>
                    </SeriesCollectionDirective>
              </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let chartData = [
    { x: 'Traffic',    y: 56 }, 
    { x: 'Child Care', y: 44.8 },
    { x: 'Transport',  y: 27.2 }, 
    { x: 'Weather',    y: 19.6 },
    { x: 'Emergency',  y: 6.6 }
];
export let chartData: Object[] = [
    { x: 'Traffic',    y: 56 }, 
    { x: 'Child Care', y: 44.8 },
    { x: 'Transport',  y: 27.2 }, 
    { x: 'Weather',    y: 19.6 },
    { x: 'Emergency',  y: 6.6 }
];

Pareto customization

Customize the cumulative line’s appearance by passing a paretoOptions object to the series. The paretoOptions model supports the following properties:

Property	Type	Default	Description
`fill`	string	null	Color applied to the cumulative line.
`width`	number	`1`	Stroke width of the cumulative line, in pixels.
`dashArray`	string	`'0'`	SVG dash-array pattern (e.g., `'5 5'`).
`marker`	MarkerSettingsModel	`null`	Marker settings for the cumulative line.
`showAxis`	boolean	`true`	When `true`, a secondary value axis is rendered for the cumulative line.

The underlying column and line series can also be styled using the standard ColumnSeries and LineSeries properties.

Fill

Use the fill property to apply a color to the cumulative line.

index.jsx
index.tsx
datasource.jsx
datasource.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ParetoSeries, ColumnSeries, LineSeries, Legend, Category, Tooltip, DataLabel } from '@syncfusion/ej2-react-charts';
import { chartData } from './datasource';
function App() {
    const primaryxAxis = { title: 'Defects', valueType: 'Category' };
    const primaryyAxis = { title: 'Frequency', minimum: 0, maximum: 150, interval: 30 };
    const tooltipsettings = { enable: true };
    const marker = { visible: true, width: 10, height: 10 };
    const paretoOptions = {
        fill: 'red'
      }
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} tooltip={tooltipsettings} title='Defect vs Frequency'>
                    <Inject services={[ColumnSeries, LineSeries, ParetoSeries, Legend, Tooltip, Category, DataLabel]}/>
                    <SeriesCollectionDirective>
                    <SeriesDirective dataSource={chartData} xName='x' yName='y' name='Defect' type='Pareto' marker={marker} paretoOptions={paretoOptions}>
                        </SeriesDirective>
                    </SeriesCollectionDirective>
              </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
    AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ChartTheme,LegendSettingsModel,TooltipSettingsModel,ParetoSeries,ColumnSeries,LineSeries,
    Legend, Category, Tooltip, ILoadedEventArgs, DataLabel
} from '@syncfusion/ej2-react-charts';
import { chartData } from './datasource';

function App() {
    const primaryxAxis: AxisModel= {  title: 'Defects', valueType: 'Category' }  ;
    const primaryyAxis: AxisModel= {   title: 'Frequency', minimum: 0, maximum: 150,interval: 30 }  ;
    const tooltipsettings: TooltipSettingsModel={ enable: true };
    const marker={ visible: true, width: 10, height: 10};
    const paretoOptions: object = {
        fill: 'red'
      };
        return <ChartComponent id='charts'
                primaryXAxis={ primaryxAxis }
                primaryYAxis={ primaryyAxis }
                tooltip={ tooltipsettings }
                title='Defect vs Frequency'>
                    <Inject services={[ColumnSeries, LineSeries, ParetoSeries, Legend, Tooltip, Category, DataLabel]} />
                    <SeriesCollectionDirective>
                    <SeriesDirective dataSource={chartData}  xName='x' yName='y' name='Defect' type='Pareto'
                        marker={ marker } paretoOptions={paretoOptions}>
                        </SeriesDirective>
                    </SeriesCollectionDirective>
              </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let chartData = [
    { x: 'Button Defect',  y: 23 }, 
    { x: 'Pocket Defect',  y: 16 },
    { x: 'Collar Defect ', y: 10 }, 
    { x: 'Cuff Defect',    y: 7 },
    { x: 'Sleeve Defect',  y: 6 }, 
    { x: 'Other Defect',   y: 2 }
];
export let chartData: Object[] = [
    { x: 'Button Defect',  y: 23 }, 
    { x: 'Pocket Defect',  y: 16 },
    { x: 'Collar Defect ', y: 10 }, 
    { x: 'Cuff Defect',    y: 7 },
    { x: 'Sleeve Defect',  y: 6 }, 
    { x: 'Other Defect',   y: 2 }
];

Width

Use the width property to control the thickness of the cumulative line, in pixels.

index.jsx
index.tsx
datasource.jsx
datasource.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ParetoSeries, ColumnSeries, LineSeries, Legend, Category, Tooltip, DataLabel } from '@syncfusion/ej2-react-charts';
import { chartData } from './datasource';
function App() {
    const primaryxAxis = { title: 'Defects', valueType: 'Category' };
    const primaryyAxis = { title: 'Frequency', minimum: 0, maximum: 150, interval: 30 };
    const tooltipsettings = { enable: true };
    const marker = { visible: true, width: 10, height: 10 };
    const paretoOptions = {
      width: 4
      }
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} tooltip={tooltipsettings} title='Defect vs Frequency'>
                    <Inject services={[ColumnSeries, LineSeries, ParetoSeries, Legend, Tooltip, Category, DataLabel]}/>
                    <SeriesCollectionDirective>
                    <SeriesDirective dataSource={chartData} xName='x' yName='y' name='Defect' type='Pareto' marker={marker} paretoOptions={paretoOptions}>
                        </SeriesDirective>
                    </SeriesCollectionDirective>
              </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
    AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ChartTheme,LegendSettingsModel,TooltipSettingsModel,ParetoSeries,ColumnSeries,LineSeries,
    Legend, Category, Tooltip, ILoadedEventArgs, DataLabel
} from '@syncfusion/ej2-react-charts';
import { chartData } from './datasource';

function App() {
    const primaryxAxis: AxisModel= {  title: 'Defects', valueType: 'Category' }  ;
    const primaryyAxis: AxisModel= {   title: 'Frequency', minimum: 0, maximum: 150,interval: 30 }  ;
    const tooltipsettings: TooltipSettingsModel={ enable: true };
    const marker={ visible: true, width: 10, height: 10};
    const paretoOptions: object = {
        width: 4
      };
        return <ChartComponent id='charts'
                primaryXAxis={ primaryxAxis }
                primaryYAxis={ primaryyAxis }
                tooltip={ tooltipsettings }
                title='Defect vs Frequency'>
                    <Inject services={[ColumnSeries, LineSeries, ParetoSeries, Legend, Tooltip, Category, DataLabel]} />
                    <SeriesCollectionDirective>
                    <SeriesDirective dataSource={chartData}  xName='x' yName='y' name='Defect' type='Pareto'
                        marker={ marker } paretoOptions={paretoOptions}>
                        </SeriesDirective>
                    </SeriesCollectionDirective>
              </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let chartData = [
    { x: 'Button Defect',  y: 23 }, 
    { x: 'Pocket Defect',  y: 16 },
    { x: 'Collar Defect ', y: 10 }, 
    { x: 'Cuff Defect',    y: 7 },
    { x: 'Sleeve Defect',  y: 6 }, 
    { x: 'Other Defect',   y: 2 }
];
export let chartData: Object[] = [
    { x: 'Button Defect',  y: 23 }, 
    { x: 'Pocket Defect',  y: 16 },
    { x: 'Collar Defect ', y: 10 }, 
    { x: 'Cuff Defect',    y: 7 },
    { x: 'Sleeve Defect',  y: 6 }, 
    { x: 'Other Defect',   y: 2 }
];

Dash array

The dashArray property determines the pattern of dashes and gaps in the cumulative line.

index.jsx
index.tsx
datasource.jsx
datasource.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ParetoSeries, ColumnSeries, LineSeries, Legend, Category, Tooltip, DataLabel } from '@syncfusion/ej2-react-charts';
import { chartData } from './datasource';
function App() {
    const primaryxAxis = { title: 'Defects', valueType: 'Category' };
    const primaryyAxis = { title: 'Frequency', minimum: 0, maximum: 150, interval: 30 };
    const tooltipsettings = { enable: true };
    const marker = { visible: true, width: 10, height: 10 };
    const paretoOptions = {
        fill: 'red', dashArray: '5'
      }
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} tooltip={tooltipsettings} title='Defect vs Frequency'>
                    <Inject services={[ColumnSeries, LineSeries, ParetoSeries, Legend, Tooltip, Category, DataLabel]}/>
                    <SeriesCollectionDirective>
                    <SeriesDirective dataSource={chartData} xName='x' yName='y' name='Defect' type='Pareto' marker={marker} paretoOptions={paretoOptions}>
                        </SeriesDirective>
                    </SeriesCollectionDirective>
              </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
    AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ChartTheme,LegendSettingsModel,TooltipSettingsModel,ParetoSeries,ColumnSeries,LineSeries,
    Legend, Category, Tooltip, ILoadedEventArgs, DataLabel
} from '@syncfusion/ej2-react-charts';
import { chartData } from './datasource';

function App() {
    const primaryxAxis: AxisModel= {  title: 'Defects', valueType: 'Category' }  ;
    const primaryyAxis: AxisModel= {   title: 'Frequency', minimum: 0, maximum: 150,interval: 30 }  ;
    const tooltipsettings: TooltipSettingsModel={ enable: true };
    const marker={ visible: true, width: 10, height: 10};
    const paretoOptions: object = {
        fill: 'red', dashArray: '5'
      };
        return <ChartComponent id='charts'
                primaryXAxis={ primaryxAxis }
                primaryYAxis={ primaryyAxis }
                tooltip={ tooltipsettings }
                title='Defect vs Frequency'>
                    <Inject services={[ColumnSeries, LineSeries, ParetoSeries, Legend, Tooltip, Category, DataLabel]} />
                    <SeriesCollectionDirective>
                    <SeriesDirective dataSource={chartData}  xName='x' yName='y' name='Defect' type='Pareto'
                        marker={ marker } paretoOptions={paretoOptions}>
                        </SeriesDirective>
                    </SeriesCollectionDirective>
              </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let chartData = [
    { x: 'Button Defect',  y: 23 }, 
    { x: 'Pocket Defect',  y: 16 },
    { x: 'Collar Defect ', y: 10 }, 
    { x: 'Cuff Defect',    y: 7 },
    { x: 'Sleeve Defect',  y: 6 }, 
    { x: 'Other Defect',   y: 2 }
];
export let chartData: Object[] = [
    { x: 'Button Defect',  y: 23 }, 
    { x: 'Pocket Defect',  y: 16 },
    { x: 'Collar Defect ', y: 10 }, 
    { x: 'Cuff Defect',    y: 7 },
    { x: 'Sleeve Defect',  y: 6 }, 
    { x: 'Other Defect',   y: 2 }
];

Marker

Use the marker property to display and customize markers for individual points in the cumulative line.

index.jsx
index.tsx
datasource.jsx
datasource.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ParetoSeries, ColumnSeries, LineSeries, Legend, Category, Tooltip, DataLabel } from '@syncfusion/ej2-react-charts';
import { chartData } from './datasource';
function App() {
    const primaryxAxis = { title: 'Defects', valueType: 'Category' };
    const primaryyAxis = { title: 'Frequency', minimum: 0, maximum: 150, interval: 30 };
    const tooltipsettings = { enable: true };
    const marker = { visible: true, width: 10, height: 10 };
    const paretoOptions = {
      marker: { visible: true, width: 10, height: 10 },
      }
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} tooltip={tooltipsettings} title='Defect vs Frequency'>
                    <Inject services={[ColumnSeries, LineSeries, ParetoSeries, Legend, Tooltip, Category, DataLabel]}/>
                    <SeriesCollectionDirective>
                    <SeriesDirective dataSource={chartData} xName='x' yName='y' name='Defect' type='Pareto' marker={marker} paretoOptions={paretoOptions}>
                        </SeriesDirective>
                    </SeriesCollectionDirective>
              </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
    AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ChartTheme,LegendSettingsModel,TooltipSettingsModel,ParetoSeries,ColumnSeries,LineSeries,
    Legend, Category, Tooltip, ILoadedEventArgs, DataLabel
} from '@syncfusion/ej2-react-charts';
import { chartData } from './datasource';

function App() {
    const primaryxAxis: AxisModel= {  title: 'Defects', valueType: 'Category' }  ;
    const primaryyAxis: AxisModel= {   title: 'Frequency', minimum: 0, maximum: 150,interval: 30 }  ;
    const tooltipsettings: TooltipSettingsModel={ enable: true };
    const marker={ visible: true, width: 10, height: 10};
    const paretoOptions: object = {
        marker: { visible: true, width: 10, height: 10 },
      };
        return <ChartComponent id='charts'
                primaryXAxis={ primaryxAxis }
                primaryYAxis={ primaryyAxis }
                tooltip={ tooltipsettings }
                title='Defect vs Frequency'>
                    <Inject services={[ColumnSeries, LineSeries, ParetoSeries, Legend, Tooltip, Category, DataLabel]} />
                    <SeriesCollectionDirective>
                    <SeriesDirective dataSource={chartData}  xName='x' yName='y' name='Defect' type='Pareto'
                        marker={ marker } paretoOptions={paretoOptions}>
                        </SeriesDirective>
                    </SeriesCollectionDirective>
              </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let chartData = [
    { x: 'Button Defect',  y: 23 }, 
    { x: 'Pocket Defect',  y: 16 },
    { x: 'Collar Defect ', y: 10 }, 
    { x: 'Cuff Defect',    y: 7 },
    { x: 'Sleeve Defect',  y: 6 }, 
    { x: 'Other Defect',   y: 2 }
];
export let chartData: Object[] = [
    { x: 'Button Defect',  y: 23 }, 
    { x: 'Pocket Defect',  y: 16 },
    { x: 'Collar Defect ', y: 10 }, 
    { x: 'Cuff Defect',    y: 7 },
    { x: 'Sleeve Defect',  y: 6 }, 
    { x: 'Other Defect',   y: 2 }
];

Show axis

Use the showAxis property to show or hide the secondary value axis for the cumulative line.

index.jsx
index.tsx
datasource.jsx
datasource.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ParetoSeries, ColumnSeries, LineSeries, Legend, Category, Tooltip, DataLabel } from '@syncfusion/ej2-react-charts';
import { chartData } from './datasource';
function App() {
    const primaryxAxis = { title: 'Defects', valueType: 'Category' };
    const primaryyAxis = { title: 'Frequency', minimum: 0, maximum: 150, interval: 30 };
    const tooltipsettings = { enable: true };
    const marker = { visible: true, width: 10, height: 10 };
    const paretoOptions = {
      marker: { visible: true, width: 10, height: 10 }, showAxis: false
      }
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} tooltip={tooltipsettings} title='Defect vs Frequency'>
                    <Inject services={[ColumnSeries, LineSeries, ParetoSeries, Legend, Tooltip, Category, DataLabel]}/>
                    <SeriesCollectionDirective>
                    <SeriesDirective dataSource={chartData} xName='x' yName='y' name='Defect' type='Pareto' marker={marker} paretoOptions={paretoOptions}>
                        </SeriesDirective>
                    </SeriesCollectionDirective>
              </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
    AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ChartTheme,LegendSettingsModel,TooltipSettingsModel,ParetoSeries,ColumnSeries,LineSeries,
    Legend, Category, Tooltip, ILoadedEventArgs, DataLabel
} from '@syncfusion/ej2-react-charts';
import { chartData } from './datasource';

function App() {
    const primaryxAxis: AxisModel= {  title: 'Defects', valueType: 'Category' }  ;
    const primaryyAxis: AxisModel= {   title: 'Frequency', minimum: 0, maximum: 150,interval: 30 }  ;
    const tooltipsettings: TooltipSettingsModel={ enable: true };
    const marker={ visible: true, width: 10, height: 10};
    const paretoOptions: object = {
        marker: { visible: true, width: 10, height: 10 }, showAxis: false
      };
        return <ChartComponent id='charts'
                primaryXAxis={ primaryxAxis }
                primaryYAxis={ primaryyAxis }
                tooltip={ tooltipsettings }
                title='Defect vs Frequency'>
                    <Inject services={[ColumnSeries, LineSeries, ParetoSeries, Legend, Tooltip, Category, DataLabel]} />
                    <SeriesCollectionDirective>
                    <SeriesDirective dataSource={chartData}  xName='x' yName='y' name='Defect' type='Pareto'
                        marker={ marker } paretoOptions={paretoOptions}>
                        </SeriesDirective>
                    </SeriesCollectionDirective>
              </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let chartData = [
    { x: 'Button Defect',  y: 23 }, 
    { x: 'Pocket Defect',  y: 16 },
    { x: 'Collar Defect ', y: 10 }, 
    { x: 'Cuff Defect',    y: 7 },
    { x: 'Sleeve Defect',  y: 6 }, 
    { x: 'Other Defect',   y: 2 }
];
export let chartData: Object[] = [
    { x: 'Button Defect',  y: 23 }, 
    { x: 'Pocket Defect',  y: 16 },
    { x: 'Collar Defect ', y: 10 }, 
    { x: 'Cuff Defect',    y: 7 },
    { x: 'Sleeve Defect',  y: 6 }, 
    { x: 'Other Defect',   y: 2 }
];

Empty points

Data points with null or undefined values are considered empty. By default (mode: 'Gap'), empty points leave a gap in the series; the mode property lets you change how they are handled.

Mode

Use the mode property to control handling of empty points. Available modes: Gap, Drop, Zero, Average. The default mode is Gap.

index.jsx
index.tsx
datasource.jsx
datasource.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ParetoSeries, ColumnSeries, LineSeries, Legend, Category, Tooltip, DataLabel } from '@syncfusion/ej2-react-charts';
import { chartData } from './datasource';
function App() {
    const primaryxAxis = { title: 'Defects', valueType: 'Category' };
    const primaryyAxis = { title: 'Frequency', minimum: 0, maximum: 150, interval: 30 };
    const tooltipsettings = { enable: true };
    const marker = { visible: true, width: 10, height: 10 };
    const paretoOptions = {
      marker: { visible: true, width: 10, height: 10 }, showAxis: false
      }
      const emptyPoint = { mode: 'Gap' };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} tooltip={tooltipsettings} title='Defect vs Frequency'>
                    <Inject services={[ColumnSeries, LineSeries, ParetoSeries, Legend, Tooltip, Category, DataLabel]}/>
                    <SeriesCollectionDirective>
                    <SeriesDirective dataSource={chartData} xName='x' yName='y' name='Defect' type='Pareto' marker={marker} paretoOptions={paretoOptions} emptyPointSettings={emptyPoint}>
                        </SeriesDirective>
                    </SeriesCollectionDirective>
              </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
    AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ChartTheme,LegendSettingsModel,TooltipSettingsModel,ParetoSeries,ColumnSeries,LineSeries,
    Legend, Category, Tooltip, ILoadedEventArgs, DataLabel
} from '@syncfusion/ej2-react-charts';
import { chartData } from './datasource';

function App() {
    const primaryxAxis: AxisModel= {  title: 'Defects', valueType: 'Category' }  ;
    const primaryyAxis: AxisModel= {   title: 'Frequency', minimum: 0, maximum: 150,interval: 30 }  ;
    const tooltipsettings: TooltipSettingsModel={ enable: true };
    const marker={ visible: true, width: 10, height: 10};
    const paretoOptions: object = {
        marker: { visible: true, width: 10, height: 10 }, showAxis: false
      };
      const emptyPoint: object = { mode: 'Gap' };
        return <ChartComponent id='charts'
                primaryXAxis={ primaryxAxis }
                primaryYAxis={ primaryyAxis }
                tooltip={ tooltipsettings }
                title='Defect vs Frequency'>
                    <Inject services={[ColumnSeries, LineSeries, ParetoSeries, Legend, Tooltip, Category, DataLabel]} />
                    <SeriesCollectionDirective>
                    <SeriesDirective dataSource={chartData}  xName='x' yName='y' name='Defect' type='Pareto'
                        marker={ marker } paretoOptions={paretoOptions} emptyPointSettings={emptyPoint}>
                        </SeriesDirective>
                    </SeriesCollectionDirective>
              </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let chartData = [
    { x: 'Button Defect', y: 23 },
    { x: 'Pocket Defect', y: 16 },
    { x: 'Collar Defect', y: null },
    { x: 'Cuff Defect', y: 7 },
    { x: 'Sleeve Defect', y: 6 },
    { x: 'Other Defect', y: 2 },
    { x: 'Stitching Defect', y: null },
    { x: 'Zipper Defect', y: 3 },
    { x: 'Fabric Defect', y: 9 }
];
export let chartData: Object[] = [
    { x: 'Button Defect', y: 23 },
    { x: 'Pocket Defect', y: 16 },
    { x: 'Collar Defect', y: null },
    { x: 'Cuff Defect', y: 7 },
    { x: 'Sleeve Defect', y: 6 },
    { x: 'Other Defect', y: 2 },
    { x: 'Stitching Defect', y: null },
    { x: 'Zipper Defect', y: 3 },
    { x: 'Fabric Defect', y: 9 }
];

Fill

Use the fill property to set the fill color for empty points.

index.jsx
index.tsx
datasource.jsx
datasource.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ParetoSeries, ColumnSeries, LineSeries, Legend, Category, Tooltip, DataLabel } from '@syncfusion/ej2-react-charts';
import { chartData } from './datasource';
function App() {
    const primaryxAxis = { title: 'Defects', valueType: 'Category' };
    const primaryyAxis = { title: 'Frequency', minimum: 0, maximum: 150, interval: 30 };
    const tooltipsettings = { enable: true };
    const marker = { visible: true, width: 10, height: 10 };
    const paretoOptions = {
      marker: { visible: true, width: 10, height: 10 }, showAxis: false
      }
      const emptyPoint = { mode: 'Average', fill: 'red' };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} tooltip={tooltipsettings} title='Defect vs Frequency'>
                    <Inject services={[ColumnSeries, LineSeries, ParetoSeries, Legend, Tooltip, Category, DataLabel]}/>
                    <SeriesCollectionDirective>
                    <SeriesDirective dataSource={chartData} xName='x' yName='y' name='Defect' type='Pareto' marker={marker} paretoOptions={paretoOptions} emptyPointSettings={emptyPoint}>
                        </SeriesDirective>
                    </SeriesCollectionDirective>
              </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
    AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ChartTheme,LegendSettingsModel,TooltipSettingsModel,ParetoSeries,ColumnSeries,LineSeries,
    Legend, Category, Tooltip, ILoadedEventArgs, DataLabel
} from '@syncfusion/ej2-react-charts';
import { chartData } from './datasource';

function App() {
    const primaryxAxis: AxisModel= {  title: 'Defects', valueType: 'Category' }  ;
    const primaryyAxis: AxisModel= {   title: 'Frequency', minimum: 0, maximum: 150,interval: 30 }  ;
    const tooltipsettings: TooltipSettingsModel={ enable: true };
    const marker={ visible: true, width: 10, height: 10};
    const paretoOptions: object = {
        marker: { visible: true, width: 10, height: 10 }, showAxis: false
      };
      const emptyPoint: object = { mode: 'Average', fill: 'red' };
        return <ChartComponent id='charts'
                primaryXAxis={ primaryxAxis }
                primaryYAxis={ primaryyAxis }
                tooltip={ tooltipsettings }
                title='Defect vs Frequency'>
                    <Inject services={[ColumnSeries, LineSeries, ParetoSeries, Legend, Tooltip, Category, DataLabel]} />
                    <SeriesCollectionDirective>
                    <SeriesDirective dataSource={chartData}  xName='x' yName='y' name='Defect' type='Pareto'
                        marker={ marker } paretoOptions={paretoOptions} emptyPointSettings={emptyPoint}>
                        </SeriesDirective>
                    </SeriesCollectionDirective>
              </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let chartData = [
    { x: 'Button Defect', y: 23 },
    { x: 'Pocket Defect', y: 16 },
    { x: 'Collar Defect', y: null },
    { x: 'Cuff Defect', y: 7 },
    { x: 'Sleeve Defect', y: 6 },
    { x: 'Other Defect', y: 2 },
    { x: 'Stitching Defect', y: null },
    { x: 'Zipper Defect', y: 3 },
    { x: 'Fabric Defect', y: 9 }
];
export let chartData: Object[] = [
    { x: 'Button Defect', y: 23 },
    { x: 'Pocket Defect', y: 16 },
    { x: 'Collar Defect', y: null },
    { x: 'Cuff Defect', y: 7 },
    { x: 'Sleeve Defect', y: 6 },
    { x: 'Other Defect', y: 2 },
    { x: 'Stitching Defect', y: null },
    { x: 'Zipper Defect', y: 3 },
    { x: 'Fabric Defect', y: 9 }
];

Border

Use the border property to customize the border width and color for empty points.

index.jsx
index.tsx
datasource.jsx
datasource.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ParetoSeries, ColumnSeries, LineSeries, Legend, Category, Tooltip, DataLabel } from '@syncfusion/ej2-react-charts';
import { chartData } from './datasource';
function App() {
    const primaryxAxis = { title: 'Defects', valueType: 'Category' };
    const primaryyAxis = { title: 'Frequency', minimum: 0, maximum: 150, interval: 30 };
    const tooltipsettings = { enable: true };
    const marker = { visible: true, width: 10, height: 10 };
    const paretoOptions = {
      marker: { visible: true, width: 10, height: 10 }, showAxis: false
      }
      const emptyPoint = { mode: 'Average', fill: 'red', border: { width: 2, color: 'green' } };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} tooltip={tooltipsettings} title='Defect vs Frequency'>
                    <Inject services={[ColumnSeries, LineSeries, ParetoSeries, Legend, Tooltip, Category, DataLabel]}/>
                    <SeriesCollectionDirective>
                    <SeriesDirective dataSource={chartData} xName='x' yName='y' name='Defect' type='Pareto' marker={marker} paretoOptions={paretoOptions} emptyPointSettings={emptyPoint}>
                        </SeriesDirective>
                    </SeriesCollectionDirective>
              </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
    AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ChartTheme,LegendSettingsModel,TooltipSettingsModel,ParetoSeries,ColumnSeries,LineSeries,
    Legend, Category, Tooltip, ILoadedEventArgs, DataLabel
} from '@syncfusion/ej2-react-charts';
import { chartData } from './datasource';

function App() {
    const primaryxAxis: AxisModel= {  title: 'Defects', valueType: 'Category' }  ;
    const primaryyAxis: AxisModel= {   title: 'Frequency', minimum: 0, maximum: 150,interval: 30 }  ;
    const tooltipsettings: TooltipSettingsModel={ enable: true };
    const marker={ visible: true, width: 10, height: 10};
    const paretoOptions: object = {
        marker: { visible: true, width: 10, height: 10 }, showAxis: false
      };
      const emptyPoint: object = { mode: 'Average', fill: 'red', border: { width: 2, color: 'green' } };
        return <ChartComponent id='charts'
                primaryXAxis={ primaryxAxis }
                primaryYAxis={ primaryyAxis }
                tooltip={ tooltipsettings }
                title='Defect vs Frequency'>
                    <Inject services={[ColumnSeries, LineSeries, ParetoSeries, Legend, Tooltip, Category, DataLabel]} />
                    <SeriesCollectionDirective>
                    <SeriesDirective dataSource={chartData}  xName='x' yName='y' name='Defect' type='Pareto'
                        marker={ marker } paretoOptions={paretoOptions} emptyPointSettings={emptyPoint}>
                        </SeriesDirective>
                    </SeriesCollectionDirective>
              </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let chartData = [
    { x: 'Button Defect', y: 23 },
    { x: 'Pocket Defect', y: 16 },
    { x: 'Collar Defect', y: null },
    { x: 'Cuff Defect', y: 7 },
    { x: 'Sleeve Defect', y: 6 },
    { x: 'Other Defect', y: 2 },
    { x: 'Stitching Defect', y: null },
    { x: 'Zipper Defect', y: 3 },
    { x: 'Fabric Defect', y: 9 }
];
export let chartData: Object[] = [
    { x: 'Button Defect', y: 23 },
    { x: 'Pocket Defect', y: 16 },
    { x: 'Collar Defect', y: null },
    { x: 'Cuff Defect', y: 7 },
    { x: 'Sleeve Defect', y: 6 },
    { x: 'Other Defect', y: 2 },
    { x: 'Stitching Defect', y: null },
    { x: 'Zipper Defect', y: 3 },
    { x: 'Fabric Defect', y: 9 }
];

Events

Series render

The seriesRender event fires before each series is rendered and lets you modify series properties such as data, fill, or name. For a Pareto chart, use it to change the cumulative line color or to swap data sources on the fly.

index.jsx
index.tsx
datasource.jsx
datasource.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ParetoSeries, ColumnSeries, LineSeries, Legend, Category, Tooltip, DataLabel } from '@syncfusion/ej2-react-charts';
import { chartData } from './datasource';
function App() {
    const primaryxAxis = { title: 'Defects', valueType: 'Category' };
    const primaryyAxis = { title: 'Frequency', minimum: 0, maximum: 150, interval: 30 };
    const tooltipsettings = { enable: true };
    const marker = { visible: true, width: 10, height: 10 };
    const paretoOptions = {
      marker: { visible: true, width: 10, height: 10 }, showAxis: false
      }
      const seriesRender = (args) => {
        args.fill = '#ff6347';
      };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} tooltip={tooltipsettings} title='Defect vs Frequency' seriesRender={seriesRender}>
                    <Inject services={[ColumnSeries, LineSeries, ParetoSeries, Legend, Tooltip, Category, DataLabel]}/>
                    <SeriesCollectionDirective>
                    <SeriesDirective dataSource={chartData} xName='x' yName='y' name='Defect' type='Pareto' marker={marker} paretoOptions={paretoOptions}>
                        </SeriesDirective>
                    </SeriesCollectionDirective>
              </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
    AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ChartTheme,LegendSettingsModel,TooltipSettingsModel,ParetoSeries,ColumnSeries,LineSeries,
    Legend, Category, Tooltip, ILoadedEventArgs, DataLabel, ISeriesRenderEventArgs
} from '@syncfusion/ej2-react-charts';
import { EmitType } from '@syncfusion/ej2-base';
import { chartData } from './datasource';

function App() {
    const primaryxAxis: AxisModel= {  title: 'Defects', valueType: 'Category' }  ;
    const primaryyAxis: AxisModel= {   title: 'Frequency', minimum: 0, maximum: 150,interval: 30 }  ;
    const tooltipsettings: TooltipSettingsModel={ enable: true };
    const marker={ visible: true, width: 10, height: 10};
    const paretoOptions: object = {
        marker: { visible: true, width: 10, height: 10 }, showAxis: false
      };
      const seriesRender: EmitType<ISeriesRenderEventArgs> = (args: ISeriesRenderEventArgs): void => {
        args.fill = '#ff6347';
      };
        return <ChartComponent id='charts'
                primaryXAxis={ primaryxAxis }
                primaryYAxis={ primaryyAxis }
                tooltip={ tooltipsettings }
                title='Defect vs Frequency' seriesRender={seriesRender}>
                    <Inject services={[ColumnSeries, LineSeries, ParetoSeries, Legend, Tooltip, Category, DataLabel]} />
                    <SeriesCollectionDirective>
                    <SeriesDirective dataSource={chartData}  xName='x' yName='y' name='Defect' type='Pareto'
                        marker={ marker } paretoOptions={paretoOptions}>
                        </SeriesDirective>
                    </SeriesCollectionDirective>
              </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let chartData = [
    { x: 'Button Defect', y: 23 },
    { x: 'Pocket Defect', y: 16 },
    { x: 'Collar Defect', y: 4 },
    { x: 'Cuff Defect', y: 7 },
    { x: 'Sleeve Defect', y: 6 },
    { x: 'Other Defect', y: 2 },
    { x: 'Stitching Defect', y: 5 },
    { x: 'Zipper Defect', y: 3 },
    { x: 'Fabric Defect', y: 9 }
];
export let chartData: Object[] = [
    { x: 'Button Defect', y: 23 },
    { x: 'Pocket Defect', y: 16 },
    { x: 'Collar Defect', y: 4 },
    { x: 'Cuff Defect', y: 7 },
    { x: 'Sleeve Defect', y: 6 },
    { x: 'Other Defect', y: 2 },
    { x: 'Stitching Defect', y: 5 },
    { x: 'Zipper Defect', y: 3 },
    { x: 'Fabric Defect', y: 9 }
];

Point render

The pointRender event fires before each data point is drawn, letting you customize per-point marker shape, border, or fill. For a Pareto chart, use it to color the column and line points differently.

index.jsx
index.tsx
datasource.jsx
datasource.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ParetoSeries, ColumnSeries, LineSeries, Legend, Category, Tooltip, DataLabel } from '@syncfusion/ej2-react-charts';
import { chartData } from './datasource';
function App() {
    const primaryxAxis = { title: 'Defects', valueType: 'Category' };
    const primaryyAxis = { title: 'Frequency', minimum: 0, maximum: 150, interval: 30 };
    const tooltipsettings = { enable: true };
    const marker = { visible: true, width: 10, height: 10 };
    const paretoOptions = {
      marker: { visible: true, width: 10, height: 10 }, showAxis: false
      }
      const pointRender = (args) => {
        if (args.point.index % 2 !== 0) {
          args.fill = '#ff6347';
      }
      else {
          args.fill = '#009cb8';
      }
      };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} tooltip={tooltipsettings} title='Defect vs Frequency' pointRender={pointRender}>
                    <Inject services={[ColumnSeries, LineSeries, ParetoSeries, Legend, Tooltip, Category, DataLabel]}/>
                    <SeriesCollectionDirective>
                    <SeriesDirective dataSource={chartData} xName='x' yName='y' name='Defect' type='Pareto' marker={marker} paretoOptions={paretoOptions}>
                        </SeriesDirective>
                    </SeriesCollectionDirective>
              </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
    AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ChartTheme,LegendSettingsModel,TooltipSettingsModel,ParetoSeries,ColumnSeries,LineSeries,
    Legend, Category, Tooltip, ILoadedEventArgs, DataLabel, IPointRenderEventArgs
} from '@syncfusion/ej2-react-charts';
import { EmitType } from '@syncfusion/ej2-base';
import { chartData } from './datasource';

function App() {
    const primaryxAxis: AxisModel= {  title: 'Defects', valueType: 'Category' }  ;
    const primaryyAxis: AxisModel= {   title: 'Frequency', minimum: 0, maximum: 150,interval: 30 }  ;
    const tooltipsettings: TooltipSettingsModel={ enable: true };
    const marker={ visible: true, width: 10, height: 10};
    const paretoOptions: object = {
        marker: { visible: true, width: 10, height: 10 }, showAxis: false
      };
      const pointRender: EmitType<IPointRenderEventArgs> = (args: IPointRenderEventArgs): void => {
        if (args.point.index % 2 !== 0) {
          args.fill = '#ff6347';
      }
      else {
          args.fill = '#009cb8';
      }
      };
        return <ChartComponent id='charts'
                primaryXAxis={ primaryxAxis }
                primaryYAxis={ primaryyAxis }
                tooltip={ tooltipsettings }
                title='Defect vs Frequency' pointRender={pointRender}>
                    <Inject services={[ColumnSeries, LineSeries, ParetoSeries, Legend, Tooltip, Category, DataLabel]} />
                    <SeriesCollectionDirective>
                    <SeriesDirective dataSource={chartData}  xName='x' yName='y' name='Defect' type='Pareto'
                        marker={ marker } paretoOptions={paretoOptions}>
                        </SeriesDirective>
                    </SeriesCollectionDirective>
              </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let chartData = [
    { x: 'Button Defect', y: 23 },
    { x: 'Pocket Defect', y: 16 },
    { x: 'Collar Defect', y: 4 },
    { x: 'Cuff Defect', y: 7 },
    { x: 'Sleeve Defect', y: 6 },
    { x: 'Other Defect', y: 2 },
    { x: 'Stitching Defect', y: 5 },
    { x: 'Zipper Defect', y: 3 },
    { x: 'Fabric Defect', y: 9 }
];
export let chartData: Object[] = [
    { x: 'Button Defect', y: 23 },
    { x: 'Pocket Defect', y: 16 },
    { x: 'Collar Defect', y: 4 },
    { x: 'Cuff Defect', y: 7 },
    { x: 'Sleeve Defect', y: 6 },
    { x: 'Other Defect', y: 2 },
    { x: 'Stitching Defect', y: 5 },
    { x: 'Zipper Defect', y: 3 },
    { x: 'Fabric Defect', y: 9 }
];

Search docs

Ask Syncfusion AI Assistant