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 deselect it. The deselection is performed using the clearSelection() method.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { country: 'China', y014: 320866959, y1564: 853191410, y65: 87774113 },
    { country: 'India', y014: 340419115, y1564: 626520945, y65: 47063757 },
    { country: 'United States', y014: 58554755, y1564: 182172625, y65: 34835293 },
    { country: 'Indonesia', y014: 68715705, y1564: 146014815, y65: 10053690 },
    { country: 'Brazil', y014: 50278034, y1564: 113391494, y65: 9190842 },
    { country: 'Russia', y014: 26465156, y1564: 101123777, y65: 18412243 }
];

var series = [
    { valueField: 'y014', name: '0-14 years old' },
    { valueField: 'y1564', name: '15-64 years old' },
    { valueField: 'y65', name: '65 years and older' }
];

$(function () {
    var totalPopulation = 0;
    $('#chartContainer').dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'country'
        },
        series: series,
        title: 'Population: Age Structure (2000)',
        legend: {
            horizontalAlignment: 'center',
            verticalAlignment: 'bottom'
        },
        pointSelectionMode: 'multiple',
        onPointClick: function (info) {
            var clickedPoint = info.target;
            clickedPoint.isSelected() ? clickedPoint.clearSelection() : clickedPoint.select();
        }
    });
});

getBoundingRect()

Gets the parameters of the point's minimum bounding rectangle (MBR).

Return Value: Object
An object with the following content: { x: numeric, y: numeric, height: numeric, width: numeric }.

The object returned by this method contains the X and Y coordinates of the upper-left corner of the MBR. These coordinates are relative to the client area (widget's container). Additionally, the returned object contains the height and width of the MBR.

NOTE: This method is not supported for the rangeBar and rangeArea series points.

getColor()

Gets the color of a particular point.

Return Value: String
The color of a point.

getLabel()

Allows you to obtain the label(s) of the series point.

Return Value: Point Label|Array
The point label(s).

This method returns an array of two Label objects if a series point has two labels, like in a range bar or range area series. Otherwise, it returns an array of only one Label object.

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 of the chart to see this behavior.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { arg: 10, y: -12 },
    { arg: 20, y: -32 },
    { arg: 40, y: -20 },
    { arg: 50, y: -39 },
    { arg: 60, y: -10 },
    { arg: 75, y: 10 },
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'arg'
        },
        series: [
            { valueField: 'y' },
        ],
        legend: { visible: false },
        tooltip: {
            enabled: true
        },
        onTooltipShown: function (info) {
            var point = info.target;
            setTimeout(function () {
                point.hideTooltip()
            }, 1000)
        }
    });
});

isHovered()

Provides information about the hover state of a point.

Return Value: Boolean
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.

Show Example:
jQuery

Hover over a point on the chart and information about the country of the hovered series point will appear under the chart. When the point that has been hovered over is hovered out, the information disappears. This behavior is achieved using the isHovered() method of the hovered point.

<div id="chartContainer" style="height:500px; max-width:800px; margin: 0 auto"></div>
<div style="height:150px;max-width:800px;margin:0px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:12px">
    <span id="selectionSpan" />
