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 },
    { year: '1900', africa: 133000000, asia: 947000000, europe: 408000000, latinamerica: 74000000, northamerica: 82000000, oceania: 6000000 },
    { year: '1950', africa: 229895000, asia: 1403388000, europe: 547287000, latinamerica: 167368000, northamerica: 171614000, oceania: 12675000 },
    { year: '2000', africa: 811101000, asia: 3719044000, europe: 726777000, latinamerica: 521419000, northamerica: 313289000, oceania: 31130000 },
    { year: '2050', africa: 2191599000, asia: 5142220000, europe: 719257000, latinamerica: 750956000, northamerica: 446862000, oceania: 55223000 }
];

$(function () {
    $("#chartContainer").dxPolarChart({
        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' }
        ],
        valueAxis: {
            label: { format: 'largeNumber' }
        },
        legend: {
            border: { visible: true }
        }
    });
});

color

Specifies border color.

Type: String
Default Value: '#d3d3d3'

This option supports the following colors.

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

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.

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'.

opacity

Specifies a border's opacity.

Type: Number
Default Value: undefined

visible

Sets a legend's border visibility state.

Type: Boolean
Default Value: false

width

Specifies a border's width, in pixels.

Type: Number
Default Value: 1