All docs
V23.2
24.1
23.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.
19.1
The page you are viewing does not exist in version 19.1.
18.2
The page you are viewing does not exist in version 18.2.
18.1
The page you are viewing does not exist in version 18.1.
17.2
The page you are viewing does not exist in version 17.2.

jQuery PieChart - Overview

The legend is a component that helps a user identify series points. It contains several colored items, one per point (or per several points with the same argument in a multi-series PieChart).

DevExtreme HTML5 JavaScript PieChart Legend

To configure the appearance, location, and content of the legend, use properties collected in the legend object.

jQuery
JavaScript
$(function() {
    $("#pieChartContainer").dxPieChart({
        // ...
        legend: {
            // ...
        }
    });
});
Angular
HTML
TypeScript
<dx-pie-chart ... >
    <dxo-legend ... ></dxo-legend>
</dx-pie-chart>
import { DxPieChartModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxPieChartModule
    ],
    // ...
})
Vue
App.vue
<template> 
    <DxPieChart ... >
        <DxLegend ... />
    </DxPieChart>
</template>

<script>
import DxPieChart, {
    DxLegend
} from 'devextreme-vue/pie-chart';

export default {
    components: {
        DxPieChart,
        DxLegend
    }
}
</script>
React
App.js
import React from 'react';
import PieChart, {
    Legend
} from 'devextreme-react/pie-chart';

class App extends React.Component {
    render() {
        return (
            <PieChart ... >
                <Legend ... />
            </PieChart>
        );
    }
}
See Also