Configuration legend

Specifies chart legend options.

Type: Object

The dxChart widget 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 about the legend and its options, refer to the Legend topic.

Show Example:
jQuery

In this example, the legend's horizontalAlignment and verticalAlignment options are changed.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { year: '1850', africa: 111000000, asia: 809000000, europe: 276000000, latinamerica: 38000000, northamerica: 26000000, oceania: 2000000, total: 1262000000 },
    { year: '1900', africa: 133000000, asia: 947000000, europe: 408000000, latinamerica: 74000000, northamerica: 82000000, oceania: 6000000, total: 1650000000 },
    { year: '1950', africa: 229895000, asia: 1403388000, europe: 547287000, latinamerica: 167368000, northamerica: 171614000, oceania: 12675000, total: 2532227000 },
    { year: '2000', africa: 811101000, asia: 3719044000, europe: 726777000, latinamerica: 521419000, northamerica: 313289000, oceania: 31130000, total: 6122770000 },
    { year: '2050', africa: 2191599000, asia: 5142220000, europe: 719257000, latinamerica: 750956000, northamerica: 446862000, oceania: 55223000, total: 9306128000 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year',
            type: 'stackedbar'
        },
        series: [
            { valueField: 'africa', name: 'Africa' },
            { valueField: 'asia', name: 'Asia' },
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'latinamerica', name: 'Latin Am. &amp; Caribbean' },
            { valueField: 'northamerica', name: 'Northern America' },
            { valueField: 'oceania', name: 'Oceania' },
            {
                valueField: 'total',
                name: 'Total',
                type: 'spline',
                color: 'blue'
            }
        ],
        valueAxis: {
            label: {
                format: 'largeNumber'
            },
            min: 0
        },
        legend: {
            verticalAlignment: 'bottom',
            horizontalAlignment: 'center'
        }
    });
});

backgroundColor

Specifies a color for the legend's background.

Type: String
Default Value: undefined

Show Example:
jQuery

In this example, the legend's backgroundColor option is set to lightyellow.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { year: 1950, europe: 546, americas: 332, africa: 227 },
    { year: 2050, europe: 650, americas: 1231, africa: 1937 },
    { year: 2040, europe: 680, americas: 1178, africa: 1665 },
    { year: 2030, europe: 704, americas: 1110, africa: 1416 },
    { year: 2020, europe: 721, americas: 1027, africa: 1189 },
    { year: 2010, europe: 728, americas: 935, africa: 982 },
    { year: 2000, europe: 730, americas: 836, africa: 797 },
    { year: 1990, europe: 721, americas: 721, africa: 623 },
    { year: 1980, europe: 694, americas: 614, africa: 471 },
    { year: 1970, europe: 656, americas: 513, africa: 361 },
    { year: 1960, europe: 605, americas: 417, africa: 283 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year'
        },
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ],
        legend: {
            backgroundColor: 'lightyellow'
        }
    });
});

border

Specifies legend border options.

Type: Object

Use this object to make a legend's border visible/invisible and set up such border options as color, width etc.

Show Example:
jQuery

This example shows how to customize the appearance of the legend border.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { year: 1950, europe: 546, americas: 332, africa: 227 },
    { year: 2050, europe: 650, americas: 1231, africa: 1937 },
    { year: 2040, europe: 680, americas: 1178, africa: 1665 },
    { year: 2030, europe: 704, americas: 1110, africa: 1416 },
    { year: 2020, europe: 721, americas: 1027, africa: 1189 },
    { year: 2010, europe: 728, americas: 935, africa: 982 },
    { year: 2000, europe: 730, americas: 836, africa: 797 },
    { year: 1990, europe: 721, americas: 721, africa: 623 },
    { year: 1980, europe: 694, americas: 614, africa: 471 },
    { year: 1970, europe: 656, americas: 513, africa: 361 },
    { year: 1960, europe: 605, americas: 417, africa: 283 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year'
        },
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ],
        legend: {
            border: {
                visible: true,
                color: 'lightskyblue',
                cornerRadius: 20,
                opacity: 0.5,
                width: 2
            }
        }
    });
});

