label font

    Specifies font options for a constant line label.

    Type: Object

    Show Example:
    jQuery

    In this example, each argument 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 = [
        { 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 },
        { year: 1950, europe: 546, americas: 332, africa: 227 }
    ];
    
    $(function () {
        $("#chartContainer").dxChart({
            dataSource: dataSource,
            commonSeriesSettings: {
                argumentField: 'year'
            },
            series: [
                { valueField: 'europe', name: 'Europe' },
                { valueField: 'americas', name: 'Americas' },
                { valueField: 'africa', name: 'Africa' }
            ],
            argumentAxis: {
                constantLines: [
                    {
                        value: 1955,
                        label: {
                            font: {
                                color: 'lightskyblue',
                                size: 12
                            }
                        }
                    }, {
                        value: 1992,
                        label: {
                            font: {
                                color: 'deepskyblue',
                                size: 14
                            }
                        }
                    }, {
                        value: 2013,
                        label: {
                            font: {
                                color: 'dodgerblue',
                                size: 16
                            }
                        }
                    }
                ]
            }
        });
    });

    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 argument 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 = [
        { 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 },
        { year: 1950, europe: 546, americas: 332, africa: 227 }
    ];
    
    $(function () {
        $("#chartContainer").dxChart({
            dataSource: dataSource,
            commonSeriesSettings: {
                argumentField: 'year'
            },
            series: [
                { valueField: 'europe', name: 'Europe' },
                { valueField: 'americas', name: 'Americas' },
                { valueField: 'africa', name: 'Africa' }
            ],
            argumentAxis: {
                constantLines: [
                    {
                        value: 1955,
                        label: {
                            font: { color: 'lightgreen' }
                        }
                    }, {
                        value: 1992,
                        label: {
                            font: { color: 'yellowgreen' }
                        }
                    }, {
                        value: 2013,
                        label: {
                            font: { color: 'green' }
                        }
                    }
                ]
            }
        });
    });

    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 argument axis constant line label has a different font family.

    <div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
    var dataSource = [
        { 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 },
        { year: 1950, europe: 546, americas: 332, africa: 227 }
    ];
    
    $(function () {
        $("#chartContainer").dxChart({
            dataSource: dataSource,
            commonSeriesSettings: {
                argumentField: 'year'
            },
            series: [
                { valueField: 'europe', name: 'Europe' },
                { valueField: 'americas', name: 'Americas' },
                { valueField: 'africa', name: 'Africa' }
            ],
            argumentAxis: {
                constantLines: [
                    {
                        value: 1955,
                        label: {
                            font: { family: "'MS Courier New', monospace" }
                        }
                    }, {
                        value: 1992,
                        label: {
                            font: { family: "'MS Arial', sans-serif" }
                        }
                    }, {
                        value: 2013,
                        label: {
                            font: { family: "'Zapf-Chancery', cursive" }
                        }
                    }
                ]
            }
        });
    });

    opacity

    Specifies the font opacity for a constant line label.

    Type: Number
    Default Value: undefined

    Show Example:
    jQuery

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

    <div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
    var dataSource = [
        { 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 },
        { year: 1950, europe: 546, americas: 332, africa: 227 }
    ];
    
    $(function () {
        $("#chartContainer").dxChart({
            dataSource: dataSource,
            commonSeriesSettings: {
                argumentField: 'year'
            },
            series: [
                { valueField: 'europe', name: 'Europe' },
                { valueField: 'americas', name: 'Americas' },
                { valueField: 'africa', name: 'Africa' }
            ],
            argumentAxis: {
                constantLines: [
                    {
                        value: 1955,
                        label: {
                            font: { opacity: 0.3 }
                        }
                    }, {
                        value: 1992,
                        label: {
                            font: { opacity: 0.6 }
                        }
                    }, {
                        value: 2013,
                        label: {
                            font: { opacity: 0.9 }
                        }
                    }
                ]
            }
        });
    });

    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 argument axis constant line label has a different font size.

    <div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
    var dataSource = [
        { 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 },
        { year: 1950, europe: 546, americas: 332, africa: 227 }
    ];
    
    $(function () {
        $("#chartContainer").dxChart({
            dataSource: dataSource,
            commonSeriesSettings: {
                argumentField: 'year'
            },
            series: [
                { valueField: 'europe', name: 'Europe' },
                { valueField: 'americas', name: 'Americas' },
                { valueField: 'africa', name: 'Africa' }
            ],
            argumentAxis: {
                constantLines: [
                    {
                        value: 1955,
                        label: {
                            font: { size: 12 }
                        }
                    }, {
                        value: 1992,
                        label: {
                            font: { size: 14 }
                        }
                    }, {
                        value: 2013,
                        label: {
                            font: { size: 16 }
                        }
                    }
                ]
            }
        });
    });

    weight

    Specifies the font weight for a constant line label.

    Type: Number
    Default Value: 400

    Show Example:
    jQuery

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

    <div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
    var dataSource = [
        { 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 },
        { year: 1950, europe: 546, americas: 332, africa: 227 }
    ];
    
    $(function () {
        $("#chartContainer").dxChart({
            dataSource: dataSource,
            commonSeriesSettings: {
                argumentField: 'year'
            },
            series: [
                { valueField: 'europe', name: 'Europe' },
                { valueField: 'americas', name: 'Americas' },
                { valueField: 'africa', name: 'Africa' }
            ],
            argumentAxis: {
                constantLines: [
                    {
                        value: 1955,
                        label: {
                            font: { weight: 100 }
                        }
                    }, {
                        value: 1992,
                        label: {
                            font: { weight: 400 }
                        }
                    }, {
                        value: 2013,
                        label: {
                            font: { weight: 700 }
                        }
                    }
                ]
            }
        });
    });