Discrete Axis Zooming and Panning

TS JS

See Also

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, RangeSelectorTypes,} from 'devextreme-react/range-selector';import { 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 ( <React.Fragment> <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> </React.Fragment> );}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 ( <React.Fragment> <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> </React.Fragment> );}export default App;

import React from 'react';import ReactDOM from 'react-dom';import App from './App.tsx';ReactDOM.render( <App />, document.getElementById('app'),);

import React from 'react';import ReactDOM from 'react-dom';import App from './App.js';ReactDOM.render(<App />, document.getElementById('app'));

<!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>

#zoomedChart { margin-bottom: 20px;}

Discrete Axis Zooming and Panning - React Charts (2024)