JavaScript/jQuery Chart - legend

The Chart UI component can include a legend - an explanatory component that helps you identify a series. Each series is represented by an item on a Legend. An item marker identifies the series color. An item label displays the series title. To set the required position for a legend and its items, to customize the font settings for item labels, and to specify the size of item markers, use the properties of the legend configuration object. To learn more on the legend and its properties, refer to the Legend topic.

This property supports the following colors:

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

Use this property 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() {
    $("#chartContainer").dxChart({
        // ...
        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-chart ... >
    <dxo-legend ...
        [customizeItems]="sortLegendItems">
    </dxo-legend>
</dx-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 { DxChartModule } from 'devextreme-angular';
// ...
@NgModule({
    imports: [
        // ...
        DxChartModule
    ],
    // ...
})
export class AppModule { }

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

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

export default {
    components: {
        DxChart,
        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 { Chart, Legend } from 'devextreme-react/chart';

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

    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().Chart()
    @* ... *@
    .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 property when the UI component 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 Chart UI component, legend items represent series. When a legend item is hovered over, the corresponding series is highlighted. To prevent this behavior, set the hoverMode property to 'none'.

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

Use the ChartLegendHoverMode enum to specify this property when the UI component is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: IncludePoints, ExcludePoints, and None.

View Demo

Use the HorizontalAlignment enum to specify this property when the UI component 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 property applies to all the legend's sides. The object allows you to control each side individually.

View Demo

Use the Orientation enum to specify this property when the UI component 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

In addition to this property, use the legend's horizontalAlignment, verticalAlignment and orientation properties to specify the legend layout.

Use the RelativePosition enum to specify this property when the UI component is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Inside and Outside.

Use this property 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 property. Otherwise, set this property to an object with the text and other fields specified.

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

Use the VerticalEdge enum to specify this property when the UI component 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