React Charts - Inverted Chart

This example shows the PolarChart with inverted axes. You can specify the clockwise or counter-clockwise direction of the argumentAxis by using the inverted property. Similarly, you can change the direction of the valueAxis.

TS JS

Backend API

import React from 'react'; import { PolarChart, Series, ArgumentAxis, ValueAxis, Export, Legend, } from 'devextreme-react/polar-chart'; import { dataSource } from './data.ts'; function App() { return ( <PolarChart id="chart" dataSource={dataSource} title="Inverted Rose in Polar Coordinates" > <Series type="area" name="Function" /> <ArgumentAxis inverted={true} startAngle={90} tickInterval={30} /> <ValueAxis inverted={true} /> <Export enabled={true} /> <Legend visible={false} /> </PolarChart> ); } export default App;

import React from 'react'; import { PolarChart, Series, ArgumentAxis, ValueAxis, Export, Legend, } from 'devextreme-react/polar-chart'; import { dataSource } from './data.js'; function App() { return ( <PolarChart id="chart" dataSource={dataSource} title="Inverted Rose in Polar Coordinates" > <Series type="area" name="Function" /> <ArgumentAxis inverted={true} startAngle={90} tickInterval={30} /> <ValueAxis inverted={true} /> <Export enabled={true} /> <Legend visible={false} /> </PolarChart> ); } 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 dataSource = [{ arg: 0, val: 0, }, { arg: 30, val: 0.87, }, { arg: 45, val: 1, }, { arg: 60, val: 0.87, }, { arg: 90, val: 0, }, { arg: 120, val: 0.87, }, { arg: 135, val: 1, }, { arg: 150, val: 0.87, }, { arg: 180, val: 0, }, { arg: 210, val: 0.87, }, { arg: 225, val: 1, }, { arg: 240, val: 0.87, }, { arg: 270, val: 0, }, { arg: 300, val: 0.87, }, { arg: 315, val: 1, }, { arg: 330, val: 0.87, }, { arg: 360, val: 0, }];

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

export const dataSource = [ { arg: 0, val: 0, }, { arg: 30, val: 0.87, }, { arg: 45, val: 1, }, { arg: 60, val: 0.87, }, { arg: 90, val: 0, }, { arg: 120, val: 0.87, }, { arg: 135, val: 1, }, { arg: 150, val: 0.87, }, { arg: 180, val: 0, }, { arg: 210, val: 0.87, }, { arg: 225, val: 1, }, { arg: 240, val: 0.87, }, { arg: 270, val: 0, }, { arg: 300, val: 0.87, }, { arg: 315, val: 1, }, { arg: 330, val: 0.87, }, { arg: 360, val: 0, }, ];

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

#chart { height: 440px; }