All docs
V20.2
24.1 (CTP)
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.
A newer version of this page is available. Switch to the current version.

jQuery Chart - Overview

The legend is a chart component that helps a user identify series. It contains several colored items, one per series.

DevExtreme HTML5 JavaScript Charts Legend

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

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

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

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

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

export default App;
See Also