label font

Specifies font options for a constant line label.

Type: Object

Show Example:
jQuery

In this example, each value axis constant line label is displayed in a different color and size.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
	{ direction: 'N', day: 1, night: 5 },
	{ direction: 'NE', day: 1, night: 1 },
	{ direction: 'E', day: 10, night: 1 },
	{ direction: 'SE', day: 1, night: 1 },
	{ direction: 'S', day: 5, night: 2 },
	{ direction: 'SW', day: 7, night: 8 },
	{ direction: 'W', day: 1, night: 3 },
	{ direction: 'NW', day: 0, night: 3 }
];

$(function () {
    $("#chartContainer").dxPolarChart({
        dataSource: dataSource,
        title: "Wind Rose, Madrid (October 2014)",
        commonSeriesSettings: {
            type: "line",
            argumentField: 'direction'
        },
        series: [
            { valueField: "day", name: 'day' },
            { valueField: "night", name: 'night' }
        ],
        argumentAxis: {
            discreteAxisDivisionMode: "crossLabels",
            firstPointOnStartAngle: true
        },
        valueAxis: {
            label: { visible: false },
            constantLines: [{
                value: 4,
                color: "#5f8b95",
                dashStyle: "dash",
                label: {
                    font: {
                        color: "#5f8b95",
                        size: 14
                    },
                    text: "4 days"
                }
            }, {
                value: 6,
                color: "#ba4d51",
                dashStyle: "dash",
                label: {
                    font: {
                        color: "#ba4d51",
                        size: 16
                    },
                    text: "6 days"
                }
            }]
        }
    });
});

color

Specifies a font color for a constant line label.

Type: String
Default Value: '#767676'

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, each value axis constant line label is displayed in a different shade of green.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
	{ direction: 'N', day: 1, night: 5 },
	{ direction: 'NE', day: 1, night: 1 },
	{ direction: 'E', day: 10, night: 1 },
	{ direction: 'SE', day: 1, night: 1 },
	{ direction: 'S', day: 5, night: 2 },
	{ direction: 'SW', day: 7, night: 8 },
	{ direction: 'W', day: 1, night: 3 },
	{ direction: 'NW', day: 0, night: 3 }
];

$(function () {
    $("#chartContainer").dxPolarChart({
        dataSource: dataSource,
        title: "Wind Rose, Madrid (October 2014)",
        commonSeriesSettings: {
            type: "line",
            argumentField: 'direction'
        },
        series: [
            { valueField: "day", name: 'day' },
            { valueField: "night", name: 'night' }
        ],
        argumentAxis: {
            discreteAxisDivisionMode: "crossLabels",
            firstPointOnStartAngle: true
        },
        valueAxis: {
            label: { visible: false },
            constantLines: [{
                value: 4,
                color: "#5f8b95",
                dashStyle: "dash",
                label: {
                    font: { color: "#5f8b95" },
                    text: "4 days"
                }
            }, {
                value: 6,
                color: "#ba4d51",
                dashStyle: "dash",
                label: {
                    font: { color: "#ba4d51" },
                    text: "6 days"
                }
            }]
        }
    });
});

family

Specifies a font family for a constant line label.

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 this example, each value axis constant line label has a different font family.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
	{ direction: 'N', day: 1, night: 5 },
	{ direction: 'NE', day: 1, night: 1 },
	{ direction: 'E', day: 10, night: 1 },
	{ direction: 'SE', day: 1, night: 1 },
	{ direction: 'S', day: 5, night: 2 },
	{ direction: 'SW', day: 7, night: 8 },
	{ direction: 'W', day: 1, night: 3 },
	{ direction: 'NW', day: 0, night: 3 }
];

$(function () {
    $("#chartContainer").dxPolarChart({
        dataSource: dataSource,
        title: "Wind Rose, Madrid (October 2014)",
        commonSeriesSettings: {
            type: "line",
            argumentField: 'direction'
        },
        series: [
            { valueField: "day", name: 'day' },
            { valueField: "night", name: 'night' }
        ],
        argumentAxis: {
            discreteAxisDivisionMode: "crossLabels",
            firstPointOnStartAngle: true
        },
        valueAxis: {
            label: { visible: false },
            constantLines: [{
                value: 4,
                color: "#5f8b95",
                dashStyle: "dash",
                label: {
                    font: {
                        color: "#5f8b95",
                        family: "'MS Courier New', monospace"
                    },
                    text: "4 days"
                }
            }, {
                value: 6,
                color: "#ba4d51",
                dashStyle: "dash",
                label: {
                    font: {
                        color: "#ba4d51",
                        family: "'Zapf-Chancery', cursive"
                    },
                    text: "6 days"
                }
            }]
        }
    });
});

opacity

Specifies the font opacity for a constant line label.