columnCount

Specifies how many columns it takes to arrange legend items.

Type: Number
Default Value: 0

To arrange legend items, specify how many rows and columns they must occupy. To do this, use the rowCount and columnCount properties.

Show Example:
jQuery

In this example, the legend items are displayed in 2 columns.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { year: 1950, europe: 546, americas: 332, africa: 227 },
    { year: 2050, europe: 650, americas: 1231, africa: 1937 },
    { year: 2040, europe: 680, americas: 1178, africa: 1665 },
    { year: 2030, europe: 704, americas: 1110, africa: 1416 },
    { year: 2020, europe: 721, americas: 1027, africa: 1189 },
    { year: 2010, europe: 728, americas: 935, africa: 982 },
    { year: 2000, europe: 730, americas: 836, africa: 797 },
    { year: 1990, europe: 721, americas: 721, africa: 623 },
    { year: 1980, europe: 694, americas: 614, africa: 471 },
    { year: 1970, europe: 656, americas: 513, africa: 361 },
    { year: 1960, europe: 605, americas: 417, africa: 283 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year'
        },
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ],
        legend: {
            columnCount: 2
        }
    });
});

columnItemSpacing

Specifies a blank space between legend columns in pixels.

Type: Number
Default Value: 8

Show Example:
jQuery

In this example, the legend items are displayed in 2 columns with 4 pixel spacing.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { year: 1950, europe: 546, americas: 332, africa: 227 },
    { year: 2050, europe: 650, americas: 1231, africa: 1937 },
    { year: 2040, europe: 680, americas: 1178, africa: 1665 },
    { year: 2030, europe: 704, americas: 1110, africa: 1416 },
    { year: 2020, europe: 721, americas: 1027, africa: 1189 },
    { year: 2010, europe: 728, americas: 935, africa: 982 },
    { year: 2000, europe: 730, americas: 836, africa: 797 },
    { year: 1990, europe: 721, americas: 721, africa: 623 },
    { year: 1980, europe: 694, americas: 614, africa: 471 },
    { year: 1970, europe: 656, americas: 513, africa: 361 },
    { year: 1960, europe: 605, americas: 417, africa: 283 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year'
        },
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ],
        legend: {
            columnCount: 2,
            columnItemSpacing: 4
        }
    });
});

customizeText

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

Type: function

By default, legend items identify series by color and name. You can also provide other information instead of the series name. To do this, implement a callback function for this property, and return the required text. Use the following properties of the this object in the returned text:

  • seriesName
    Specifies the name of the series for which the current legend item is created.
  • seriesNumber
    Specifies the index of the series for which the current legend item is created.
  • seriesColor
    Specifies the color of the series for which the current legend item is created.

The function's parameter represents the same object as the this object. You can use the function's parameter to obtain the series name or index if it is more appropriate in your case.

Show Example:
jQuery

In the example below, additional text is added to the legend item values using the customizeText option.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { year: '1850', africa: 0.111, asia: 0.809, europe: 0.276, latinamerica: 0.038, northamerica: 0.026, oceania: 0.002, total: 1.262 },
    { year: '1900', africa: 0.133, asia: 0.947, europe: 0.408, latinamerica: 0.074, northamerica: 0.082, oceania: 0.006, total: 1.65 },
    { year: '1950', africa: 0.229895, asia: 1.403388, europe: 0.547287, latinamerica: 0.167368, northamerica: 0.171614, oceania: 0.012675, total: 2.532227 },
    { year: '2000', africa: 0.811101, asia: 3.719044, europe: 0.726777, latinamerica: 0.521419, northamerica: 0.313289, oceania: 0.03113, total: 6.12277 },
    { year: '2050', africa: 2.191599, asia: 5.14222, europe: 0.719257, latinamerica: 0.750956, northamerica: 0.446862, oceania: 0.055223, total: 9.306128 }
];

