All docs
V22.2
23.1
22.2
22.1
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

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