All docs
V21.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.

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