label border

Specifies border options for point labels.

Type: Object

Use this object to make the borders of point labels visible/invisible and set up border options such as color and width.

Show Example:
jQuery

In this example, the label border is colored in darkslateblue.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { date: new Date(1994, 2, 1), l: 24.00, h: 25.00, o: 25.00, c: 24.875 },
    { date: new Date(1994, 2, 2), l: 23.625, h: 25.125, o: 24.00, c: 24.875 },
    { date: new Date(1994, 2, 3), l: 26.25, h: 28.25, o: 26.75, c: 27.00 },
    { date: new Date(1994, 2, 4), l: 26.50, h: 27.875, o: 26.875, c: 27.25 },
    { date: new Date(1994, 2, 7), l: 26.375, h: 27.50, o: 27.375, c: 26.75 },
    { date: new Date(1994, 2, 8), l: 25.75, h: 26.875, o: 26.75, c: 26.00 },
    { date: new Date(1994, 2, 9), l: 25.75, h: 26.75, o: 26.125, c: 26.25 },
    { date: new Date(1994, 2, 10), l: 25.75, h: 26.375, o: 26.375, c: 25.875 },
    { date: new Date(1994, 2, 11), l: 24.875, h: 26.125, o: 26.00, c: 25.375 },
    { date: new Date(1994, 2, 14), l: 25.125, h: 26.00, o: 25.625, c: 25.75 },
    { date: new Date(1994, 2, 15), l: 25.875, h: 26.625, o: 26.125, c: 26.375 },
    { date: new Date(1994, 2, 16), l: 26.25, h: 27.375, o: 26.25, c: 27.25 },
    { date: new Date(1994, 2, 17), l: 26.875, h: 27.25, o: 27.125, c: 26.875 },
    { date: new Date(1994, 2, 18), l: 26.375, h: 27.125, o: 27.00, c: 27.125 },
    { date: new Date(1994, 2, 21), l: 26.75, h: 27.875, o: 26.875, c: 27.75 },
    { date: new Date(1994, 2, 22), l: 26.75, h: 28.375, o: 27.50, c: 27.00 },
    { date: new Date(1994, 2, 23), l: 26.875, h: 28.125, o: 27.00, c: 28.00 },
    { date: new Date(1994, 2, 24), l: 26.25, h: 27.875, o: 27.75, c: 27.625 },
    { date: new Date(1994, 2, 25), l: 27.50, h: 28.75, o: 27.75, c: 28.00 },
    { date: new Date(1994, 2, 28), l: 25.75, h: 28.25, o: 28.00, c: 27.25 },
    { date: new Date(1994, 2, 29), l: 26.375, h: 27.50, o: 27.50, c: 26.875 },
    { date: new Date(1994, 2, 30), l: 25.75, h: 27.50, o: 26.375, c: 26.25 },
    { date: new Date(1994, 2, 31), l: 24.75, h: 27.00, o: 26.50, c: 25.25 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        series: {
            argumentField: 'date',
            lowValueField: 'l',
            highValueField: 'h',
            openValueField: 'o',
            closeValueField: 'c',
            type: 'stock',
            label: {
                visible: true,
                border: {
                    visible: true,
                    color: 'darkslateblue'
                }
            }
        },
        title: 'Stock Prices',
        legend: { visible: false },
        tooltip: { enabled: true },
        argumentAxis: {
            label: { format: 'dd/MM' }
        }
    });
});

color

Specifies a border color for point labels.

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)
Show Example:
jQuery