Type: Number
Default Value: undefined

Show Example:
jQuery

In this example, each value axis constant line label has a different font opacity.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
	{ direction: 'N', day: 1, night: 5 },
	{ direction: 'NE', day: 1, night: 1 },
	{ direction: 'E', day: 10, night: 1 },
	{ direction: 'SE', day: 1, night: 1 },
	{ direction: 'S', day: 5, night: 2 },
	{ direction: 'SW', day: 7, night: 8 },
	{ direction: 'W', day: 1, night: 3 },
	{ direction: 'NW', day: 0, night: 3 }
];

$(function () {
    $("#chartContainer").dxPolarChart({
        dataSource: dataSource,
        title: "Wind Rose, Madrid (October 2014)",
        commonSeriesSettings: {
            type: "line",
            argumentField: 'direction'
        },
        series: [
            { valueField: "day", name: 'day' },
            { valueField: "night", name: 'night' }
        ],
        argumentAxis: {
            discreteAxisDivisionMode: "crossLabels",
            firstPointOnStartAngle: true
        },
        valueAxis: {
            label: { visible: false },
            constantLines: [{
                value: 4,
                color: "#5f8b95",
                dashStyle: "dash",
                label: {
                    font: {
                        color: "#5f8b95",
                        opacity: 1
                    },
                    text: "4 days"
                }
            }, {
                value: 6,
                color: "#ba4d51",
                dashStyle: "dash",
                label: {
                    font: {
                        color: "#ba4d51",
                        opacity: 0.8
                    },
                    text: "6 days"
                }
            }]
        }
    });
});

size

Specifies the font size for a constant line label.

Type: Number|String
Default Value: 12

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

Show Example:
jQuery

In this example, each value axis constant line label has a different font size.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
	{ direction: 'N', day: 1, night: 5 },
	{ direction: 'NE', day: 1, night: 1 },
	{ direction: 'E', day: 10, night: 1 },
	{ direction: 'SE', day: 1, night: 1 },
	{ direction: 'S', day: 5, night: 2 },
	{ direction: 'SW', day: 7, night: 8 },
	{ direction: 'W', day: 1, night: 3 },
	{ direction: 'NW', day: 0, night: 3 }
];

$(function () {
    $("#chartContainer").dxPolarChart({
        dataSource: dataSource,
        title: "Wind Rose, Madrid (October 2014)",
        commonSeriesSettings: {
            type: "line",
            argumentField: 'direction'
        },
        series: [
            { valueField: "day", name: 'day' },
            { valueField: "night", name: 'night' }
        ],
        argumentAxis: {
            discreteAxisDivisionMode: "crossLabels",
            firstPointOnStartAngle: true
        },
        valueAxis: {
            label: { visible: false },
            constantLines: [{
                value: 4,
                color: "#5f8b95",
                dashStyle: "dash",
                label: {
                    font: {
                        size: 14
                    },
                    text: "4 days"
                }
            }, {
                value: 6,
                color: "#ba4d51",
                dashStyle: "dash",
                label: {
                    font: {
                        size: 16
                    },
                    text: "6 days"
                }
            }]
        }
    });
});

weight

Specifies the font weight for a constant line label.

Type: Number
Default Value: 400

Show Example:
jQuery

In this example, each value axis constant line label has a different font weight.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
	{ direction: 'N', day: 1, night: 5 },
	{ direction: 'NE', day: 1, night: 1 },
	{ direction: 'E', day: 10, night: 1 },
	{ direction: 'SE', day: 1, night: 1 },
	{ direction: 'S', day: 5, night: 2 },
	{ direction: 'SW', day: 7, night: 8 },
	{ direction: 'W', day: 1, night: 3 },
	{ direction: 'NW', day: 0, night: 3 }
];

$(function () {
    $("#chartContainer").dxPolarChart({
        dataSource: dataSource,
        title: "Wind Rose, Madrid (October 2014)",
        commonSeriesSettings: {
            type: "line",
            argumentField: 'direction'
        },
        series: [
            { valueField: "day", name: 'day' },
            { valueField: "night", name: 'night' }
        ],
        argumentAxis: {
            discreteAxisDivisionMode: "crossLabels",
            firstPointOnStartAngle: true
        },
        valueAxis: {
            label: { visible: false },
            constantLines: [{
                value: 4,
                color: "#5f8b95",
                dashStyle: "dash",
                label: {
                    font: {
                        color: "#5f8b95",
                        weight: 700
                    },
                    text: "4 days"
                }
            }, {
                value: 6,
                color: "#ba4d51",
                dashStyle: "dash",
                label: {
                    font: {
                        color: "#ba4d51",
                        weight: 400
                    },
                    text: "6 days"
                }
            }]
        }
    });
});