All docs
V19.1
24.1
The page you are viewing does not exist in version 24.1.
23.2
The page you are viewing does not exist in version 23.2.
23.1
The page you are viewing does not exist in version 23.1.
22.2
The page you are viewing does not exist in version 22.2.
22.1
The page you are viewing does not exist in version 22.1.
21.2
The page you are viewing does not exist in version 21.2.
21.1
The page you are viewing does not exist in version 21.1.
20.2
The page you are viewing does not exist in version 20.2.
20.1
The page you are viewing does not exist in version 20.1.
19.2
19.1
18.2
18.1
17.2
A newer version of this page is available. Switch to the current version.

DevExtreme jQuery - Rotate the Pie

The PieChart provides two options 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 option 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
    ],
    // ...
})

You can try both these options on the PieChart below.

See Also