In this example, the label border is colored in lightpink.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { date: new Date(1994, 2, 1), l: 24.00, h: 25.00, o: 25.00, c: 24.875 },
    { date: new Date(1994, 2, 2), l: 23.625, h: 25.125, o: 24.00, c: 24.875 },
    { date: new Date(1994, 2, 3), l: 26.25, h: 28.25, o: 26.75, c: 27.00 },
    { date: new Date(1994, 2, 4), l: 26.50, h: 27.875, o: 26.875, c: 27.25 },
    { date: new Date(1994, 2, 7), l: 26.375, h: 27.50, o: 27.375, c: 26.75 },
    { date: new Date(1994, 2, 8), l: 25.75, h: 26.875, o: 26.75, c: 26.00 },
    { date: new Date(1994, 2, 9), l: 25.75, h: 26.75, o: 26.125, c: 26.25 },
    { date: new Date(1994, 2, 10), l: 25.75, h: 26.375, o: 26.375, c: 25.875 },
    { date: new Date(1994, 2, 11), l: 24.875, h: 26.125, o: 26.00, c: 25.375 },
    { date: new Date(1994, 2, 14), l: 25.125, h: 26.00, o: 25.625, c: 25.75 },
    { date: new Date(1994, 2, 15), l: 25.875, h: 26.625, o: 26.125, c: 26.375 },
    { date: new Date(1994, 2, 16), l: 26.25, h: 27.375, o: 26.25, c: 27.25 },
    { date: new Date(1994, 2, 17), l: 26.875, h: 27.25, o: 27.125, c: 26.875 },
    { date: new Date(1994, 2, 18), l: 26.375, h: 27.125, o: 27.00, c: 27.125 },
    { date: new Date(1994, 2, 21), l: 26.75, h: 27.875, o: 26.875, c: 27.75 },
    { date: new Date(1994, 2, 22), l: 26.75, h: 28.375, o: 27.50, c: 27.00 },
    { date: new Date(1994, 2, 23), l: 26.875, h: 28.125, o: 27.00, c: 28.00 },
    { date: new Date(1994, 2, 24), l: 26.25, h: 27.875, o: 27.75, c: 27.625 },
    { date: new Date(1994, 2, 25), l: 27.50, h: 28.75, o: 27.75, c: 28.00 },
    { date: new Date(1994, 2, 28), l: 25.75, h: 28.25, o: 28.00, c: 27.25 },
    { date: new Date(1994, 2, 29), l: 26.375, h: 27.50, o: 27.50, c: 26.875 },
    { date: new Date(1994, 2, 30), l: 25.75, h: 27.50, o: 26.375, c: 26.25 },
    { date: new Date(1994, 2, 31), l: 24.75, h: 27.00, o: 26.50, c: 25.25 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        series: {
            argumentField: 'date',
            lowValueField: 'l',
            highValueField: 'h',
            openValueField: 'o',
            closeValueField: 'c',
            type: 'stock',
            label: {
                visible: true,
                border: {
                    visible: true,
                    color: 'lightpink'
                }
            }
        },
        title: 'Stock Prices',
        legend: { visible: false },
        tooltip: { enabled: true },
        argumentAxis: {
            label: { format: 'dd/MM' }
        }
    });
});

dashStyle

Specifies a dash style for the borders of point labels.

Type: String
Default Value: 'solid'
Accepted Values: 'solid'|any combination of '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 dashStyle of the label border is set to longDashdot.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { date: new Date(1994, 2, 1), l: 24.00, h: 25.00, o: 25.00, c: 24.875 },
    { date: new Date(1994, 2, 2), l: 23.625, h: 25.125, o: 24.00, c: 24.875 },
    { date: new Date(1994, 2, 3), l: 26.25, h: 28.25, o: 26.75, c: 27.00 },
    { date: new Date(1994, 2, 4), l: 26.50, h: 27.875, o: 26.875, c: 27.25 },
    { date: new Date(1994, 2, 7), l: 26.375, h: 27.50, o: 27.375, c: 26.75 },
    { date: new Date(1994, 2, 8), l: 25.75, h: 26.875, o: 26.75, c: 26.00 },
    { date: new Date(1994, 2, 9), l: 25.75, h: 26.75, o: 26.125, c: 26.25 },
    { date: new Date(1994, 2, 10), l: 25.75, h: 26.375, o: 26.375, c: 25.875 },
    { date: new Date(1994, 2, 11), l: 24.875, h: 26.125, o: 26.00, c: 25.375 },
    { date: new Date(1994, 2, 14), l: 25.125, h: 26.00, o: 25.625, c: 25.75 },
    { date: new Date(1994, 2, 15), l: 25.875, h: 26.625, o: 26.125, c: 26.375 },
    { date: new Date(1994, 2, 16), l: 26.25, h: 27.375, o: 26.25, c: 27.25 },
    { date: new Date(1994, 2, 17), l: 26.875, h: 27.25, o: 27.125, c: 26.875 },
    { date: new Date(1994, 2, 18), l: 26.375, h: 27.125, o: 27.00, c: 27.125 },
    { date: new Date(1994, 2, 21), l: 26.75, h: 27.875, o: 26.875, c: 27.75 },
    { date: new Date(1994, 2, 22), l: 26.75, h: 28.375, o: 27.50, c: 27.00 },
    { date: new Date(1994, 2, 23), l: 26.875, h: 28.125, o: 27.00, c: 28.00 },
    { date: new Date(1994, 2, 24), l: 26.25, h: 27.875, o: 27.75, c: 27.625 },
    { date: new Date(1994, 2, 25), l: 27.50, h: 28.75, o: 27.75, c: 28.00 },
    { date: new Date(1994, 2, 28), l: 25.75, h: 28.25, o: 28.00, c: 27.25 },
    { date: new Date(1994, 2, 29), l: 26.375, h: 27.50, o: 27.50, c: 26.875 },
    { date: new Date(1994, 2, 30), l: 25.75, h: 27.50, o: 26.375, c: 26.25 },
    { date: new Date(1994, 2, 31), l: 24.75, h: 27.00, o: 26.50, c: 25.25 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        series: {
            argumentField: 'date',
            lowValueField: 'l',
            highValueField: 'h',
            openValueField: 'o',
            closeValueField: 'c',
            type: 'stock',
            label: {
                visible: true,
                border: {
                    visible: true,
                    color: 'midnightblue',
                    dashStyle: 'longDashdot'
                }
            }
        },
        title: 'Stock Prices',
        legend: { visible: false },
        tooltip: { enabled: true },
        argumentAxis: {
            label: { format: 'dd/MM' }
        }
    });
});

