React Chart - Overview
A series is a collection of related data points.
The most important characteristic of a series is its type. The Chart provides over 20 series types, and all of them are described in the Series Types article. You can specify the type of a series using its type property.
- import React from 'react';
- import Chart, {
- Series
- } from 'devextreme-react/chart';
- class App extends React.Component {
- render() {
- return (
- <Chart ... >
- <Series type="bar"/>
- </Chart>
- );
- }
- }
- export default App;
A single Chart can contain several series at once. In this case, the series property accepts an array of series objects. To enable a user to identify a series among others on the chart legend, specify its name.
- import React from 'react';
- import Chart, {
- Series
- } from 'devextreme-react/chart';
- class App extends React.Component {
- render() {
- return (
- <Chart ... >
- <Series
- ...
- type="bar"
- name="Men" />
- <Series
- ...
- type="area"
- name="Women" />
- </Chart>
- );
- }
- }
- export default App;
Objects in the series array specify individual settings for series. You can also specify common settings for all chart series using the commonSeriesSettings object. Individual series settings override common settings.
- import React from 'react';
- import Chart, {
- Series,
- CommonSeriesSettings
- } from 'devextreme-react/chart';
- class App extends React.Component {
- render() {
- return (
- <Chart ... >
- <Series ... >
- <!-- high priority -->
- </Series>
- <CommonSeriesSettings ... >
- <!-- low priority -->
- </CommonSeriesSettings>
- </Chart>
- );
- }
- }
- export default App;
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.