Discrete Data - React Charts

import React, { useCallback, useState } from 'react'; import SelectBox, { type SelectBoxTypes } from 'devextreme-react/select-box'; import { PolarChart, CommonSeriesSettings, Series, Margin, } from 'devextreme-react/polar-chart'; import { types, dataSource, seriesTypeLabel } from './data.ts'; function App() { const [currentType, setCurrentType] = useState(types[0]); const handleChange = useCallback((e: SelectBoxTypes.ValueChangedEvent) => { setCurrentType(e.value); }, [setCurrentType]); return ( <React.Fragment> <div className="long-title"> <h3>Average temperature in London</h3> </div> <div id="chart-demo"> <PolarChart id="radarChart" dataSource={dataSource} > <CommonSeriesSettings type={currentType} /> <Series valueField="day" name="Day" color="#ba4d51" /> <Series valueField="night" name="Night" color="#5f8b95" /> <Margin top={50} bottom={50} left={100} /> </PolarChart> <div className="center"> <div>Series Type</div>   <SelectBox width={200} inputAttr={seriesTypeLabel} dataSource={types} value={currentType} onValueChanged={handleChange} /> </div> </div> </React.Fragment> ); } export default App;

import React, { useCallback, useState } from 'react'; import SelectBox from 'devextreme-react/select-box'; import { PolarChart, CommonSeriesSettings, Series, Margin, } from 'devextreme-react/polar-chart'; import { types, dataSource, seriesTypeLabel } from './data.js'; function App() { const [currentType, setCurrentType] = useState(types[0]); const handleChange = useCallback( (e) => { setCurrentType(e.value); }, [setCurrentType], ); return ( <React.Fragment> <div className="long-title"> <h3>Average temperature in London</h3> </div> <div id="chart-demo"> <PolarChart id="radarChart" dataSource={dataSource} > <CommonSeriesSettings type={currentType} /> <Series valueField="day" name="Day" color="#ba4d51" /> <Series valueField="night" name="Night" color="#5f8b95" /> <Margin top={50} bottom={50} left={100} /> </PolarChart> <div className="center"> <div>Series Type</div>   <SelectBox width={200} inputAttr={seriesTypeLabel} dataSource={types} value={currentType} onValueChanged={handleChange} /> </div> </div> </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 { Properties as PolarChartPropsType } from 'devextreme/viz/polar_chart'; export const types: (PolarChartPropsType['commonSeriesSettings']['type'])[] = ['scatter', 'line', 'area', 'bar', 'stackedbar']; export const dataSource = [{ arg: 'January', day: 6, night: 2, }, { arg: 'February', day: 7, night: 2, }, { arg: 'March', day: 10, night: 3, }, { arg: 'April', day: 14, night: 5, }, { arg: 'May', day: 18, night: 8, }, { arg: 'June', day: 21, night: 11, }, { arg: 'July', day: 22, night: 13, }, { arg: 'August', day: 22, night: 13, }, { arg: 'September', day: 19, night: 11, }, { arg: 'October', day: 15, night: 8, }, { arg: 'November', day: 10, night: 5, }, { arg: 'December', day: 7, night: 3, }]; export const seriesTypeLabel = { 'aria-label': 'Series Type' };

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

export const types = ['scatter', 'line', 'area', 'bar', 'stackedbar']; export const dataSource = [ { arg: 'January', day: 6, night: 2, }, { arg: 'February', day: 7, night: 2, }, { arg: 'March', day: 10, night: 3, }, { arg: 'April', day: 14, night: 5, }, { arg: 'May', day: 18, night: 8, }, { arg: 'June', day: 21, night: 11, }, { arg: 'July', day: 22, night: 13, }, { arg: 'August', day: 22, night: 13, }, { arg: 'September', day: 19, night: 11, }, { arg: 'October', day: 15, night: 8, }, { arg: 'November', day: 10, night: 5, }, { arg: 'December', day: 7, night: 3, }, ]; export const seriesTypeLabel = { 'aria-label': 'Series Type' };

<!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/25.1.6/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="https://cdn.jsdelivr.net/npm/core-js@2.6.12/client/shim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/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-demo { height: 600px; } #radarChart { height: 500px; } #chart-demo > .center { text-align: center; } #chart-demo > .center > div, #chart-demo > .center > .dx-widget { display: inline-block; vertical-align: middle; } .long-title h3 { font-family: "Segoe UI Light", "Helvetica Neue Light", "Segoe UI", "Helvetica Neue", "Trebuchet MS", Verdana; font-weight: 200; font-size: 28px; text-align: center; margin-bottom: 20px; }

React Charts - Discrete Data