React PieChart - Rotate the Pie
The PieChart provides two properties that control the layout algorithm, allowing you to rotate the pie. The first is startAngle that specifies the angle at which to lay out the first pie slice and has a value of zero degrees by default. Decreasing this value rotates the pie clockwise; increasing it does the opposite. The second property is segmentsDirection that specifies the direction - clockwise or anticlockwise - in which the slices are laid out.
jQuery
$(function() { $("#pieChartContainer").dxPieChart({ // ... startAngle: 45, segmentsDirection: "anticlockwise" // or "clockwise" }); });
Angular
<dx-pie-chart ... [startAngle]="45" segmentsDirection="anticlockwise"> <!-- or "clockwise" --> </dx-pie-chart>
import { DxPieChartModule } from "devextreme-angular"; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxPieChartModule ], // ... })
Vue
<template> <DxPieChart ... :start-angle="45" segments-direction="anticlockwise"> <!-- or "clockwise" --> </DxPieChart> </template> <script> import DxPieChart from 'devextreme-vue/pie-chart'; export default { components: { DxPieChart } } </script>
React
import React from 'react'; import PieChart from 'devextreme-react/pie-chart'; class App extends React.Component { render() { return ( <PieChart ... startAngle={45} segmentsDirection="anticlockwise"> {/* or "clockwise" */} </PieChart> ); } }
You can try both these properties on the PieChart below.
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.