DevExtreme v23.2 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

Overview

DevExtreme React Charts comprise 30+ UI components for data visualization, including bars, areas, lines, bubbles, pie, funnels, sparklines, treemaps, and other chart types.

NOTE

Use our DevExpress BI Dashboard to embed interactive business intelligence into your next web app.

The Web Dashboard is a data analysis UI component that you can embed into your ASP.NET Core or Angular, React, and Vue applications with .NET backend. Dashboards allow you to display multiple inter-connected data analysis elements such as grids, charts, maps, gauges, and others: all within an automatically-arranged layout.

The set of components allows you to deploy an all-in-one solution and switch between Viewer and Designer modes directly on the web client (includes adaptive layouts for tablet & mobile).

The Web Dashboard is available as a part of a Universal subscription.

Get Started with DevExpress BI Dashboard | Explore Demos

Backend API
import React from 'react'; import Chart, { ArgumentAxis, CommonSeriesSettings, Legend, Series, Tooltip, ValueAxis, ConstantLine, Label, } from 'devextreme-react/chart'; import { complaintsData } from './data.ts'; const data = complaintsData.sort((a, b) => b.count - a.count); const totalCount = data.reduce((prevValue, item) => prevValue + item.count, 0); let cumulativeCount = 0; const dataArray = data.map((item) => { cumulativeCount += item.count; return { complaint: item.complaint, count: item.count, cumulativePercentage: Math.round((cumulativeCount * 100) / totalCount), }; }); const customizeTooltip = (pointInfo) => ({ html: `<div><div class="tooltip-header">${ pointInfo.argumentText }</div><div class="tooltip-body"><div class="series-name"><span class='top-series-name'>${ pointInfo.points[0].seriesName }</span>: </div><div class="value-text"><span class='top-series-value'>${ pointInfo.points[0].valueText }</span></div><div class="series-name"><span class='bottom-series-name'>${ pointInfo.points[1].seriesName }</span>: </div><div class="value-text"><span class='bottom-series-value'>${ pointInfo.points[1].valueText }</span>% </div></div></div>`, }); function customizePercentageText({ valueText }) { return `${valueText}%`; } function App() { return ( <Chart title="Pizza Shop Complaints" dataSource={dataArray} palette="Harmony Light" id="chart" > <CommonSeriesSettings argumentField="complaint" /> <Series name="Complaint frequency" valueField="count" axis="frequency" type="bar" color="#fac29a" /> <Series name="Cumulative percentage" valueField="cumulativePercentage" axis="percentage" type="spline" color="#6b71c3" /> <ArgumentAxis> <Label overlappingBehavior="stagger" /> </ArgumentAxis> <ValueAxis name="frequency" position="left" tickInterval={300} /> <ValueAxis name="percentage" position="right" tickInterval={20} showZero={true} valueMarginsEnabled={false} > <Label customizeText={customizePercentageText} /> <ConstantLine value={80} width={2} color="#fc3535" dashStyle="dash"> <Label visible={false} /> </ConstantLine> </ValueAxis> <Tooltip enabled={true} shared={true} customizeTooltip={customizeTooltip} /> <Legend verticalAlignment="top" horizontalAlignment="center" /> </Chart> ); } export default App;
import React from 'react'; import Chart, { ArgumentAxis, CommonSeriesSettings, Legend, Series, Tooltip, ValueAxis, ConstantLine, Label, } from 'devextreme-react/chart'; import { complaintsData } from './data.js'; const data = complaintsData.sort((a, b) => b.count - a.count); const totalCount = data.reduce((prevValue, item) => prevValue + item.count, 0); let cumulativeCount = 0; const dataArray = data.map((item) => { cumulativeCount += item.count; return { complaint: item.complaint, count: item.count, cumulativePercentage: Math.round((cumulativeCount * 100) / totalCount), }; }); const customizeTooltip = (pointInfo) => ({ html: `<div><div class="tooltip-header">${pointInfo.argumentText}</div><div class="tooltip-body"><div class="series-name"><span class='top-series-name'>${pointInfo.points[0].seriesName}</span>: </div><div class="value-text"><span class='top-series-value'>${pointInfo.points[0].valueText}</span></div><div class="series-name"><span class='bottom-series-name'>${pointInfo.points[1].seriesName}</span>: </div><div class="value-text"><span class='bottom-series-value'>${pointInfo.points[1].valueText}</span>% </div></div></div>`, }); function customizePercentageText({ valueText }) { return `${valueText}%`; } function App() { return ( <Chart title="Pizza Shop Complaints" dataSource={dataArray} palette="Harmony Light" id="chart" > <CommonSeriesSettings argumentField="complaint" /> <Series name="Complaint frequency" valueField="count" axis="frequency" type="bar" color="#fac29a" /> <Series name="Cumulative percentage" valueField="cumulativePercentage" axis="percentage" type="spline" color="#6b71c3" /> <ArgumentAxis> <Label overlappingBehavior="stagger" /> </ArgumentAxis> <ValueAxis name="frequency" position="left" tickInterval={300} /> <ValueAxis name="percentage" position="right" tickInterval={20} showZero={true} valueMarginsEnabled={false} > <Label customizeText={customizePercentageText} /> <ConstantLine value={80} width={2} color="#fc3535" dashStyle="dash" > <Label visible={false} /> </ConstantLine> </ValueAxis> <Tooltip enabled={true} shared={true} customizeTooltip={customizeTooltip} /> <Legend verticalAlignment="top" horizontalAlignment="center" /> </Chart> ); } export default App;
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.tsx'; ReactDOM.render( <App />, document.getElementById('app'), );
export const complaintsData = [ { complaint: 'Cold pizza', count: 780 }, { complaint: 'Not enough cheese', count: 120 }, { complaint: 'Underbaked or Overbaked', count: 52 }, { complaint: 'Delayed delivery', count: 1123 }, { complaint: 'Damaged pizza', count: 321 }, { complaint: 'Incorrect billing', count: 89 }, { complaint: 'Wrong size delivered', count: 222 }, ];
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, }, }, paths: { 'npm:': 'https://unpkg.com/', }, defaultExtension: 'js', map: { 'ts': 'npm:plugin-typescript@4.2.4/lib/plugin.js', 'typescript': 'npm:typescript@4.2.4/lib/typescript.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@15.8.1/prop-types.js', 'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.28.1/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@23.2.5/cjs', 'devextreme-react': 'npm:devextreme-react@23.2.5/cjs', 'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@1.6.4/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.2.5/dist/dx-diagram.js', 'devexpress-gantt': 'npm:devexpress-gantt@4.1.51/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@7.4.11/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.4/standalone.js', 'prettier/parser-html': 'npm:prettier@2.8.4/parser-html.js', }, packages: { 'devextreme': { defaultExtension: 'js', }, 'devextreme-react': { main: 'index.js', }, 'devextreme/events/utils': { main: 'index', }, 'devextreme/localization/messages': { format: 'json', defaultExtension: '', }, '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);
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render(<App />, document.getElementById('app'));
export const complaintsData = [ { complaint: 'Cold pizza', count: 780 }, { complaint: 'Not enough cheese', count: 120 }, { complaint: 'Underbaked or Overbaked', count: 52 }, { complaint: 'Delayed delivery', count: 1123 }, { complaint: 'Damaged pizza', count: 321 }, { complaint: 'Incorrect billing', count: 89 }, { complaint: 'Wrong size delivered', count: 222 }, ];
<!DOCTYPE html> <html> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/23.2.5/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import("./index.tsx"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body> </html>
#chart { height: 440px; } .tooltip-header { margin-bottom: 5px; font-size: 16px; font-weight: 500; padding-bottom: 5px; border-bottom: 1px solid #c5c5c5; } .tooltip-body { width: 170px; } .tooltip-body .series-name { font-weight: normal; opacity: 0.6; display: inline-block; line-height: 1.5; padding-right: 10px; width: 126px; } .tooltip-body .value-text { display: inline-block; line-height: 1.5; width: 30px; }