Error Bar in React Chart component
14 Oct 202424 minutes to read
Error Bar
Error bars are graphical representations of the variability of data and are used on graphs to indicate the error or uncertainty in a reported measurement.
To render error bars for the series in your chart, you need to follow a few steps to configure it correctly. Here’s a concise guide on how to do this:
-
Set visibility: Set the
visible
property to true for the error bars to be displayed. -
Inject the ErrorBar module: Inject
ErrorBar
module into theservices
. This step is essential, as it ensures that the necessary functionalities for rendering error bar series are available in your chart.
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';
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 };
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';
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 };
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"));
export let 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 }
];
export let data: Object[] = [
{ 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 }
];
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';
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';
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"));
export let 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 }
];
export let data: Object[] = [
{ 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 }
];
Customizing error bar type
To customize the error bar type, set the error bar type
to Custom
, and then change the horizontal or vertical positive and negative error values for the 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';
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';
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"));
export let 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 }
];
export let data: Object[] = [
{ 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 }
];
Error bar mode
The error bar mode is used to define whether the error bar line is drawn horizontally, vertically or on both sides. To change the error bar mode, use the 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';
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';
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"));
export let 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 }
];
export let data: Object[] = [
{ 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 }
];
Error bar direction
To change the direction of the error bars to plus, minus, or both sides, use the direction
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';
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';
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"));
export let 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 }
];
export let data: Object[] = [
{ 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 }
];
Customizing error bar cap
To customize the length, width, opacity, and fill color of the error bar caps, you can use the errorBarCap
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';
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';
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"));
export let 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 }
];
export let data: Object[] = [
{ 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 }
];
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 the verticalError
, horizontalError
, horizontalNegativeError
, 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';
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';
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"));
export let data = [
{ x: 2006, y: 7.8, color: 'red', error: 2.5 },
{ x: 2007, y: 7.2, color: 'blue', error: 1.8 },
{ x: 2008, y: 6.8, color: 'orange', error: 1.5 },
{ x: 2009, y: 10.7, color: 'brown', error: 0.9 },
{ x: 2010, y: 10.8, color: 'grey', error: 1 },
{ x: 2011, y: 9.8, color: 'green', error: 2.1 }
];
export let data: Object[] = [
{ x: 2006, y: 7.8, color: 'red', error: 2.5 },
{ x: 2007, y: 7.2, color: 'blue', error: 1.8 },
{ x: 2008, y: 6.8, color: 'orange', error: 1.5 },
{ x: 2009, y: 10.7, color: 'brown', error: 0.9 },
{ x: 2010, y: 10.8, color: 'grey', error: 1 },
{ x: 2011, y: 9.8, color: 'green', error: 2.1 }
];
Events
Series render
The seriesRender
event allows you to customize series properties, such as data, fill, and name, before they are rendered on the chart.
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';
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 = { visible: true };
const errorbar = { visible: true };
const seriesRender = (args) => {
args.fill = '#ff6347';
};
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Unemployment rate (%)' seriesRender={seriesRender}>
<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, ISeriesRenderEventArgs }
from'@syncfusion/ej2-react-charts';
import { EmitType } from '@syncfusion/ej2-base';
import { data } from './datasource';
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: object = { visible: true };
const errorbar = { visible: true };
const seriesRender: EmitType<ISeriesRenderEventArgs> = (args: ISeriesRenderEventArgs): void => {
args.fill = '#ff6347';
};
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={primaryyAxis}
title='Unemployment rate (%)'
seriesRender={seriesRender}>
<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"));
export let 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 }
];
export let data: Object[] = [
{ 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 }
];
Point render
The pointRender
event allows you to customize each data point before it is rendered on the chart.
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';
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 = { visible: true };
const errorbar = { visible: true };
const pointRender = (args) => {
args.fill = '#ff6347';
};
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Unemployment rate (%)' pointRender={pointRender}>
<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, IPointRenderEventArgs }
from'@syncfusion/ej2-react-charts';
import { EmitType } from '@syncfusion/ej2-base';
import { data } from './datasource';
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: object = { visible: true };
const errorbar = { visible: true };
const pointRender: EmitType<IPointRenderEventArgs> = (args: IPointRenderEventArgs): void => {
args.fill = '#ff6347';
};
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={primaryyAxis}
title='Unemployment rate (%)'
pointRender={pointRender}>
<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"));
export let 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 }
];
export let data: Object[] = [
{ 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 }
];