label font

Specifies font options for the text displayed in point labels.

Type: Object

Show Example:
jQuery

In this example, the font options of the point labels are changed.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { 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 }
];

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

color

Specifies a font color for point labels.

Type: String
Default Value: '#FFFFFF'

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 point labels' text is painted in lawngreen.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { 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 }
];

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

family

Specifies a font family for point labels.

Type: String
Default Value: "'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana"

For details on acceptable values, refer to the Font family article.

Show Example:
jQuery

In the following example, the font family of the point labels is changed.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { 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 }
];

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

opacity

Specifies font opacity for point labels.

Type: Number
Default Value: undefined

Show Example:
jQuery

In the example below, the font opacity option of the point labels is set to 0.4.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { 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 }
];

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

size

Specifies a font size for point labels.

Type: Number|String
Default Value: 14

For details on acceptable values, refer to the Font size article.

Show Example:
jQuery

In the example below, the font size option of the point labels is set to 10.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { 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 }
];

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

weight

Specifies the font weight for point labels.

Type: Number
Default Value: 400

Show Example:
jQuery

In the following example, the font weight option of the point labels is set to 700.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { 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 }
];

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