</div>
var dataSource = [
    { country: 'China', y014: 320866959, y1564: 853191410, y65: 87774113, tag: 'China, officially the People&#39;s Republic of China (PRC), is a country in East Asia. It is the world&#39;s most populous country, with a population of over 1.3 billion. The PRC is a single-party state governed by the Communist Party of China with its seat of government in the capital city of Beijing. It exercises jurisdiction over 22 provinces, five autonomous regions, four direct-controlled municipalities (Beijing, Tianjin, Shanghai, and Chongqing), and two mostly self-governing special administrative regions (Hong Kong and Macau). The PRC also claims Taiwan—which is controlled by the Republic of China (ROC), a separate political entity—as its 23rd province, a claim controversial due to the complex political status of Taiwan and the unresolved Chinese Civil War.' },
    { country: 'India', y014: 340419115, y1564: 626520945, y65: 47063757, tag: 'India, officially the Republic of India, is a country in South Asia. It is the seventh-largest country by area, the second-most populous country with over 1.2 billion people, and the most populous democracy in the world. Bounded by the Indian Ocean on the south, the Arabian Sea on the south-west, and the Bay of Bengal on the south-east, it shares land borders with Pakistan to the west; China, Nepal, and Bhutan to the north-east; and Burma and Bangladesh to the east. In the Indian Ocean, India is in the vicinity of Sri Lanka and the Maldives; in addition, India&#39;s Andaman and Nicobar Islands share a maritime border with Thailand and Indonesia.' },
    { country: 'United States', y014: 58554755, y1564: 182172625, y65: 34835293, tag: 'The United States of America (USA), commonly called the United States (US or U.S.) and America, is a federal constitutional republic consisting of fifty states and a federal district. The country is situated mostly in central North America, where its forty-eight contiguous states and Washington, D.C., the capital district, lie between the Pacific and Atlantic Oceans, bordered by Canada to the north and Mexico to the south. The state of Alaska is in the northwest of the continent, with Canada to the east and Russia to the west across the Bering Strait. The state of Hawaii is an archipelago in the mid-Pacific. The country also possesses several territories in the Pacific and Caribbean. At 3.79 million square miles (9.83 million km2) and with over 315 million people, the United States is the third- or fourth-largest country by total area, and the third-largest by both land area and population. It is one of the world&#39;s most ethnically diverse and multicultural nations, the product of large-scale immigration from many countries. The geography and climate of the United States is also extremely diverse and is home to a variety of species.' },
    { country: 'Indonesia', y014: 68715705, y1564: 146014815, y65: 10053690, tag: 'Indonesia, officially the Republic of Indonesia, is a country in Southeast Asia and Oceania. Indonesia is an archipelago comprising approximately 17,508 islands. It has 34 provinces with over 238 million people, and is the world&#39;s fourth most populous country. Indonesia is a republic, with an elected legislature and president. The nation&#39;s capital city is Jakarta. The country shares land borders with Papua New Guinea, East Timor, and Malaysia. Other neighboring countries include Singapore, Philippines, Australia, Palau, and the Indian territory of the Andaman and Nicobar Islands. Indonesia is a founding member of ASEAN and a member of the G-20 major economies. The Indonesian economy is the world&#39;s sixteenth largest by nominal GDP and fifteenth largest by purchasing power parity.' },
    { country: 'Brazil', y014: 50278034, y1564: 113391494, y65: 9190842, tag: 'Brazil, officially the Federative Republic of Brazil, is the largest country in South America and in the Latin America region. It is the world&#39;s fifth largest country, both by geographical area and by population with over 193 million people. It is the largest Lusophone country in the world, and the only one in the Americas.' },
    { country: 'Russia', y014: 26465156, y1564: 101123777, y65: 18412243, tag: 'Russia, also officially known as the Russian Federation, is a country in northern Eurasia. It is a federal semi-presidential republic, comprising 83 federal subjects. At 17,075,400 square kilometres (6,592,800 sq mi), Russia is the largest country in the world, covering more than one-eighth of the Earth&#39;s inhabited land area. Russia is also the world&#39;s ninth most populous nation with 143 million people as of 2012. Extending across the whole of northern Asia, Russia spans nine time zones and incorporates a wide range of environments and landforms. Russia has the world&#39;s largest reserves of mineral and energy resources and is the largest producer of oil and natural gas globally. Russia has the world&#39;s largest forest reserves and its lakes contain approximately one-quarter of the world&#39;s liquid fresh water.' }
    ];
  
var series = [
    { valueField: 'y014', name: '0-14 years' },
    { valueField: 'y1564', name: '15-64 years' },
    { valueField: 'y65', name: '65 years and older' }
];
    
$("#chartContainer").dxChart({
    dataSource: dataSource,
    commonSeriesSettings: {
        argumentField: 'country',
        tagField: 'tag',
        point: {
            hoverMode: 'allArgumentPoints'
        }
    },
    series: series,
    title: 'Population: Age Structure (2000)',
    legend: {
        horizontalAlignment: 'center',
        verticalAlignment: 'bottom'
    },
    onPointHoverChanged: function (info) {
        var hoveredPoint = info.target;
        if (hoveredPoint.isHovered()) {
            $('#selectionSpan').html(hoveredPoint.tag);
        } else {
            $('#selectionSpan').html('');
        }
    }
});

