JavaScript/jQuery PieChart - legend

The PieChart widget can include a legend. It helps you distinguish and identify the points of the displayed series. Each point is presented by an item on the legend. An item marker identifies the point's (slice's) color. An item label displays a value corresponding to the point. Use the legend property to set up PieChart legend options to the required values. To learn more about the legend and its options, refer to the Legend topic.

This option supports the following colors:

• Hexadecimal colors
• RGB colors
• RGBA colors
• Predefined/cross-browser color names
• Predefined SVG colors

Use this option when the legend is oriented vertically. Otherwise, use rowCount.

See Also

• legend.columnItemSpacing

The following code shows how to use the customizeItems function to sort legend items alphabetically:

$(function() {
    $("#pieChartContainer").dxPieChart({
        // ...
        legend: {
            customizeItems: function(items) {
                return items.sort(function(a, b) {
                    var itemA = a.text.toLowerCase();
                    var itemB = b.text.toLowerCase();
                    if(itemA < itemB) return -1;
                    if(itemA > itemB) return 1;
                    return 0;
                });
            }
        }
    });
});

<dx-pie-chart ... >
    <dxo-legend ...
        [customizeItems]="sortLegendItems">
    </dxo-legend>
</dx-pie-chart>

// ...
export class AppComponent {
    sortLegendItems(items) {
        return items.sort((a, b) => {
            let itemA = a.text.toLowerCase();
            let itemB = b.text.toLowerCase();
            if(itemA < itemB) return -1;
            if(itemA > itemB) return 1;
            return 0;
        });
    }
}

import { DxPieChartModule } from 'devextreme-angular';
// ...
@NgModule({
    imports: [
        // ...
        DxPieChartModule
    ],
    // ...
})
export class AppModule { }

<template> 
    <DxPieChart ... >
        <DxLegend
            :customize-items="sortLegendItems"
        />
    </DxPieChart>
</template>

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

export default {
    components: {
        DxPieChart,
        DxLegend
    },
    methods: {
        sortLegendItems(items) {
            return items.sort((a, b) => {
                let itemA = a.text.toLowerCase();
                let itemB = b.text.toLowerCase();
                if(itemA < itemB) return -1;
                if(itemA > itemB) return 1;
                return 0;
            });
        }
    }
}
</script>

import React from 'react';
import { PieChart, Legend } from 'devextreme-react/pie-chart';

class App extends React.Component {
    render() {
        return (
            <PieChart ... >
                <Legend ...
                    customizeItems={this.sortLegendItems}
                />
            </PieChart>
        );
    }

    sortLegendItems(items) {
        return items.sort((a, b) => {
            let itemA = a.text.toLowerCase();
            let itemB = b.text.toLowerCase();
            if(itemA < itemB) return -1;
            if(itemA > itemB) return 1;
            return 0;
        });
    }
}

export default App;

@(Html.DevExtreme().PieChart()
    @* ... *@
    .Legend(l => l
        .CustomizeItems("sortLegendItems")
    )
)

<script type="text/javascript">
    function sortLegendItems (items) {
        return items.sort(function(a, b) {
            var itemA = a.text.toLowerCase();
            var itemB = b.text.toLowerCase();
            if(itemA < itemB) return -1;
            if(itemA > itemB) return 1;
            return 0;
        });
    }
</script>

Use the HorizontalAlignment enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Left, Center, and Right.

See Also

• legend.orientation

In the PieChart widget, legend items represent series points. When a legend item is hovered over, the corresponding series point is highlighted. To prevent this behavior, set the hoverMode property to 'none'.

You can set a custom 'hover' style for series points. To do this, use the series.hoverStyle configuration object.

Use the ChartLegendHoverMode enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: AllArgumentPoints and None.

Use the HorizontalAlignment enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Left, Center, and Right.

When set to a number, this option applies to all the legend's sides. The object allows you to control each side individually.

Use the Orientation enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Horizontal and Vertical.

See Also

• legend.verticalAlignment
• legend.horizontalAlignment

Use this option when the legend is oriented horizontally. Otherwise, use columnCount.

See Also

• legend.rowItemSpacing

To specify only the title's text, assign it directly to this option. Otherwise, set this option to an object with the text and other fields specified.

The title can be accompanied by a subtitle. Assign it to the title.subtitle option.

Use the VerticalEdge enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Top and Bottom.

See Also

• legend.orientation