$(function () {
    $('#chartContainer').dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year',
            type: 'stackedbar'
        },
        series: [{
            valueField: 'africa',
            name: 'Africa'
        }, {
            valueField: 'asia',
            name: 'Asia'
        }, {
            valueField: 'europe',
            name: 'Europe'
        }, {
            valueField: 'latinamerica',
            name: 'Latin Am. &amp; Caribbean'
        }, {
            valueField: 'northamerica',
            name: 'Northern America'
        }, {
            valueField: 'oceania',
            name: 'Oceania'
        }, {
            type: 'spline',
            valueField: 'total',
            name: 'Total',
            color: 'lightblue'
        }
        ],
        legend: {
            verticalAlignment: 'bottom',
            horizontalAlignment: 'center',
            customizeText: function () {
                return this.seriesName + ', bln'
            }
        }
    });
});

equalColumnWidth

Specifies whether or not item columns in the legend have an equal width.

Type: Boolean
Default Value: false
Accepted Values: true|false

When this property is set to false, the width of the item column is determined by the longest text. When this property is set to true, all item columns have an equal width.

Show Example:
jQuery

Use the check box below to switch between the values of the legend's equalColumnWidth option.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
<div id="checkboxContainer" style="height:40px;width:200px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
    <input type="checkbox" id="equalColumnWidthCheckbox" checked> equalColumnWidth
</div>
var dataSource = [
    { year: '1850', africa: 111000000, asia: 809000000, europe: 276000000, latinamerica: 38000000, northamerica: 26000000, oceania: 2000000, total: 1262000000 },
    { year: '1900', africa: 133000000, asia: 947000000, europe: 408000000, latinamerica: 74000000, northamerica: 82000000, oceania: 6000000, total: 1650000000 },
    { year: '1950', africa: 229895000, asia: 1403388000, europe: 547287000, latinamerica: 167368000, northamerica: 171614000, oceania: 12675000, total: 2532227000 },
    { year: '2000', africa: 811101000, asia: 3719044000, europe: 726777000, latinamerica: 521419000, northamerica: 313289000, oceania: 31130000, total: 6122770000 },
    { year: '2050', africa: 2191599000, asia: 5142220000, europe: 719257000, latinamerica: 750956000, northamerica: 446862000, oceania: 55223000, total: 9306128000 }
];

$(function () {
    $('#chartContainer').dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year',
            type: 'stackedbar'
        },
        series: [{
            valueField: 'africa',
            name: 'Africa'
        }, {
            valueField: 'asia',
            name: 'Asia'
        }, {
            valueField: 'europe',
            name: 'Europe'
        }, {
            valueField: 'latinamerica',
            name: 'Latin Am. &amp; Caribbean'
        }, {
            valueField: 'northamerica',
            name: 'Northern America'
        }, {
            valueField: 'oceania',
            name: 'Oceania'
        }, {
            type: 'spline',
            valueField: 'total',
            name: 'Total',
            color: 'lightblue'
        }
        ],
        animation: false,
        legend: {
            verticalAlignment: 'bottom',
            horizontalAlignment: 'center',
            itemTextPosition: 'right',
            columnCount: 3,
            equalColumnWidth: true
        }
    });

    $('#equalColumnWidthCheckbox').change(function () {
        var chart = $('#chartContainer').dxChart('instance');
        chart.option({
            legend: { equalColumnWidth: this.checked }
        });
    });
});

font

Specifies font options for the text displayed in the legend.

Type: Object

Show Example:
jQuery

In this example, the legend item text's font options are changed.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { year: 1950, europe: 546, americas: 332, africa: 227 },
    { year: 2050, europe: 650, americas: 1231, africa: 1937 },
    { year: 2040, europe: 680, americas: 1178, africa: 1665 },
    { year: 2030, europe: 704, americas: 1110, africa: 1416 },
    { year: 2020, europe: 721, americas: 1027, africa: 1189 },
    { year: 2010, europe: 728, americas: 935, africa: 982 },
    { year: 2000, europe: 730, americas: 836, africa: 797 },
    { year: 1990, europe: 721, americas: 721, africa: 623 },
    { year: 1980, europe: 694, americas: 614, africa: 471 },
    { year: 1970, europe: 656, americas: 513, africa: 361 },
    { year: 1960, europe: 605, americas: 417, africa: 283 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year'
        },
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ],
        legend: {
            font: {
                color: 'black',
                family: 'Zapf-Chancery, cursive',
                opacity: 1,
                weight: 700
            }
        }
    });
});

