Vue Chart - legend

Specifies the properties of a chart's legend.

Selector: DxLegend
Type:

Object

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.

backgroundColor

Colors the legend's background.

Selector: background-color
Type:

String

Default Value: undefined

This property supports the following colors:

border

Configures the legend's border.

Selector: DxBorder
Type:

Object

columnCount

Arranges legend items into several columns.

Selector: column-count
Type:

Number

Default Value: 0

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

See Also

columnItemSpacing

Specifies an empty space between item columns in pixels.

Selector: column-item-spacing
Type:

Number

Default Value: 20

customizeHint

Specifies the text for a hint that appears when a user hovers the mouse pointer over a legend item.

Selector: customize-hint
Type:

Function

Function parameters:
seriesInfo:

Object

Information on the series.

Object structure:
Name Type Description
seriesColor

String

The series' color.
seriesIndex

Number

The index of the series in the series array. To get the Series object by this index, call the getSeriesByPos(seriesIndex) method.
seriesName any

The series' name. To get the Series object by this name, call the getSeriesByName(seriesName) method.
Return Value:

String

The text for the hint to display.

NOTE
As an alternative to the function’s parameter you can use the this keyword.

customizeItems

Allows you to change the order, text, and visibility of legend items.

Selector: customize-items
Type:

Function

Function parameters:
items:

Array<BaseChartLegendItem>

Legend items before customizations.

Return Value:

Array<BaseChartLegendItem>

Legend items after customizations.

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

jQuery
JavaScript
$(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;
                });
            }
        }
    });
});
Angular
app.component.html
app.component.ts
app.module.ts
<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 { }
Vue
App.vue
<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>
React
App.js
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;
ASP.NET MVC Controls
Razor C#
@(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>

customizeText

Specifies a callback function that returns the text to be displayed by a legend item.

Selector: customize-text
Type:

Function

Function parameters:
seriesInfo:

Object

Information on the series.

Object structure:
Name Type Description
seriesColor

String

The series' color.
seriesIndex

Number

The series' index.
seriesName any

The series' name.
Return Value:

String

The text for the legend item to display.

Cannot be used in themes.

NOTE
As an alternative to the function’s parameter you can use the this keyword.

font

Specifies the legend items' font properties.

Selector: DxFont
Type:

Object

horizontalAlignment

Along with verticalAlignment, specifies the legend's position.

Selector: horizontal-alignment
Type:

String

Default Value: 'right'
Accepted Values: 'center' | 'left' | 'right'

See Also

hoverMode

Specifies what series elements to highlight when a corresponding item in the legend is hovered over.

Selector: hover-mode
Type:

String

Default Value: 'includePoints'
Accepted Values: 'excludePoints' | 'includePoints' | 'none'

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.

View Demo

itemsAlignment

Aligns items in the last column or row (depending on the legend's orientation). Applies when legend items are not divided into columns or rows equally.

Selector: items-alignment
Type:

String

Default Value: undefined
Accepted Values: 'center' | 'left' | 'right'

itemTextPosition

Specifies the text's position relative to the marker in a legend item.

Selector: item-text-position
Type:

String

Default Value: undefined
Accepted Values: 'bottom' | 'left' | 'right' | 'top'

margin

Generates an empty space, measured in pixels, around the legend.

Selector: DxMargin
Type:

Number

|

Object

Default Value: 10

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

DevExtreme Legend Margins

markerSize

Specifies the marker's size in a legend item in pixels.

Selector: marker-size
Type:

Number

Default Value: 20

markerTemplate

Specifies an SVG element that serves as a custom legend item marker.

Selector: marker-template
Type:

template

Template Data: BaseChartLegendItem

Information about a legend item.

Default Name: undefined

View Demo

NOTE
To export custom SVG content rendered by this template, parse the content in the svgToCanvas function. Refer to the Export Custom Markup demo for an example.

orientation

Arranges legend items vertically (in a column) or horizontally (in a row). The default value is "horizontal" if the legend.horizontalAlignment is "center". Otherwise, it is "vertical".

Type:

String

Default Value: undefined
Accepted Values: 'horizontal' | 'vertical'

See Also

paddingLeftRight

Generates an empty space, measured in pixels, between the legend's left/right border and its items.

Selector: padding-left-right
Type:

Number

Default Value: 10

DevExtreme Legend Left-Right Padding

paddingTopBottom

Generates an empty space, measured in pixels, between the legend's top/bottom border and its items.

Selector: padding-top-bottom
Type:

Number

Default Value: 10

DevExtreme Legend Top-Bottom Padding

position

Specifies whether the legend is located outside or inside the chart's plot.

Type:

String

Default Value: 'outside'
Accepted Values: 'inside' | 'outside'

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

rowCount

Arranges legend items in several rows.

Selector: row-count
Type:

Number

Default Value: 0

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

See Also

rowItemSpacing

Specifies an empty space between item rows in pixels.

Selector: row-item-spacing
Type:

Number

Default Value: 8

title

Configures the legend title.

Selector: DxTitle
Type:

Object

|

String

DevExtreme PieChart: Legend Title

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.

verticalAlignment

Along with horizontalAlignment, specifies the legend's position.

Selector: vertical-alignment
Type:

String

Default Value: 'top'
Accepted Values: 'bottom' | 'top'

See Also

visible

Specifies the legend's visibility.

Type:

Boolean

Default Value: true