legend 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

    In this example, the legend is bordered.

    <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: {
                border: { visible: true }
            }
        });
    });

    color

    Specifies border color.

    Type: String
    Default Value: '#d3d3d3'

    This option supports the following colors.

    • Hexadecimal colors
    • RGB colors
    • RGBA colors (not supported in Internet Explorer 8)
    • Predefined/cross-browser color names
    • Predefined SVG colors (not supported in Internet Explorer 8)

    To make the border visible, set the visible property to true.

    Show Example:
    jQuery

    In this example, the color option of the legend border is set to lightseagreen.

    <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: 'lightseagreen'
                }
            }
        });
    });

    cornerRadius

    Specifies a radius of a border's corners in degrees.

    Type: Number
    Default Value: 0

    Use this property to round a legend's border.

    Show Example:
    jQuery

    In this example, the legend border's cornerRadius option is set to 15.

    <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,
                    cornerRadius: 15
                }
            }
        });
    });

    dashStyle

    Specifies the border's dash style in the legend.

    Type: String
    Default Value: 'solid'
    Accepted Values: 'solid'|'longDash'|'dash'|'dot'

    The following values are available:

    • solid
      Displays a solid, continuous line.
    • longDash
      Displays a border using long dashes.
    • dash
      Displays a border using dashes.
    • dot
      Displays a border using dots.
    • Any combination of 'longDash', 'dash' and 'dot'
      Displays a border by repeating the specified combination. For instance, 'dashdotdash'.
    Show Example:
    jQuery

    In this example, the legend border's dash style is changed to longDashdot. The cornerRadius and width options are also 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: {
                border: {
                    visible: true,
                    cornerRadius: 20,
                    width: 2,
                    dashStyle: 'longDashdot'
                }
            }
        });
    });

    opacity

    Specifies a border's opacity.

    Type: Number
    Default Value: undefined

    Show Example:
    jQuery

    In this example, the legend border's opacity option is set to 1.

    <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,
                    opacity: 1
                }
            }
        });
    });

    visible

    Sets a legend's border visibility state.

    Type: Boolean
    Default Value: false

    Show Example:
    jQuery

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

    <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="visibleLegendBorderCheckbox" checked> Show Legend Border
    </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: {
                border: {
                    visible: true,
                    color: 'lightskyblue',
                    cornerRadius: 20,
                    opacity: 0.5,
                    width: 2
                }
            }
        });
    
        $('#visibleLegendBorderCheckbox').change(function () {
            var chart = $('#chartContainer').dxChart('instance');
            chart.option({
                legend: {
                    border: { visible: this.checked }
                }
            });
        });
    });

    width

    Specifies a border's width, in pixels.

    Type: Number
    Default Value: 1

    Show Example:
    jQuery

    In this example, the legend border's width option is set to 3. The color and cornerRadius options are also 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: {
                border: {
                    visible: true,
                    color: 'darkseagreen',
                    cornerRadius: 10,
                    width: 3
                }
            }
        });
    });