Error Bar in React Chart component
4 Apr 202324 minutes to read
Error Bar
Error bars are graphical representations of the variability of data and used on graphs to indicate the error or uncertainty in a reported measurement. To render the error bar for the series, set visible
as true
and inject ErrorBar
module into the services
.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, LineSeries, ErrorBar } from '@syncfusion/ej2-react-charts';
function App() {
const data = [
{ x: 2006, y: 7.8 }, { x: 2007, y: 7.2 },
{ x: 2008, y: 6.8 }, { x: 2009, y: 10.7 },
{ x: 2010, y: 10.8 }, { x: 2011, y: 9.8 }
];
const primaryxAxis = { minimum: 2005, maximum: 2012, interval: 1, title: 'Year' };
const primaryyAxis = { minimum: 3, maximum: 12, interval: 1, title: 'Percentage', labelFormat: '{value}%' };
const marker;
const errorbar = { visible: true };
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Unemployment rate (%)'>
<Inject services={[LineSeries, Legend, Category, ErrorBar]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='x' yName='y' width={2} name='India' type='Line' marker={marker} errorBar={errorbar}>
</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,
Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, LineSeries, Selection, ErrorBar }
from'@syncfusion/ej2-react-charts';
function App() {
const data: any[] = [
{ x: 2006, y: 7.8 }, { x: 2007, y: 7.2 },
{ x: 2008, y: 6.8 }, { x: 2009, y: 10.7 },
{ x: 2010, y: 10.8 }, { x: 2011, y: 9.8 }
];
const primaryxAxis: AxisModel = { minimum: 2005, maximum: 2012, interval: 1, title: 'Year' };
const primaryyAxis: AxisModel = { minimum: 3, maximum: 12, interval: 1, title: 'Percentage', labelFormat: '{value}%' };
const marker: { visible: true };
const errorbar = { visible: true };
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={primaryyAxis}
title='Unemployment rate (%)'>
<Inject services={[LineSeries, Legend, Category, ErrorBar]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='x' yName='y' width={2} name='India' type='Line'
marker={marker} errorBar={errorbar}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
Error Bar Type
To change the error bar rendering type using type
option of error bar. To change the error bar line length you can use verticalError
property.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, LineSeries, ErrorBar } from '@syncfusion/ej2-react-charts';
import { data } from 'datasource.ts';
function App() {
const primaryxAxis = { minimum: 2005, maximum: 2012, interval: 1, title: 'Year' };
const primaryyAxis = { minimum: 3, maximum: 12, interval: 1, title: 'Percentage', labelFormat: '{value}%' };
const marker;
const errorbar = { visible: true, type: 'Percentage', verticalError: 4 };
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Unemployment rate (%)'>
<Inject services={[LineSeries, Legend, Category, ErrorBar]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='x' yName='y' width={2} name='India' type='Line' marker={marker} errorBar={errorbar}>
</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,
Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, LineSeries, Selection, ErrorBar }
from'@syncfusion/ej2-react-charts';
import { data } from 'datasource.ts';
function App() {
const primaryxAxis: AxisModel = { minimum: 2005, maximum: 2012, interval: 1, title: 'Year' };
const primaryyAxis: AxisModel = { minimum: 3, maximum: 12, interval: 1, title: 'Percentage', labelFormat: '{value}%' };
const marker: { visible: true };
const errorbar = { visible: true, type: 'Percentage', verticalError: 4 };
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={primaryyAxis}
title='Unemployment rate (%)'>
<Inject services={[LineSeries, Legend, Category, ErrorBar]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='x' yName='y' width={2} name='India' type='Line'
marker={marker} errorBar={errorbar}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
Customizing error bar type
To customize the error bar type, set error bar type
as Custom
and then change the horizontal/vertical positive and negative error of error bar.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, LineSeries, ErrorBar } from '@syncfusion/ej2-react-charts';
import { data } from 'datasource.ts';
function App() {
const primaryxAxis = { minimum: 2005, maximum: 2012, interval: 1, title: 'Year' };
const primaryyAxis = { minimum: 3, maximum: 12, interval: 1, title: 'Percentage', labelFormat: '{value}%' };
const marker;
const errorbar = {
visible: true,
type: 'Custom',
mode: 'Both',
verticalPostiveError: 3,
horizontalPositiveError: 2,
verticalNegativeError: 3,
horizontalNegativeError: 2
};
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Unemployment rate (%)'>
<Inject services={[LineSeries, Legend, Category, ErrorBar]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='x' yName='y' width={2} name='India' type='Line' marker={marker} errorBar={errorbar}>
</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,
Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, LineSeries, Selection, ErrorBar }
from'@syncfusion/ej2-react-charts';
import { data } from 'datasource.ts';
function App() {
const primaryxAxis: AxisModel = { minimum: 2005, maximum: 2012, interval: 1, title: 'Year' };
const primaryyAxis: AxisModel = { minimum: 3, maximum: 12, interval: 1, title: 'Percentage', labelFormat: '{value}%' };
const marker: { visible: true };
const errorbar = {
visible: true,
type: 'Custom',
mode: 'Both',
verticalPostiveError: 3,
horizontalPositiveError: 2,
verticalNegativeError: 3,
horizontalNegativeError: 2
};
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={primaryyAxis}
title='Unemployment rate (%)'>
<Inject services={[LineSeries, Legend, Category, ErrorBar]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='x' yName='y' width={2} name='India' type='Line'
marker={marker} errorBar={errorbar}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
Error bar mode
Error bar mode is used to define whether the error bar line has to be drawn horizontally, vertically or in both side. To change the error bar mode use mode
option.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, LineSeries, ErrorBar } from '@syncfusion/ej2-react-charts';
import { data } from 'datasource.ts';
function App() {
const primaryxAxis = { minimum: 2005, maximum: 2012, interval: 1, title: 'Year' };
const primaryyAxis = { minimum: 3, maximum: 12, interval: 1, title: 'Percentage', labelFormat: '{value}%' };
const marker;
const errorbar = { visible: true, mode: 'Horizontal' };
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Unemployment rate (%)'>
<Inject services={[LineSeries, Legend, Category, ErrorBar]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='x' yName='y' width={2} name='India' type='Line' marker={marker} errorBar={errorbar}>
</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,
Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, LineSeries, Selection, ErrorBar }
from'@syncfusion/ej2-react-charts';
import { data } from 'datasource.ts';
function App() {
const primaryxAxis: AxisModel = { minimum: 2005, maximum: 2012, interval: 1, title: 'Year' };
const primaryyAxis: AxisModel = { minimum: 3, maximum: 12, interval: 1, title: 'Percentage', labelFormat: '{value}%' };
const marker: { visible: true };
const errorbar = { visible: true, mode: 'Horizontal' };
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={primaryyAxis}
title='Unemployment rate (%)'>
<Inject services={[LineSeries, Legend, Category, ErrorBar]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='x' yName='y' width={2} name='India' type='Line'
marker={marker} errorBar={errorbar}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
Error bar direction
To change the error bar direction to plus, minus or both side using direction
option.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, LineSeries, ErrorBar } from '@syncfusion/ej2-react-charts';
import { data } from 'datasource.ts';
function App() {
const primaryxAxis = { minimum: 2005, maximum: 2012, interval: 1, title: 'Year' };
const primaryyAxis = { minimum: 3, maximum: 12, interval: 1, title: 'Percentage', labelFormat: '{value}%' };
const marker;
const errorbar = { visible: true, mode: 'Vertical', direction: 'Minus' };
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Unemployment rate (%)'>
<Inject services={[LineSeries, Legend, Category, ErrorBar]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='x' yName='y' width={2} name='India' type='Line' marker={marker} errorBar={errorbar}>
</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,
Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, LineSeries, Selection, ErrorBar }
from'@syncfusion/ej2-react-charts';
import { data } from 'datasource.ts';
function App() {
const primaryxAxis: AxisModel = { minimum: 2005, maximum: 2012, interval: 1, title: 'Year' };
const primaryyAxis: AxisModel = { minimum: 3, maximum: 12, interval: 1, title: 'Percentage', labelFormat: '{value}%' };
const marker: { visible: true };
const errorbar = { visible: true, mode: 'Vertical', direction: 'Minus' };
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={primaryyAxis}
title='Unemployment rate (%)'>
<Inject services={[LineSeries, Legend, Category, ErrorBar]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='x' yName='y' width={2} name='India' type='Line'
marker={marker} errorBar={errorbar}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
Customizing error bar cap
To customize the error bar cap length, width and fill color, you can use errorBarCap
option.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, LineSeries, ErrorBar } from '@syncfusion/ej2-react-charts';
import { data } from 'datasource.ts';
function App() {
const primaryxAxis = { minimum: 2005, maximum: 2012, interval: 1, title: 'Year' };
const primaryyAxis = { minimum: 3, maximum: 12, interval: 1, title: 'Percentage', labelFormat: '{value}%' };
const marker;
const errorbar = {
visible: true, errorBarCap: {
length: 10,
width: 10,
color: '#0000ff'
}
};
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Unemployment rate (%)'>
<Inject services={[LineSeries, Legend, Category, ErrorBar]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='x' yName='y' width={2} name='India' type='Line' marker={marker} errorBar={errorbar}>
</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,
Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, LineSeries, Selection, ErrorBar }
from'@syncfusion/ej2-react-charts';
import { data } from 'datasource.ts';
function App() {
const primaryxAxis: AxisModel = { minimum: 2005, maximum: 2012, interval: 1, title: 'Year' };
const primaryyAxis: AxisModel = { minimum: 3, maximum: 12, interval: 1, title: 'Percentage', labelFormat: '{value}%' };
const marker: { visible: true };
const errorbar = {
visible: true, errorBarCap: {
length: 10,
width: 10,
color: '#0000ff'
}
};
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={primaryyAxis}
title='Unemployment rate (%)'>
<Inject services={[LineSeries, Legend, Category, ErrorBar]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='x' yName='y' width={2} name='India' type='Line'
marker={marker} errorBar={errorbar}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
Customizing error bar color
To customize the error bar color for individual errors, use the errorBarColorMapping
property. You can also customize the vertical error, horizontal error, horizontal negative and positive error and vertical negative and positive error for an individual point using verticalError
, horizontalError
, horizoontalNegativeError
, horizontalPositiveError
, verticalNegativeError
and verticalPositiveError
properties.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, LineSeries, ErrorBar } from '@syncfusion/ej2-react-charts';
import { data } from 'datasource.ts';
function App() {
const primaryxAxis = { minimum: 2005, maximum: 2012, interval: 1, title: 'Year' };
const primaryyAxis = { minimum: 3, maximum: 12, interval: 1, title: 'Percentage', labelFormat: '{value}%' };
const errorbar = {
visible: true, errorBarColorMapping: 'color', verticalError: 'error'
};
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Unemployment rate (%)'>
<Inject services={[LineSeries, Legend, Category, ErrorBar]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='x' yName='y' width={2} type='Line' errorBar={errorbar}>
</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,
Legend, Category, LineSeries, ErrorBar }
from'@syncfusion/ej2-react-charts';
import { data } from 'datasource.ts';
function App() {
const primaryxAxis: AxisModel = { minimum: 2005, maximum: 2012, interval: 1, title: 'Year' };
const primaryyAxis: AxisModel = { minimum: 3, maximum: 12, interval: 1, title: 'Percentage', labelFormat: '{value}%' };
const errorbar = {
visible: true, errorBarColorMapping: 'color', verticalError: 'error'
};
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={primaryyAxis}
title='Unemployment rate (%)'>
<Inject services={[LineSeries, Legend, Category, ErrorBar]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='x' yName='y' width={2} type='Line'
errorBar={errorbar}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));