JavaScript/jQuery 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
JavaScript
$(function() {
$("#pieChartContainer").dxPieChart({
// ...
startAngle: 45,
segmentsDirection: "anticlockwise" // or "clockwise"
});
});Angular
HTML
TypeScript
<dx-pie-chart ...
[startAngle]="45"
segmentsDirection="anticlockwise"> <!-- or "clockwise" -->
</dx-pie-chart>
import { DxPieChartModule } from "devextreme-angular";
// ...
export class AppComponent {
// ...
}
@NgModule({
imports: [
// ...
DxPieChartModule
],
// ...
})Vue
App.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
App.js
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
Feedback