React Chart - Overview

A series is a collection of related data points.

DevExtreme HTML5 JavaScript Charts Series

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.

App.js
  • 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.

App.js
  • 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.

App.js
  • 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