isSelected()

Provides information about the selection state of a point.

Return Value: Boolean
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

Show Example:
jQuery

Click a point on the chart to select this point. Information about the country of the selected series point will appear under the chart. Click this point again and the information will disappear. This behavior is achieved using the isSelected() method of the clicked point.

<div id="chartContainer" style="height:500px; max-width:800px; margin: 0 auto"></div>
<div style="height:150px;max-width:800px;margin:0px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:12px">
    <span id="selectionSpan" />
</div>
var dataSource = [
    { country: 'China', y014: 320866959, y1564: 853191410, y65: 87774113, tag: 'China, officially the People&#39;s Republic of China (PRC), is a country in East Asia. It is the world&#39;s most populous country, with a population of over 1.3 billion. The PRC is a single-party state governed by the Communist Party of China with its seat of government in the capital city of Beijing. It exercises jurisdiction over 22 provinces, five autonomous regions, four direct-controlled municipalities (Beijing, Tianjin, Shanghai, and Chongqing), and two mostly self-governing special administrative regions (Hong Kong and Macau). The PRC also claims Taiwan—which is controlled by the Republic of China (ROC), a separate political entity—as its 23rd province, a claim controversial due to the complex political status of Taiwan and the unresolved Chinese Civil War.' },
    { country: 'India', y014: 340419115, y1564: 626520945, y65: 47063757, tag: 'India, officially the Republic of India, is a country in South Asia. It is the seventh-largest country by area, the second-most populous country with over 1.2 billion people, and the most populous democracy in the world. Bounded by the Indian Ocean on the south, the Arabian Sea on the south-west, and the Bay of Bengal on the south-east, it shares land borders with Pakistan to the west; China, Nepal, and Bhutan to the north-east; and Burma and Bangladesh to the east. In the Indian Ocean, India is in the vicinity of Sri Lanka and the Maldives; in addition, India&#39;s Andaman and Nicobar Islands share a maritime border with Thailand and Indonesia.' },
    { country: 'United States', y014: 58554755, y1564: 182172625, y65: 34835293, tag: 'The United States of America (USA), commonly called the United States (US or U.S.) and America, is a federal constitutional republic consisting of fifty states and a federal district. The country is situated mostly in central North America, where its forty-eight contiguous states and Washington, D.C., the capital district, lie between the Pacific and Atlantic Oceans, bordered by Canada to the north and Mexico to the south. The state of Alaska is in the northwest of the continent, with Canada to the east and Russia to the west across the Bering Strait. The state of Hawaii is an archipelago in the mid-Pacific. The country also possesses several territories in the Pacific and Caribbean. At 3.79 million square miles (9.83 million km2) and with over 315 million people, the United States is the third- or fourth-largest country by total area, and the third-largest by both land area and population. It is one of the world&#39;s most ethnically diverse and multicultural nations, the product of large-scale immigration from many countries. The geography and climate of the United States is also extremely diverse and is home to a variety of species.' },
    { country: 'Indonesia', y014: 68715705, y1564: 146014815, y65: 10053690, tag: 'Indonesia, officially the Republic of Indonesia, is a country in Southeast Asia and Oceania. Indonesia is an archipelago comprising approximately 17,508 islands. It has 34 provinces with over 238 million people, and is the world&#39;s fourth most populous country. Indonesia is a republic, with an elected legislature and president. The nation&#39;s capital city is Jakarta. The country shares land borders with Papua New Guinea, East Timor, and Malaysia. Other neighboring countries include Singapore, Philippines, Australia, Palau, and the Indian territory of the Andaman and Nicobar Islands. Indonesia is a founding member of ASEAN and a member of the G-20 major economies. The Indonesian economy is the world&#39;s sixteenth largest by nominal GDP and fifteenth largest by purchasing power parity.' },
    { country: 'Brazil', y014: 50278034, y1564: 113391494, y65: 9190842, tag: 'Brazil, officially the Federative Republic of Brazil, is the largest country in South America and in the Latin America region. It is the world&#39;s fifth largest country, both by geographical area and by population with over 193 million people. It is the largest Lusophone country in the world, and the only one in the Americas.' },
    { country: 'Russia', y014: 26465156, y1564: 101123777, y65: 18412243, tag: 'Russia, also officially known as the Russian Federation, is a country in northern Eurasia. It is a federal semi-presidential republic, comprising 83 federal subjects. At 17,075,400 square kilometres (6,592,800 sq mi), Russia is the largest country in the world, covering more than one-eighth of the Earth&#39;s inhabited land area. Russia is also the world&#39;s ninth most populous nation with 143 million people as of 2012. Extending across the whole of northern Asia, Russia spans nine time zones and incorporates a wide range of environments and landforms. Russia has the world&#39;s largest reserves of mineral and energy resources and is the largest producer of oil and natural gas globally. Russia has the world&#39;s largest forest reserves and its lakes contain approximately one-quarter of the world&#39;s liquid fresh water.' }
    ];
  