horizontalAlignment

Specifies a legend's position on the chart.

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

Show Example:
jQuery

Use the drop-down list below to change the legend's horizontalAlignment option.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
<div id="selectContainer" style="height:40px;width:300px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
    Legend Horizontal Alignment:
    <select id="dropdownListSelector">
        <option value="right">right</option>
        <option value="left">left</option>
        <option value="center">center</option>
    </select>
</div>
var dataSource = [
    { year: 1950, europe: 546, americas: 332, africa: 227 },
    { year: 2050, europe: 650, americas: 1231, africa: 1937 },
    { year: 2040, europe: 680, americas: 1178, africa: 1665 },
    { year: 2030, europe: 704, americas: 1110, africa: 1416 },
    { year: 2020, europe: 721, americas: 1027, africa: 1189 },
    { year: 2010, europe: 728, americas: 935, africa: 982 },
    { year: 2000, europe: 730, americas: 836, africa: 797 },
    { year: 1990, europe: 721, americas: 721, africa: 623 },
    { year: 1980, europe: 694, americas: 614, africa: 471 },
    { year: 1970, europe: 656, americas: 513, africa: 361 },
    { year: 1960, europe: 605, americas: 417, africa: 283 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year'
        },
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ],
        animation: false,
        legend: {
            horizontalAlignment: 'right'
        }
    });

    $('#dropdownListSelector').change(function () {
        var chart = $('#chartContainer').dxChart('instance');
        chart.option({
            legend: { horizontalAlignment: this.value }
        });
    });
});

hoverMode

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

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

In the dxChart widget, 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.

Show Example:
jQuery

Change the value of the legend's hoverMode option using the drop-down list below, and hover over one of the legend items to see the effect.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
<div id="selectContainer" style="height:40px;width:200px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px">
    hoverMode:
    <select id="dropdownListSelector">
        <option value="includePoints">includePoints</option>
        <option value="excludePoints">excludePoints</option>
        <option value="none">none</option>
    </select>
</div>
var dataSource = [
    { year: 1997, smp: 263, mmp: 226, cnstl: 10, cluster: 1 },
    { year: 1999, smp: 169, mmp: 256, cnstl: 66, cluster: 7 },
    { year: 2001, smp: 57, mmp: 257, cnstl: 143, cluster: 43 },
    { year: 2003, smp: 0, mmp: 163, cnstl: 127, cluster: 210 },
    { year: 2005, smp: 0, mmp: 103, cnstl: 36, cluster: 361 },
    { year: 2007, smp: 0, mmp: 91, cnstl: 3, cluster: 406 }
];
$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            type: 'spline',
            argumentField: 'year'
        },
        series: [
            { valueField: 'smp', name: 'SMP' },
            { valueField: 'mmp', name: 'MMP' },
            { valueField: 'cnstl', name: 'cnstl' },
            { valueField: 'cluster', name: 'Cluster' },
        ],
        animation: false,
        legend: {
            verticalAlignment: 'bottom',
            horizontalAlignment: 'center'
        },

    });

    $('#dropdownListSelector').change(function () {
        var chart = $('#chartContainer').dxChart('instance');
        chart.option({
            legend: { hoverMode: this.value }
        });
    });
});

itemTextPosition

Specifies the position of text relative to the item marker.

Type: String
Default Value: undefined
Accepted Values: 'right' | 'bottom'

A legend item consists of a marker that indicates the series (for the dxChart widget) / point (for the dxPieChart widget) color and text that specifies the name of the series/point. Use the itemTextPosition property to specify how the text should be positioned relative to the item marker.