visible

Indicates whether or not borders are visible in point labels.

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

Show Example:
jQuery

Toggle the check box below to change the visibility of the label border.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
<div id="checkboxContainer" style="height:40px;width:250px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
    <input type="checkbox" id="visibleBorderCheckbox"> Show Label Borders
</div>
var dataSource = [
    { date: new Date(1994, 2, 1), l: 24.00, h: 25.00, o: 25.00, c: 24.875 },
    { date: new Date(1994, 2, 2), l: 23.625, h: 25.125, o: 24.00, c: 24.875 },
    { date: new Date(1994, 2, 3), l: 26.25, h: 28.25, o: 26.75, c: 27.00 },
    { date: new Date(1994, 2, 4), l: 26.50, h: 27.875, o: 26.875, c: 27.25 },
    { date: new Date(1994, 2, 7), l: 26.375, h: 27.50, o: 27.375, c: 26.75 },
    { date: new Date(1994, 2, 8), l: 25.75, h: 26.875, o: 26.75, c: 26.00 },
    { date: new Date(1994, 2, 9), l: 25.75, h: 26.75, o: 26.125, c: 26.25 },
    { date: new Date(1994, 2, 10), l: 25.75, h: 26.375, o: 26.375, c: 25.875 },
    { date: new Date(1994, 2, 11), l: 24.875, h: 26.125, o: 26.00, c: 25.375 },
    { date: new Date(1994, 2, 14), l: 25.125, h: 26.00, o: 25.625, c: 25.75 },
    { date: new Date(1994, 2, 15), l: 25.875, h: 26.625, o: 26.125, c: 26.375 },
    { date: new Date(1994, 2, 16), l: 26.25, h: 27.375, o: 26.25, c: 27.25 },
    { date: new Date(1994, 2, 17), l: 26.875, h: 27.25, o: 27.125, c: 26.875 },
    { date: new Date(1994, 2, 18), l: 26.375, h: 27.125, o: 27.00, c: 27.125 },
    { date: new Date(1994, 2, 21), l: 26.75, h: 27.875, o: 26.875, c: 27.75 },
    { date: new Date(1994, 2, 22), l: 26.75, h: 28.375, o: 27.50, c: 27.00 },
    { date: new Date(1994, 2, 23), l: 26.875, h: 28.125, o: 27.00, c: 28.00 },
    { date: new Date(1994, 2, 24), l: 26.25, h: 27.875, o: 27.75, c: 27.625 },
    { date: new Date(1994, 2, 25), l: 27.50, h: 28.75, o: 27.75, c: 28.00 },
    { date: new Date(1994, 2, 28), l: 25.75, h: 28.25, o: 28.00, c: 27.25 },
    { date: new Date(1994, 2, 29), l: 26.375, h: 27.50, o: 27.50, c: 26.875 },
    { date: new Date(1994, 2, 30), l: 25.75, h: 27.50, o: 26.375, c: 26.25 },
    { date: new Date(1994, 2, 31), l: 24.75, h: 27.00, o: 26.50, c: 25.25 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        series: {
            argumentField: 'date',
            lowValueField: 'l',
            highValueField: 'h',
            openValueField: 'o',
            closeValueField: 'c',
            type: 'stock',
            label: {
                visible: true,
                border: {
                    color: 'dodgerblue',
                    visible: false
                }
            }
        },
        title: 'Stock Prices',
        legend: { visible: false },
        tooltip: { enabled: true },
        argumentAxis: {
            label: { format: 'dd/MM' }
        }
    });

    $('#visibleBorderCheckbox').change(function () {
        var chart = $('#chartContainer').dxChart('instance');
        chart.option({
            series: {
                label: {
                    border: { visible: this.checked }
                }
            }
        });
    });
});

