DevExtreme v26.1 is now available.

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

Your search did not match any results.

React Charts - Discrete Axis Zooming and Panning

Discrete data support is one of many strengths of the Chart component. In this example, you can zoom data in the Chart using another DevExtreme JavaScript UI component, the RangeSelector.

Backend API
import React, { useCallback, useState } from 'react'; import Chart, { ValueAxis, Label, Legend, ArgumentAxis, CommonSeriesSettings, Border, Series, } from 'devextreme-react/chart'; import RangeSelector, { Size, Chart as ChartOptions, Margin, Scale, Behavior, CommonSeriesSettings as CommonSeriesSettingsOptions, Series as RsChartSeries, type RangeSelectorTypes, } from 'devextreme-react/range-selector'; import type { VisualRange } from 'devextreme-react/common/charts'; import { series, dataSource } from './data.ts'; const seriesList = series.map((item) => <Series valueField={item.valueField} name={item.name} key={item.name} />); const rsChartSeriesList = series.map((item) => <RsChartSeries valueField={item.valueField} name={item.name} key={item.name} />); function formatValueAxisLabel(e: { valueText: string; }) { return `${e.valueText}%`; } function App() { const [visualRange, setVisualRange] = useState<VisualRange>({ startValue: 'Inner Core', endValue: 'Upper Crust' }); const updateVisualRange = useCallback((e: RangeSelectorTypes.ValueChangedEvent) => { setVisualRange(e.value); }, [setVisualRange]); return ( <> <Chart id="zoomedChart" palette="Soft" title="The Chemical Composition of the Earth Layers" dataSource={dataSource} > {seriesList} <ValueAxis> <Label customizeText={formatValueAxisLabel} /> </ValueAxis> <ArgumentAxis visualRange={visualRange} /> <CommonSeriesSettings type="bar" ignoreEmptyPoints={true} /> <Legend visible={true} verticalAlignment="top" horizontalAlignment="right" orientation="horizontal" > <Border visible={true} /> </Legend> </Chart> <RangeSelector dataSource={dataSource} onValueChanged={updateVisualRange} > <Size height={120} /> <Margin left={10} /> <Scale minorTickCount={1} startValue="Inner Core" endValue="Upper Crust" /> <Behavior valueChangeMode="onHandleMove" /> <ChartOptions palette="Soft"> {rsChartSeriesList} <Legend visible={false} /> <CommonSeriesSettingsOptions type="bar" ignoreEmptyPoints ={true} /> </ChartOptions> </RangeSelector> </> ); } export default App;
import React, { useCallback, useState } from 'react'; import Chart, { ValueAxis, Label, Legend, ArgumentAxis, CommonSeriesSettings, Border, Series, } from 'devextreme-react/chart'; import RangeSelector, { Size, Chart as ChartOptions, Margin, Scale, Behavior, CommonSeriesSettings as CommonSeriesSettingsOptions, Series as RsChartSeries, } from 'devextreme-react/range-selector'; import { series, dataSource } from './data.js'; const seriesList = series.map((item) => ( <Series valueField={item.valueField} name={item.name} key={item.name} /> )); const rsChartSeriesList = series.map((item) => ( <RsChartSeries valueField={item.valueField} name={item.name} key={item.name} /> )); function formatValueAxisLabel(e) { return `${e.valueText}%`; } function App() { const [visualRange, setVisualRange] = useState({ startValue: 'Inner Core', endValue: 'Upper Crust', }); const updateVisualRange = useCallback( (e) => { setVisualRange(e.value); }, [setVisualRange], ); return ( <> <Chart id="zoomedChart" palette="Soft" title="The Chemical Composition of the Earth Layers" dataSource={dataSource} > {seriesList} <ValueAxis> <Label customizeText={formatValueAxisLabel} /> </ValueAxis> <ArgumentAxis visualRange={visualRange} /> <CommonSeriesSettings type="bar" ignoreEmptyPoints={true} /> <Legend visible={true} verticalAlignment="top" horizontalAlignment="right" orientation="horizontal" > <Border visible={true} /> </Legend> </Chart> <RangeSelector dataSource={dataSource} onValueChanged={updateVisualRange} > <Size height={120} /> <Margin left={10} /> <Scale minorTickCount={1} startValue="Inner Core" endValue="Upper Crust" /> <Behavior valueChangeMode="onHandleMove" /> <ChartOptions palette="Soft"> {rsChartSeriesList} <Legend visible={false} /> <CommonSeriesSettingsOptions type="bar" ignoreEmptyPoints={true} /> </ChartOptions> </RangeSelector> </> ); } export default App;
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.tsx'; ReactDOM.render( <App />, document.getElementById('app'), );
const series = [{ name: 'Si', valueField: 'Si', }, { name: 'Fe', valueField: 'Fe', }, { name: 'Ni', valueField: 'Ni', }, { name: 'S', valueField: 'S', }, { name: 'O', valueField: 'O', }, { name: 'Mg', valueField: 'Mg', }, { name: 'Al', valueField: 'Al', }, { name: 'K', valueField: 'K', }, { name: 'Na', valueField: 'Na', }]; const dataSource = [{ arg: 'Inner Core', Si: 7.35, Fe: 79.39, Ni: 5.2, S: 2.3, O: 4.1, }, { arg: 'Outer Core', Si: 7.33, Fe: 78.56, Ni: 5.2, S: 2.7, O: 4.2, }, { arg: 'Lower Mantle', Si: 21.5, Fe: 5.8, O: 44.8, Mg: 22.8, Al: 2.2, Ca: 2.3, Na: 0.3, K: 0.03, }, { arg: 'Upper Mantle', Si: 28.1, Mg: 23.2, Fe: 4.3, Al: 1.2, Ca: 2.2, O: 40.3, Na: 0.2, }, { arg: 'Lower Crust', O: 46.6, Si: 27.7, Al: 8.1, Fe: 5, Ca: 3.6, Na: 2.8, K: 2.6, Mg: 1.5, }, { arg: 'Upper Crust', O: 47, Si: 29.5, Al: 8.05, Fe: 4.66, Ca: 2.96, Na: 2.5, K: 2.5, Mg: 1.87, }]; export { series, dataSource, };
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render(<App />, document.getElementById('app'));
const series = [ { name: 'Si', valueField: 'Si', }, { name: 'Fe', valueField: 'Fe', }, { name: 'Ni', valueField: 'Ni', }, { name: 'S', valueField: 'S', }, { name: 'O', valueField: 'O', }, { name: 'Mg', valueField: 'Mg', }, { name: 'Al', valueField: 'Al', }, { name: 'K', valueField: 'K', }, { name: 'Na', valueField: 'Na', }, ]; const dataSource = [ { arg: 'Inner Core', Si: 7.35, Fe: 79.39, Ni: 5.2, S: 2.3, O: 4.1, }, { arg: 'Outer Core', Si: 7.33, Fe: 78.56, Ni: 5.2, S: 2.7, O: 4.2, }, { arg: 'Lower Mantle', Si: 21.5, Fe: 5.8, O: 44.8, Mg: 22.8, Al: 2.2, Ca: 2.3, Na: 0.3, K: 0.03, }, { arg: 'Upper Mantle', Si: 28.1, Mg: 23.2, Fe: 4.3, Al: 1.2, Ca: 2.2, O: 40.3, Na: 0.2, }, { arg: 'Lower Crust', O: 46.6, Si: 27.7, Al: 8.1, Fe: 5, Ca: 3.6, Na: 2.8, K: 2.6, Mg: 1.5, }, { arg: 'Upper Crust', O: 47, Si: 29.5, Al: 8.05, Fe: 4.66, Ca: 2.96, Na: 2.5, K: 2.5, Mg: 1.87, }, ]; export { series, dataSource };
<!DOCTYPE html> <html lang="en"> <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=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="./bundle.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> <script src="bundles/vendor/react.vendor.js"></script> <script src="./bundle.js"></script> </body> </html>
#zoomedChart { margin-bottom: 20px; }