Point Methods

This section describes the methods that can be used in code to manipulate the Point object.

clearSelection()

Deselects the point.

To learn about point selection, refer to the Selection Handling section.

View Demo

Show Example:
jQuery

Click a point to select it. Then, click it once again to unselect it. This action is performed using the clearSelection() method.

<div id="pieChartContainer" style="height:400px; max-width:600px; margin: 0 auto"></div>
var dataSource = [
    { continent: 'Africa', population: 1022234000 },
    { continent: 'Antarctica', population: 4490 },
    { continent: 'Asia', population: 4164252000 },
    { continent: 'Australia', population: 29127000 },
    { continent: 'Europe', population: 738199000 },
    { continent: 'North America', population: 542056000 },
    { continent: 'South America', population: 392555000 }
];

$(function () {
    $("#pieChartContainer").dxPieChart({
        dataSource: dataSource,
        series: {
            argumentField: 'continent',
            valueField: 'population'
        },
        title: 'Population by Continent',
        pointSelectionMode: 'multiple',
        onPointClick: function (info) {
            var clickedPoint = info.target;
            clickedPoint.isSelected() ? clickedPoint.clearSelection() : clickedPoint.select();
        }
    });
});

getColor()

Gets the color of a particular point.

Return Value: String
The color of a point.

getLabel()

Allows you to obtain the label of a series point.

Return Value: Object|Array
The point label. If one series point has two labels, like in a Range Bar or Range Area series, the method returns an array of point labels.

To discover members you can use in code to manipulate a point label, refer to the Label object description.

hide()

Hides a specific point.

hideTooltip()

Hides the tooltip of the point.

The hideTooltip() and showTooltip() methods allow you to change tooltip visibility in code. Call the point's hideTooltip() method to hide the tooltip of this point.

Show Example:
jQuery

In this example, the point's hideTooltip() method, which causes a tooltip to hide, is called in 1000 milliseconds after the tooltip appears. Hover over any point in the chart to see this behavior.

<div id="pieChartContainer" style="height:400px; max-width:600px; margin: 0 auto"></div>
var dataSource = [
    { continent: 'Africa', population: 1022234000 },
    { continent: 'Antarctica', population: 4490 },
    { continent: 'Asia', population: 4164252000 },
    { continent: 'Australia', population: 29127000 },
    { continent: 'Europe', population: 738199000 },
    { continent: 'North America', population: 542056000 },
    { continent: 'South America', population: 392555000 }
];

$(function () {
    $("#pieChartContainer").dxPieChart({
        dataSource: dataSource,
        series: {
            type: 'doughnut',
            argumentField: 'continent',
            valueField: 'population'
        },
        title: 'Population by Continent',
        tooltip: {
            enabled: true,
            format: 'largeNumber',
            precision: 2
        },
        onTooltipShown: function (info) {
            var point = info.target;
            setTimeout(function () {
                point.hideTooltip()
            }, 1000)
        }
    });
});

isHovered()

Provides information about the hover state of a point.

Return Value: true|false
Hover state of a point.

When a point is hovered over, this method returns true. Otherwise, the returned value is false.

To learn more about point and series hover operation, refer to the Hover Handling topic.

isSelected()

Provides information about the selection state of a point.

Return Value: true|false
Selection state of a point.

When a point is selected, this method returns true. Otherwise, the returned value is false.

You can select a point using its select() method. To learn more about point and series selection, refer to the Selection Handling topic.

View Demo

isVisible()

Provides information about the visibility state of a point.

Return Value: Boolean
Visibility state of a point.

When a point is visible, this method returns true. Otherwise, the returned value is false.

You can make a point visible using its show() method or hide a point using its hide() method.

select()

Selects the point. The point is displayed in a 'selected' style until another point is selected or the current point is deselected programmatically.

To learn about point selection, refer to the Selection Handling section.

View Demo

Show Example:
jQuery

In this example, click a point to select it. Then, click it once again to unselect it. The selection is performed using the select() method.

<div id="pieChartContainer" style="height:400px; max-width:600px; margin: 0 auto"></div>
var dataSource = [
    { continent: 'Africa', population: 1022234000 },
    { continent: 'Antarctica', population: 4490 },
    { continent: 'Asia', population: 4164252000 },
    { continent: 'Australia', population: 29127000 },
    { continent: 'Europe', population: 738199000 },
    { continent: 'North America', population: 542056000 },
    { continent: 'South America', population: 392555000 }
];

$(function () {
    $("#pieChartContainer").dxPieChart({
        dataSource: dataSource,
        series: {
            argumentField: 'continent',
            valueField: 'population'
        },
        title: 'Population by Continent',
        pointSelectionMode: 'multiple',
        onPointClick: function (info) {
            var clickedPoint = info.target;
            clickedPoint.isSelected() ? clickedPoint.clearSelection() : clickedPoint.select();
        }
    });
});

show()

Makes a specific point visible.

showTooltip()

Shows the tooltip of the point.

The hideTooltip() and showTooltip() methods allow you to change tooltip visibility in code. Call the point's showTooltip() method to show the tooltip of this point.

View Demo

Show Example:
jQuery

In this example, the point's showTooltip() method is called within the handler of the Show next tooltip button click. Here, this handler displays the tooltip of the next point in the order.

<div id="pieChartContainer" style="height:400px; max-width:600px; margin: 0 auto"></div>
<div id="buttonContainer" style="height:40px;width:250px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px; text-align:center">
    <input type='button' id='tooltipShow' value='Show next tooltip'>
</div>
var dataSource = [
    { continent: 'Africa', population: 1022234000 },
    { continent: 'Antarctica', population: 4490 },
    { continent: 'Asia', population: 4164252000 },
    { continent: 'Australia', population: 29127000 },
    { continent: 'Europe', population: 738199000 },
    { continent: 'North America', population: 542056000 },
    { continent: 'South America', population: 392555000 }
];

$(function () {
    $("#pieChartContainer").dxPieChart({
        dataSource: dataSource,
        series: {
            type: 'doughnut',
            argumentField: 'continent',
            valueField: 'population'
        },
        title: 'Population by Continent',
        tooltip: { enabled: true }
    });

    var clickCounter = 0;
    $('#tooltipShow').click(function () {
        var pieChart = $("#pieChartContainer").dxPieChart("instance");
        var series = pieChart.getSeries();
        var points = series.getAllPoints();
        if (clickCounter == dataSource.length)
            clickCounter = 0;
        points[clickCounter].showTooltip();
        clickCounter++;
    });
});