var series = [
    { valueField: 'y014', name: '0-14 years' },
    { valueField: 'y1564', name: '15-64 years' },
    { valueField: 'y65', name: '65 years and older' }
];
    
$("#chartContainer").dxChart({
    dataSource: dataSource,
    commonSeriesSettings: {
        argumentField: 'country',
        tagField: 'tag',
        point: {
            selectionMode: 'allArgumentPoints'
        }
    },
    series: series,
    title: 'Population: Age Structure (2000)',
    legend: {
        horizontalAlignment: 'center',
        verticalAlignment: 'bottom'
    },
    onPointClick: function (info) {
        var clickedPoint = info.target;
        clickedPoint.isSelected() ? clickedPoint.clearSelection() : clickedPoint.select();
    },
    onPointSelectionChanged: function (info) {
        var selectedPoint = info.target;
        if (selectedPoint.isSelected()) {
            $('#selectionSpan').html(selectedPoint.tag);
        } else {
            $('#selectionSpan').html('');
        }
    }
});

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 deselect it. The selection is performed using the select() method.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { country: 'China', y014: 320866959, y1564: 853191410, y65: 87774113 },
    { country: 'India', y014: 340419115, y1564: 626520945, y65: 47063757 },
    { country: 'United States', y014: 58554755, y1564: 182172625, y65: 34835293 },
    { country: 'Indonesia', y014: 68715705, y1564: 146014815, y65: 10053690 },
    { country: 'Brazil', y014: 50278034, y1564: 113391494, y65: 9190842 },
    { country: 'Russia', y014: 26465156, y1564: 101123777, y65: 18412243 }
];
var series = [
    { valueField: 'y014', name: '0-14 years old' },
    { valueField: 'y1564', name: '15-64 years old' },
    { valueField: 'y65', name: '65 years and older' }
];

$(function () {
    $('#chartContainer').dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'country'
        },
        series: series,
        title: 'Population: Age Structure (2000)',
        legend: {
            horizontalAlignment: 'center',
            verticalAlignment: 'bottom'
        },
        onPointClick: function (info) {
            var clickedPoint = info.target;
            clickedPoint.isSelected() ? clickedPoint.clearSelection() : clickedPoint.select();
        }
    });
});

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="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
<div id="buttonsContainer" 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 = [
    { arg: 10, y: -12 },
    { arg: 20, y: -32 },
    { arg: 40, y: -20 },
    { arg: 50, y: -39 },
    { arg: 60, y: -10 },
    { arg: 75, y: 10 },
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'arg'
        },
        series: [
            { valueField: 'y', name: 'value' },
        ],
        legend: { visible: false },
        tooltip: {
            enabled: true
        }
    });

    var clickCounter = 0;
    $('#tooltipShow').click(function () {
        var chart = $("#chartContainer").dxChart("instance");
        var series = chart.getSeriesByName('value');
        var points = series.getAllPoints();
        if (clickCounter == dataSource.length)
            clickCounter = 0;
        points[clickCounter].showTooltip();
        clickCounter++;
    });
});