If you have technical questions, please create a support ticket in the DevExpress Support Center.
import React from 'react';
import { Chart, Series } from 'devextreme-react/chart';
import { dataSource } from './data.ts';
function App() {
return (
<Chart id="chart" dataSource={dataSource}>
<Series
valueField="oranges"
argumentField="day"
name="My oranges"
type="bar"
color="#ffaa66" />
</Chart>
);
}
export default App;
xxxxxxxxxx
import React from 'react';
import { Chart, Series } from 'devextreme-react/chart';
import { dataSource } from './data.js';
function App() {
return (
<Chart
id="chart"
dataSource={dataSource}
>
<Series
valueField="oranges"
argumentField="day"
name="My oranges"
type="bar"
color="#ffaa66"
/>
</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 = [{
day: 'Monday',
oranges: 3,
}, {
day: 'Tuesday',
oranges: 2,
}, {
day: 'Wednesday',
oranges: 3,
}, {
day: 'Thursday',
oranges: 4,
}, {
day: 'Friday',
oranges: 6,
}, {
day: 'Saturday',
oranges: 11,
}, {
day: 'Sunday',
oranges: 4,
}];
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 = [
{
day: 'Monday',
oranges: 3,
},
{
day: 'Tuesday',
oranges: 2,
},
{
day: 'Wednesday',
oranges: 3,
},
{
day: 'Thursday',
oranges: 4,
},
{
day: 'Friday',
oranges: 6,
},
{
day: 'Saturday',
oranges: 11,
},
{
day: 'Sunday',
oranges: 4,
},
];
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;
}
Bind to Data
You can bind the Bar chart to one of the following data sources:
In this demo, the Bar chart is populated with data taken from a simple JavaScript array.
Configure Series
Assign one or several series to the series property and specify the following settings:
-
The series type
-
Data source fields. Assign an appropriate field name to the argumentField and valueField properties if you want to bind a series to data directly. Alternatively, you can use a series template to bind series to data if a data source field contains names for series.
-
Optional. The barWidth property to specify individual series' bar width. See the Specify the Bar Width article for more information.
You can also use the commonSeriesSettings object to configure all series in the Bar chart.
Customize Bar Chart
You can show point labels to make the Bar chart more informative.
To help a user identify a series among others on the chart legend, specify its name.
If you want to change the default series color, use the color property.