label connector

Specifies connector options for series point labels.

A series point label can be placed separately, near the represented point. To make the relationship between a label and its respective point clear, use a connector. Set the connector's visibility and appearance options using the connector object.

Show Example:
jQuery

In this example, the point labels are displayed with connectors colored in cornflowerblue.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { title: 'Avatar (2009)', budget2000: 237000000, gross2000: 2782245172, relation2000: 11.739 },
    { title: 'Titanic (1997)', budget1990: 200000000, gross1990: 2186772302, relation1990: 10.934 },
    { title: 'The Avengers (2012)', budget2010: 220000000, gross2010: 1518594910, relation2010: 6.903 },
    { title: 'Harry Potter and the Deathly Hallows Part 2 (2011)', budget2010: 125000000, gross2010: 1341511219, relation2010: 10.732 },
    { title: 'Iron Man 3 (2013)', budget2010: 200000000, gross2010: 1215439994, relation2010: 6.077 },
    { title: 'Transformers: Dark of the Moon (2011)', budget2010: 195000000, gross2010: 1123794079, relation2010: 5.763 },
    { title: 'The Lord of the Rings: The Return of the King (2003)', budget2000: 94000000, gross2000: 1119929521, relation2000: 11.914 },
    { title: 'Skyfall (2012)', budget2010: 200000000, gross2010: 1108561013, relation2010: 5.543 },
    { title: 'The Dark Knight Rises (2012)', budget2010: 250000000, gross2010: 1084439099, relation2010: 4.338 },
    { title: "Pirates of the Caribbean: Dead Man's Chest (2006)", budget2000: 225000000, gross2000: 1066179725, relation2000: 4.739 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            type: 'bubble',
            tagField: 'title',
            label: {
                visible: true,
                format: 'largeNumber',
                connector: {
                    visible: true,
                    color: 'cornflowerblue'
                }
            }
        },
        argumentAxis: {
            title: 'Worldwide Gross',
            label: { format: 'largeNumber', precision: 1 }
        },
        valueAxis: {
            title: 'Movie Budget',
            label: { format: 'largeNumber' }
        },
        palette: 'Harmony Light',
        series: [
            { argumentField: 'gross1990', valueField: 'budget1990', sizeField: 'relation1990', name: '1990 - 1999' },
            { argumentField: 'gross2000', valueField: 'budget2000', sizeField: 'relation2000', name: '2000 - 2009' },
            { argumentField: 'gross2010', valueField: 'budget2010', sizeField: 'relation2010', name: '2010 - now' }
        ],
        legend: { horizontalAlignment: 'center', verticalAlignment: 'bottom' },
        tooltip: {
            enabled: true,
            customizeTooltip: function () {
                return {
                    text: this.point.tag
                };
            }
        },
        title: "10 Highest-Grossing Movies of All Time"
    });
});

color

Specifies the color of label connectors.

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 are displayed with connectors colored in mediumorchid.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { title: 'Avatar (2009)', budget2000: 237000000, gross2000: 2782245172, relation2000: 11.739 },
    { title: 'Titanic (1997)', budget1990: 200000000, gross1990: 2186772302, relation1990: 10.934 },
    { title: 'The Avengers (2012)', budget2010: 220000000, gross2010: 1518594910, relation2010: 6.903 },
    { title: 'Harry Potter and the Deathly Hallows Part 2 (2011)', budget2010: 125000000, gross2010: 1341511219, relation2010: 10.732 },
    { title: 'Iron Man 3 (2013)', budget2010: 200000000, gross2010: 1215439994, relation2010: 6.077 },
    { title: 'Transformers: Dark of the Moon (2011)', budget2010: 195000000, gross2010: 1123794079, relation2010: 5.763 },
    { title: 'The Lord of the Rings: The Return of the King (2003)', budget2000: 94000000, gross2000: 1119929521, relation2000: 11.914 },
    { title: 'Skyfall (2012)', budget2010: 200000000, gross2010: 1108561013, relation2010: 5.543 },
    { title: 'The Dark Knight Rises (2012)', budget2010: 250000000, gross2010: 1084439099, relation2010: 4.338 },
    { title: "Pirates of the Caribbean: Dead Man's Chest (2006)", budget2000: 225000000, gross2000: 1066179725, relation2000: 4.739 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            type: 'bubble',
            tagField: 'title',
            label: {
                visible: true,
                format: 'largeNumber',
                connector: {
                    visible: true,
                    color: 'mediumorchid'
                }
            }
        },
        argumentAxis: {
            title: 'Worldwide Gross',
            label: { format: 'largeNumber', precision: 1 }
        },
        valueAxis: {
            title: 'Movie Budget',
            label: { format: 'largeNumber' }
        },
        palette: 'Soft Pastel',
        series: [
            { argumentField: 'gross1990', valueField: 'budget1990', sizeField: 'relation1990', name: '1990 - 1999' },
            { argumentField: 'gross2000', valueField: 'budget2000', sizeField: 'relation2000', name: '2000 - 2009' },
            { argumentField: 'gross2010', valueField: 'budget2010', sizeField: 'relation2010', name: '2010 - now' }
        ],
        legend: { horizontalAlignment: 'center', verticalAlignment: 'bottom' },
        tooltip: {
            enabled: true,
            customizeTooltip: function () {
                return {
                    text: this.point.tag
                };
            }
        },
        title: "10 Highest-Grossing Movies of All Time"
    });
});

visible

Indicates whether or not label connectors are visible.