Show Example:
jQuery

Use the drop-down list below to change the itemTextPosition option.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
<div id="selectContainer" style="height:40px;width:200px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px">
    itemTextPosition:
    <select id="dropdownListSelector">
        <option value="right">right</option>
        <option value="bottom">bottom</option>
    </select>
</div>
var dataSource = [
    { year: 1997, smp: 263, mmp: 226, cnstl: 10, cluster: 1 },
    { year: 1999, smp: 169, mmp: 256, cnstl: 66, cluster: 7 },
    { year: 2001, smp: 57, mmp: 257, cnstl: 143, cluster: 43 },
    { year: 2003, smp: 0, mmp: 163, cnstl: 127, cluster: 210 },
    { year: 2005, smp: 0, mmp: 103, cnstl: 36, cluster: 361 },
    { year: 2007, smp: 0, mmp: 91, cnstl: 3, cluster: 406 }
];
$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            type: 'spline',
            argumentField: 'year'
        },
        series: [
            { valueField: 'smp', name: 'SMP' },
            { valueField: 'mmp', name: 'MMP' },
            { valueField: 'cnstl', name: 'cnstl' },
            { valueField: 'cluster', name: 'Cluster' },
        ],
        animation: false,
        legend: {
            verticalAlignment: 'bottom',
            horizontalAlignment: 'center',
            itemTextPosition: 'right'
        },

    });

    $('#dropdownListSelector').change(function () {
        var chart = $('#chartContainer').dxChart('instance');
        chart.option({
            legend: { itemTextPosition: this.value }
        });
    });
});

margin

Specifies the blank space between the legend and the surrounding widget elements in pixels.

Type: Number
Default Value: 20

The value of this property is used to set the right, left, top or bottom legend margin depending on where the legend is located (to the right, left, bottom or top).

LegendMargin ChartJS

markerSize

Specifies the size of item markers in the legend in pixels.

Type: Number
Default Value: 20

Show Example:
jQuery

In this example, the size of the legend item markers is altered to 10.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { year: 1997, smp: 263, mmp: 226, cnstl: 10, cluster: 1 },
    { year: 1999, smp: 169, mmp: 256, cnstl: 66, cluster: 7 },
    { year: 2001, smp: 57, mmp: 257, cnstl: 143, cluster: 43 },
    { year: 2003, smp: 0, mmp: 163, cnstl: 127, cluster: 210 },
    { year: 2005, smp: 0, mmp: 103, cnstl: 36, cluster: 361 },
    { year: 2007, smp: 0, mmp: 91, cnstl: 3, cluster: 406 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            type: 'spline',
            argumentField: 'year'
        },
        series: [
            { valueField: 'smp', name: 'SMP' },
            { valueField: 'mmp', name: 'MMP' },
            { valueField: 'cnstl', name: 'cnstl' },
            { valueField: 'cluster', name: 'Cluster' },
        ],
        legend: {
            verticalAlignment: 'bottom',
            horizontalAlignment: 'center',
            itemTextPosition: 'right',
            markerSize: 10
        }
    });
});

paddingLeftRight

Specifies a blank space between a legend's left/right boundaries and the inner item boundaries in pixels.

Type: Number
Default Value: 10

LegendPadding ChartJS

paddingTopBottom

Specifies a blank space between a legend's top/bottom boundaries and the inner item boundaries in pixels.

Type: Number
Default Value: 10

LegendPadding ChartJS

position

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

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

In addition to this property, specify the legend's horizontalAlignment and verticalAlignment properties to specify where to place it inside (outside) of the chart's plot.

Show Example:
jQuery

Use the drop-down list below to change the chart's legend position.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
<div id="selectContainer" style="height:40px;width:250px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px">
    position:
    <select id="dropdownListSelector">
        <option value="outside">outside</option>
        <option value="inside">inside</option>
    </select>