width

Specifies a border width for point labels.

Type: Number
Default Value: 1

Show Example:
jQuery

In this example, the width option of the label border is set to 2.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { date: new Date(1994, 2, 1), l: 24.00, h: 25.00, o: 25.00, c: 24.875 },
    { date: new Date(1994, 2, 2), l: 23.625, h: 25.125, o: 24.00, c: 24.875 },
    { date: new Date(1994, 2, 3), l: 26.25, h: 28.25, o: 26.75, c: 27.00 },
    { date: new Date(1994, 2, 4), l: 26.50, h: 27.875, o: 26.875, c: 27.25 },
    { date: new Date(1994, 2, 7), l: 26.375, h: 27.50, o: 27.375, c: 26.75 },
    { date: new Date(1994, 2, 8), l: 25.75, h: 26.875, o: 26.75, c: 26.00 },
    { date: new Date(1994, 2, 9), l: 25.75, h: 26.75, o: 26.125, c: 26.25 },
    { date: new Date(1994, 2, 10), l: 25.75, h: 26.375, o: 26.375, c: 25.875 },
    { date: new Date(1994, 2, 11), l: 24.875, h: 26.125, o: 26.00, c: 25.375 },
    { date: new Date(1994, 2, 14), l: 25.125, h: 26.00, o: 25.625, c: 25.75 },
    { date: new Date(1994, 2, 15), l: 25.875, h: 26.625, o: 26.125, c: 26.375 },
    { date: new Date(1994, 2, 16), l: 26.25, h: 27.375, o: 26.25, c: 27.25 },
    { date: new Date(1994, 2, 17), l: 26.875, h: 27.25, o: 27.125, c: 26.875 },
    { date: new Date(1994, 2, 18), l: 26.375, h: 27.125, o: 27.00, c: 27.125 },
    { date: new Date(1994, 2, 21), l: 26.75, h: 27.875, o: 26.875, c: 27.75 },
    { date: new Date(1994, 2, 22), l: 26.75, h: 28.375, o: 27.50, c: 27.00 },
    { date: new Date(1994, 2, 23), l: 26.875, h: 28.125, o: 27.00, c: 28.00 },
    { date: new Date(1994, 2, 24), l: 26.25, h: 27.875, o: 27.75, c: 27.625 },
    { date: new Date(1994, 2, 25), l: 27.50, h: 28.75, o: 27.75, c: 28.00 },
    { date: new Date(1994, 2, 28), l: 25.75, h: 28.25, o: 28.00, c: 27.25 },
    { date: new Date(1994, 2, 29), l: 26.375, h: 27.50, o: 27.50, c: 26.875 },
    { date: new Date(1994, 2, 30), l: 25.75, h: 27.50, o: 26.375, c: 26.25 },
    { date: new Date(1994, 2, 31), l: 24.75, h: 27.00, o: 26.50, c: 25.25 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        series: {
            argumentField: 'date',
            lowValueField: 'l',
            highValueField: 'h',
            openValueField: 'o',
            closeValueField: 'c',
            type: 'stock',
            label: {
                visible: true,
                border: {
                    visible: true,
                    width: 2
                }
            }
        },
        title: 'Stock Prices',
        legend: { visible: false },
        tooltip: { enabled: true },
        argumentAxis: {
            label: { format: 'dd/MM' }
        }
    });
});