React BarGauge - legend

Default Value: undefined

This property supports the following colors:

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

border

Configures the legend's border.

Selector: Border

Type:

columnCount

Arranges legend items into several columns.

Type:

Default Value: 0

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

NOTE

If you specify this property and, as a result, legend items do not fit into the available space, this property is ignored.

columnItemSpacing

Specifies an empty space between item columns in pixels.

Type:

Default Value: 20

customizeHint

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

Type:

Function

Function parameters:

arg:

Information on the bar and its corresponding legend item.

Object structure:

Name	Type	Description
item	BarGaugeBarInfo	Information on the bar.
text	String	The legend item's text.

Name

Type

Description

item

BarGaugeBarInfo

Information on the bar.

text

The legend item's text.

Return Value:

Array<BarGaugeLegendItem>

The text to be displayed in the hint.

This property accepts a function that must return the required text. When implementing this function, use its parameter to access the information on the bar that corresponds to the legend item.

customizeItems

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

Type:

Function

Function parameters:

items:

Legend items before customizations.

Return Value:

Array<BarGaugeLegendItem>

Legend items after customizations.

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

jQuery

JavaScript

$(function() {
    $("#barGaugeContainer").dxBarGauge({
        // ...
        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-bar-gauge ... >
    <dxo-legend ...
        [customizeItems]="sortLegendItems">
    </dxo-legend>
</dx-bar-gauge>

// ...
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 { DxBarGaugeModule } from 'devextreme-angular';
// ...
@NgModule({
    imports: [
        // ...
        DxBarGaugeModule
    ],
    // ...
})
export class AppModule { }

Vue

App.vue

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

<script>
import { DxBarGauge, DxLegend } from 'devextreme-vue/bar-gauge';

export default {
    components: {
        DxBarGauge,
        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 { BarGauge, Legend } from 'devextreme-react/bar-gauge';

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

    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().BarGauge()
    @* ... *@
    .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

Customizes the text displayed by legend items.

Type:

Function

Function parameters:

arg:

Information on the bar and its corresponding legend item.

Object structure:

Name	Type	Description
item	BarGaugeBarInfo	Information on the bar.
text	String	The legend item's text.

Name

Type

Description

item

BarGaugeBarInfo

Information on the bar.

text

The legend item's text.

Return Value:

The text to be displayed in the hint.

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: Font

Type:

horizontalAlignment

Along with verticalAlignment, specifies the legend's position.

Type:

HorizontalAlignment

Default Value: 'right'

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.

Type:

HorizontalAlignment

Default Value: undefined

itemTextFormat

Formats the item text before it is displayed. Accepts only numeric formats. When unspecified, it inherits the label's format.

Selector: ItemTextFormat

Type:

Format

Default Value: undefined

See the format section for more information on the accepted values.

itemTextPosition

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

Type:

Position

Default Value: undefined

margin

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

Selector: Margin

Type:

|

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

markerComponent

An alias for the markerTemplate property specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.

markerRender

An alias for the markerTemplate property specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information.

markerSize

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

Type:

Default Value: 20

markerTemplate

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

Type:

template

Template Data:

BarGaugeLegendItem

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:

Orientation

Default Value: undefined

paddingLeftRight

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

Type:

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.

Type:

Default Value: 10

DevExtreme Legend Top-Bottom Padding

rowCount

Arranges legend items in several rows.

Type:

Default Value: 0

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

NOTE

If you specify this property and, as a result, legend items do not fit into the available space, this property is ignored.

rowItemSpacing

Specifies an empty space between item rows in pixels.

Type:

Default Value: 8

title

Configures the legend title.

Selector: Title

Type:

|