</div>
var dataSource = [
    { state: 'Illinois', year1998: 423.721, year2001: 476.851, year2004: 528.904 },
    { state: 'Indiana', year1998: 178.719, year2001: 195.769, year2004: 227.271 },
    { state: 'Michigan', year1998: 308.845, year2001: 335.793, year2004: 372.576 },
    { state: 'Ohio', year1998: 348.555, year2001: 374.771, year2004: 418.258 },
    { state: 'Wisconsin', year1998: 160.274, year2001: 182.373, year2004: 211.727 }
];

$(function () {
    $('#chartContainer').dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'state',
            type: 'bar',
            label: {
                visible: true,
                format: "fixedPoint",
                precision: 2
            }
        },
        series: [
            { valueField: 'year2004', name: '2004' },
            { valueField: 'year2001', name: '2001' },
            { valueField: 'year1998', name: '1998' }
        ],
        animation: false,
        legend: {
            verticalAlignment: 'top',
            horizontalAlignment: 'right'
        }
    });

    $('#dropdownListSelector').change(function () {
        var chart = $('#chartContainer').dxChart('instance');
        chart.option({
            legend: { position: this.value }
        });
    });
});

rowCount

Specifies how many rows it takes to arrange legend items.

Type: Number
Default Value: 0

To arrange legend items, specify how many rows and columns they must occupy. To do this, use the rowCount and columnCount properties.

Show Example:
jQuery

In this example, the legend items are displayed in 2 rows. In addition, the legend position on a chart is changed using the horizontalAlignment and veticalAlignment options, and the position of the legend item text is changed using the itemTextPosition option.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { year: '1850', africa: 111000000, asia: 809000000, europe: 276000000, latinamerica: 38000000, northamerica: 26000000, oceania: 2000000, total: 1262000000 },
    { year: '1900', africa: 133000000, asia: 947000000, europe: 408000000, latinamerica: 74000000, northamerica: 82000000, oceania: 6000000, total: 1650000000 },
    { year: '1950', africa: 229895000, asia: 1403388000, europe: 547287000, latinamerica: 167368000, northamerica: 171614000, oceania: 12675000, total: 2532227000 },
    { year: '2000', africa: 811101000, asia: 3719044000, europe: 726777000, latinamerica: 521419000, northamerica: 313289000, oceania: 31130000, total: 6122770000 },
    { year: '2050', africa: 2191599000, asia: 5142220000, europe: 719257000, latinamerica: 750956000, northamerica: 446862000, oceania: 55223000, total: 9306128000 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year',
            type: 'stackedbar'
        },
        series: [
            { valueField: 'africa', name: 'Africa' },
            { valueField: 'asia', name: 'Asia' },
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'latinamerica', name: 'Latin Am. &amp; Caribbean' },
            { valueField: 'northamerica', name: 'Northern America' },
            { valueField: 'oceania', name: 'Oceania' },
            {
                valueField: 'total',
                name: 'Total',
                type: 'spline',
                color: 'blue'
            }
        ],
        valueAxis: {
            label: { format: 'largeNumber' }
        },
        legend: {
            verticalAlignment: 'bottom',
            horizontalAlignment: 'center',
            itemTextPosition: 'right',
            rowCount: 2
        }
    });
});

rowItemSpacing

Specifies a blank space between legend rows in pixels.

Type: Number
Default Value: 8

Show Example:
jQuery

