If you have technical questions, please create a support ticket in the DevExpress Support Center.
import React from 'react';
import Chart, {
Legend,
SeriesTemplate,
ISeriesTemplateProps,
Title,
Subtitle,
CommonSeriesSettings,
Export,
} from 'devextreme-react/chart';
import { dataSource } from './data.ts';
const customizeSeries: ISeriesTemplateProps['customizeSeries'] = (valueFromNameField: number) => (
valueFromNameField === 2009
? { type: 'line', label: { visible: true }, color: '#ff3f7a' }
: {}
);
function App() {
return (
<Chart
id="chart"
palette="Violet"
dataSource={dataSource}>
<SeriesTemplate
nameField="year"
customizeSeries={customizeSeries}
/>
<CommonSeriesSettings
argumentField="country"
valueField="oil"
type="bar"
/>
<Title text="Oil Production">
<Subtitle text="(in millions tonnes)" />
</Title>
<Legend
verticalAlignment="bottom"
horizontalAlignment="center"
/>
<Export enabled={true} />
</Chart>
);
}
export default App;
xxxxxxxxxx
import React from 'react';
import Chart, {
Legend,
SeriesTemplate,
Title,
Subtitle,
CommonSeriesSettings,
Export,
} from 'devextreme-react/chart';
import { dataSource } from './data.js';
const customizeSeries = (valueFromNameField) =>
(valueFromNameField === 2009 ? { type: 'line', label: { visible: true }, color: '#ff3f7a' } : {});
function App() {
return (
<Chart
id="chart"
palette="Violet"
dataSource={dataSource}
>
<SeriesTemplate
nameField="year"
customizeSeries={customizeSeries}
/>
<CommonSeriesSettings
argumentField="country"
valueField="oil"
type="bar"
/>
<Title text="Oil Production">
<Subtitle text="(in millions tonnes)" />
</Title>
<Legend
verticalAlignment="bottom"
horizontalAlignment="center"
/>
<Export enabled={true} />
</Chart>
);
}
export default App;
xxxxxxxxxx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.tsx';
ReactDOM.render(
<App />,
document.getElementById('app'),
);
xxxxxxxxxx
export const dataSource = [{
year: 1970,
country: 'Saudi Arabia',
oil: 186.7,
}, {
year: 1970,
country: 'USA',
oil: 557.8,
}, {
year: 1970,
country: 'Iran',
oil: 207.3,
}, {
year: 1970,
country: 'Mexico',
oil: 24.7,
}, {
year: 1980,
country: 'Saudi Arabia',
oil: 480.4,
}, {
year: 1980,
country: 'USA',
oil: 423.2,
}, {
year: 1980,
country: 'Iran',
oil: 74.3,
}, {
year: 1980,
country: 'Mexico',
oil: 109.2,
}, {
year: 1990,
country: 'Saudi Arabia',
oil: 319.6,
}, {
year: 1990,
country: 'USA',
oil: 340.1,
}, {
year: 1990,
country: 'Iran',
oil: 183.3,
}, {
year: 1990,
country: 'Mexico',
oil: 145.3,
}, {
year: 1990,
country: 'Russia',
oil: 499.6,
}, {
year: 2000,
country: 'Saudi Arabia',
oil: 465,
}, {
year: 2000,
country: 'USA',
oil: 282.9,
}, {
year: 2000,
country: 'Iran',
oil: 195.5,
}, {
year: 2000,
country: 'Mexico',
oil: 148.3,
}, {
year: 2000,
country: 'Russia',
oil: 375.3,
}, {
year: 2008,
country: 'Saudi Arabia',
oil: 549.7,
}, {
year: 2008,
country: 'USA',
oil: 280,
}, {
year: 2008,
country: 'Iran',
oil: 214.9,
}, {
year: 2008,
country: 'Mexico',
oil: 132.1,
}, {
year: 2008,
country: 'Russia',
oil: 503.2,
},
{
year: 2009,
country: 'Saudi Arabia',
oil: 428.4,
}, {
year: 2009,
country: 'USA',
oil: 298.9,
}, {
year: 2009,
country: 'Iran',
oil: 217.2,
}, {
year: 2009,
country: 'Mexico',
oil: 121.6,
}, {
year: 2009,
country: 'Russia',
oil: 493.1,
}];
xxxxxxxxxx
window.exports = window.exports || {};
window.config = {
transpiler: 'ts',
typescriptOptions: {
module: 'system',
emitDecoratorMetadata: true,
experimentalDecorators: true,
jsx: 'react',
},
meta: {
'react': {
'esModule': true,
},
'typescript': {
'exports': 'ts',
},
'devextreme/time_zone_utils.js': {
'esModule': true,
},
'devextreme/localization.js': {
'esModule': true,
},
'devextreme/viz/palette.js': {
'esModule': true,
},
'openai': {
'esModule': true,
},
},
paths: {
'npm:': 'https://unpkg.com/',
'bundles:': 'bundles/',
'externals:': 'bundles/externals/',
},
defaultExtension: 'js',
map: {
'ts': 'npm:plugin-typescript@8.0.0/lib/plugin.js',
'typescript': 'npm:typescript@4.2.4/lib/typescript.js',
'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js',
'react': 'npm:react@17.0.2/umd/react.development.js',
'react-dom': 'npm:react-dom@17.0.2/umd/react-dom.development.js',
'prop-types': 'npm:prop-types/prop-types.js',
'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js',
'luxon': 'npm:luxon@3.4.4/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign',
'devextreme': 'npm:devextreme@link:../../packages/devextreme/artifacts/npm/devextreme/cjs',
'devextreme-react': 'npm:devextreme-react@link:../../packages/devextreme-react/npm/cjs',
'devextreme-quill': 'npm:devextreme-quill@1.7.1/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.2.5/dist/dx-diagram.js',
'devexpress-gantt': 'npm:devexpress-gantt@4.1.54/dist/dx-gantt.js',
'@devextreme/runtime': 'npm:@devextreme/runtime@3.0.12',
'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js',
'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js',
'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js',
'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js',
'inferno-hydrate': 'npm:inferno-hydrate/dist/inferno-hydrate.min.js',
'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js',
'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js',
'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js',
'devextreme-cldr-data': 'npm:devextreme-cldr-data@1.0.3',
// SystemJS plugins
'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js',
'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js',
// Prettier
'prettier/standalone': 'npm:prettier@2.8.8/standalone.js',
'prettier/parser-html': 'npm:prettier@2.8.8/parser-html.js',
},
packages: {
'devextreme': {
defaultExtension: 'js',
},
'devextreme-react': {
main: 'index.js',
},
'devextreme/events/utils': {
main: 'index',
},
'devextreme/localization/messages': {
format: 'json',
defaultExtension: 'json',
},
'devextreme/events': {
main: 'index',
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js',
},
},
packageConfigPaths: [
'npm:@devextreme/*/package.json',
'npm:@devextreme/runtime@3.0.12/inferno/package.json',
],
babelOptions: {
sourceMaps: false,
stage0: true,
react: true,
},
};
System.config(window.config);
xxxxxxxxxx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(<App />, document.getElementById('app'));
xxxxxxxxxx
export const dataSource = [
{
year: 1970,
country: 'Saudi Arabia',
oil: 186.7,
},
{
year: 1970,
country: 'USA',
oil: 557.8,
},
{
year: 1970,
country: 'Iran',
oil: 207.3,
},
{
year: 1970,
country: 'Mexico',
oil: 24.7,
},
{
year: 1980,
country: 'Saudi Arabia',
oil: 480.4,
},
{
year: 1980,
country: 'USA',
oil: 423.2,
},
{
year: 1980,
country: 'Iran',
oil: 74.3,
},
{
year: 1980,
country: 'Mexico',
oil: 109.2,
},
{
year: 1990,
country: 'Saudi Arabia',
oil: 319.6,
},
{
year: 1990,
country: 'USA',
oil: 340.1,
},
{
year: 1990,
country: 'Iran',
oil: 183.3,
},
{
year: 1990,
country: 'Mexico',
oil: 145.3,
},
{
year: 1990,
country: 'Russia',
oil: 499.6,
},
{
year: 2000,
country: 'Saudi Arabia',
oil: 465,
},
{
year: 2000,
country: 'USA',
oil: 282.9,
},
{
year: 2000,
country: 'Iran',
oil: 195.5,
},
{
year: 2000,
country: 'Mexico',
oil: 148.3,
},
{
year: 2000,
country: 'Russia',
oil: 375.3,
},
{
year: 2008,
country: 'Saudi Arabia',
oil: 549.7,
},
{
year: 2008,
country: 'USA',
oil: 280,
},
{
year: 2008,
country: 'Iran',
oil: 214.9,
},
{
year: 2008,
country: 'Mexico',
oil: 132.1,
},
{
year: 2008,
country: 'Russia',
oil: 503.2,
},
{
year: 2009,
country: 'Saudi Arabia',
oil: 428.4,
},
{
year: 2009,
country: 'USA',
oil: 298.9,
},
{
year: 2009,
country: 'Iran',
oil: 217.2,
},
{
year: 2009,
country: 'Mexico',
oil: 121.6,
},
{
year: 2009,
country: 'Russia',
oil: 493.1,
},
];
xxxxxxxxxx
<html lang="en">
<head></head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app"></div>
</div>
</body>
</html>
xxxxxxxxxx
#chart {
height: 440px;
width: 100%;
}
This demo uses the structure displayed above to organize data:
xxxxxxxxxx
{
year: 1970,
country: 'Saudi Arabia',
oil: 192.2,
}
To define series, use the commonSeriesSettings object to specify common settings for all series: the argumentField, the valueField, and the type.
Then, use the seriesTemplate configuration object to define a template for the series. Within this object, assign the data source field that specifies the series name to the nameField property.
If you need to specify individual values for properties of a particular series, assign a callback function to the customizeSeries property of the seriesTemplate object. This demo uses the customizeSeries function to display a line instead of a bar for year: 2009
.