Show Example:
jQuery

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

<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="showConnectorCheckbox"> Show Label Connectors
</div>
var dataSource = [
    { title: 'Avatar (2009)', budget2000: 237000000, gross2000: 2782245172, relation2000: 11.739 },
    { title: 'Titanic (1997)', budget1990: 200000000, gross1990: 2186772302, relation1990: 10.934 },
    { title: 'The Avengers (2012)', budget2010: 220000000, gross2010: 1518594910, relation2010: 6.903 },
    { title: 'Harry Potter and the Deathly Hallows Part 2 (2011)', budget2010: 125000000, gross2010: 1341511219, relation2010: 10.732 },
    { title: 'Iron Man 3 (2013)', budget2010: 200000000, gross2010: 1215439994, relation2010: 6.077 },
    { title: 'Transformers: Dark of the Moon (2011)', budget2010: 195000000, gross2010: 1123794079, relation2010: 5.763 },
    { title: 'The Lord of the Rings: The Return of the King (2003)', budget2000: 94000000, gross2000: 1119929521, relation2000: 11.914 },
    { title: 'Skyfall (2012)', budget2010: 200000000, gross2010: 1108561013, relation2010: 5.543 },
    { title: 'The Dark Knight Rises (2012)', budget2010: 250000000, gross2010: 1084439099, relation2010: 4.338 },
    { title: "Pirates of the Caribbean: Dead Man's Chest (2006)", budget2000: 225000000, gross2000: 1066179725, relation2000: 4.739 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            type: 'bubble',
            tagField: 'title',
            label: {
                visible: true,
                format: 'largeNumber',
                connector: { visible: false }
            }
        },
        animation: { enabled: false },
        argumentAxis: {
            title: 'Worldwide Gross',
            label: { format: 'largeNumber', precision: 1 }
        },
        valueAxis: {
            title: 'Movie Budget',
            label: { format: 'largeNumber' }
        },
        palette: 'Bright',
        series: [
            { argumentField: 'gross1990', valueField: 'budget1990', sizeField: 'relation1990', name: '1990 - 1999' },
            { argumentField: 'gross2000', valueField: 'budget2000', sizeField: 'relation2000', name: '2000 - 2009' },
            { argumentField: 'gross2010', valueField: 'budget2010', sizeField: 'relation2010', name: '2010 - now' }
        ],
        legend: { horizontalAlignment: 'center', verticalAlignment: 'bottom' },
        tooltip: {
            enabled: true,
            customizeTooltip: function () {
                return {
                    text: this.point.tag
                };
            }
        },
        title: "10 Highest-Grossing Movies of All Time"
    });

    $('#showConnectorCheckbox').change(function () {
        var chart = $('#chartContainer').dxChart('instance');
        chart.option({
            commonSeriesSettings: {
                label: {
                    connector: { visible: this.checked }
                }
            }
        });
    });
});

width

Specifies the width of label connectors.

Show Example:
jQuery

In this example, the width option of the label connectors is set to 4.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { title: 'Avatar (2009)', budget2000: 237000000, gross2000: 2782245172, relation2000: 11.739 },
    { title: 'Titanic (1997)', budget1990: 200000000, gross1990: 2186772302, relation1990: 10.934 },
    { title: 'The Avengers (2012)', budget2010: 220000000, gross2010: 1518594910, relation2010: 6.903 },
    { title: 'Harry Potter and the Deathly Hallows Part 2 (2011)', budget2010: 125000000, gross2010: 1341511219, relation2010: 10.732 },
    { title: 'Iron Man 3 (2013)', budget2010: 200000000, gross2010: 1215439994, relation2010: 6.077 },
    { title: 'Transformers: Dark of the Moon (2011)', budget2010: 195000000, gross2010: 1123794079, relation2010: 5.763 },
    { title: 'The Lord of the Rings: The Return of the King (2003)', budget2000: 94000000, gross2000: 1119929521, relation2000: 11.914 },
    { title: 'Skyfall (2012)', budget2010: 200000000, gross2010: 1108561013, relation2010: 5.543 },
    { title: 'The Dark Knight Rises (2012)', budget2010: 250000000, gross2010: 1084439099, relation2010: 4.338 },
    { title: "Pirates of the Caribbean: Dead Man's Chest (2006)", budget2000: 225000000, gross2000: 1066179725, relation2000: 4.739 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            type: 'bubble',
            tagField: 'title',
            label: {
                visible: true,
                format: 'largeNumber',
                connector: {
                    visible: true,
                    width: 4
                }
            }
        },
        argumentAxis: {
            title: 'Worldwide Gross',
            label: { format: 'largeNumber', precision: 1 }
        },
        valueAxis: {
            title: 'Movie Budget',
            label: { format: 'largeNumber' }
        },
        palette: 'Pastel',
        series: [
            { argumentField: 'gross1990', valueField: 'budget1990', sizeField: 'relation1990', name: '1990 - 1999' },
            { argumentField: 'gross2000', valueField: 'budget2000', sizeField: 'relation2000', name: '2000 - 2009' },
            { argumentField: 'gross2010', valueField: 'budget2010', sizeField: 'relation2010', name: '2010 - now' }
        ],
        legend: { horizontalAlignment: 'center', verticalAlignment: 'bottom' },
        tooltip: {
            enabled: true,
            customizeTooltip: function () {
                return {
                    text: this.point.tag
                };
            }
        },
        title: "10 Highest-Grossing Movies of All Time"
    });
});