In the example below, the legend items are displayed in 2 rows with 4 pixel spacing. In addition, the position of the legend is set using the horizontalAlignment and verticalAlignment options.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { year: '1850', africa: 111000000, asia: 809000000, europe: 276000000, latinamerica: 38000000, northamerica: 26000000, oceania: 2000000, total: 1262000000 },
    { year: '1900', africa: 133000000, asia: 947000000, europe: 408000000, latinamerica: 74000000, northamerica: 82000000, oceania: 6000000, total: 1650000000 },
    { year: '1950', africa: 229895000, asia: 1403388000, europe: 547287000, latinamerica: 167368000, northamerica: 171614000, oceania: 12675000, total: 2532227000 },
    { year: '2000', africa: 811101000, asia: 3719044000, europe: 726777000, latinamerica: 521419000, northamerica: 313289000, oceania: 31130000, total: 6122770000 },
    { year: '2050', africa: 2191599000, asia: 5142220000, europe: 719257000, latinamerica: 750956000, northamerica: 446862000, oceania: 55223000, total: 9306128000 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year',
            type: 'stackedbar'
        },
        series: [
            { valueField: 'africa', name: 'Africa' },
            { valueField: 'asia', name: 'Asia' },
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'latinamerica', name: 'Latin Am. &amp; Caribbean' },
            { valueField: 'northamerica', name: 'Northern America' },
            { valueField: 'oceania', name: 'Oceania' },
            {
                valueField: 'total',
                name: 'Total',
                type: 'spline',
                color: 'blue'
            }
        ],
        valueAxis: {
            label: { format: 'largeNumber' }
        },
        legend: {
            verticalAlignment: 'bottom',
            horizontalAlignment: 'center',
            itemTextPosition: 'right',
            rowCount: 2,
            rowItemSpacing: 4
        }
    });
});

verticalAlignment

Specifies a legend's position on the chart.

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

Show Example:
jQuery

Use the drop-down list below to change the legend's verticalAlignment option.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
<div id="selectContainer" style="height:40px;width:300px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
    Legend Vertical Alignment:
    <select id="dropdownListSelector">
        <option value="top">top</option>
        <option value="bottom">bottom</option>
    </select>
</div>
var dataSource = [
    { year: 1950, europe: 546, americas: 332, africa: 227 },
    { year: 2050, europe: 650, americas: 1231, africa: 1937 },
    { year: 2040, europe: 680, americas: 1178, africa: 1665 },
    { year: 2030, europe: 704, americas: 1110, africa: 1416 },
    { year: 2020, europe: 721, americas: 1027, africa: 1189 },
    { year: 2010, europe: 728, americas: 935, africa: 982 },
    { year: 2000, europe: 730, americas: 836, africa: 797 },
    { year: 1990, europe: 721, americas: 721, africa: 623 },
    { year: 1980, europe: 694, americas: 614, africa: 471 },
    { year: 1970, europe: 656, americas: 513, africa: 361 },
    { year: 1960, europe: 605, americas: 417, africa: 283 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year'
        },
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ],
        animation: false,
        legend: {
            verticalAlignment: 'top'
        }
    });

    $('#dropdownListSelector').change(function () {
        var chart = $('#chartContainer').dxChart('instance');
        chart.option({
            legend: { verticalAlignment: this.value }
        });
    });
});

visible

Specifies the visibility state of the chart's legend.

Type: Boolean
Default Value: true
Accepted Values: true|false

Show Example:
jQuery

Use the check box at the bottom to change legend visibility.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
<div id="checkboxContainer" style="height:40px;width:200px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
    <input type="checkbox" id="visibleLegendCheckbox" checked> Show Legend
</div>
var dataSource = [
    { year: 1950, europe: 546, americas: 332, africa: 227 },
    { year: 2050, europe: 650, americas: 1231, africa: 1937 },
    { year: 2040, europe: 680, americas: 1178, africa: 1665 },
    { year: 2030, europe: 704, americas: 1110, africa: 1416 },
    { year: 2020, europe: 721, americas: 1027, africa: 1189 },
    { year: 2010, europe: 728, americas: 935, africa: 982 },
    { year: 2000, europe: 730, americas: 836, africa: 797 },
    { year: 1990, europe: 721, americas: 721, africa: 623 },
    { year: 1980, europe: 694, americas: 614, africa: 471 },
    { year: 1970, europe: 656, americas: 513, africa: 361 },
    { year: 1960, europe: 605, americas: 417, africa: 283 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year'
        },
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ],
        animation: false,
        legend: { visible: true }
    });

    $('#visibleLegendCheckbox').change(function () {
        var chart = $('#chartContainer').dxChart('instance');
        chart.option({
            legend: { visible: this.checked }
        });
    });
});