End-User Interaction

To be fully interactive, the widgets must respond to end-user actions. These actions are tracked by a number of events. You can subscribe to an event and execute any code in an event handler. In this section, you will learn to handle click, hover and selection events. Further, you will implement zooming and scrolling in the Chart widget.

See Also

Click Handling

This topic explains how to handle user clicks. To learn about hover and selection, refer to the Hover Handling and Selection Handling topics, respectively.

Series Click

You can handle a series click. To do this, implement a callback function and assign it to the chart's onSeriesClick option.

JavaScript
var chartOptions = {
    onSeriesClick: function (info) {
        //...
    }
};

The onSeriesClick callback function accepts an object that contains information on the click event. Fields of this object are described in the onSeriesClick option description. Among these fields, you can find the clicked series. An object that represents this series is described in the Series section.

NOTE: There are series that consist of points only, e.g., the bar-like and candleStick series of the Chart widget, and the pie and doughnut series of the PieChart widget. The onSeriesClick function is not called when clicking a point (a bar or a slice) in these types of series. To handle click for these series, implement the onPointClick callback function and access the series of the clicked point (see the Point Click topic).

Show Example:
AngularJS
Knockout
jQuery

In this example, when you click a series, the chart calculates the maximum point value from this series and outputs it below. To get all points of the clicked series, the series' getAllPoints method is used.

<div ng-controller="exampleController">
    <div style="height:500px; max-width:700px; margin: 0px auto" dx-chart="chartConfiguration"></div>
    <div style="height:20px; margin:5px; text-align:center; font-family:'Segoe UI'; font-size:10pt">{{ outputText }}</div>
</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}
];

angular
    .module('myApp', ['dx'])
    .controller('exampleController', function ($scope) {
        $scope.outputText = "";
        $scope.chartConfiguration = {
            dataSource: dataSource,
            commonSeriesSettings: { argumentField: 'country' },
            series: [
                { valueField: 'y014', name: '0-14 years' },
                { valueField: 'y1564', name: '15-64 years' },
                { valueField: 'y65', name: '65 years and older' }
            ],
            title: 'Population: Age Structure (2000)',
            legend: {
                horizontalAlignment: 'center',
                verticalAlignment: 'bottom'
            },
            valueAxis: {
                label: { format: 'largeNumber' }
            },
            onSeriesClick: function (info) {
                var clickedSeries = info.target;
                var valueArray = [];
                
                angular.forEach(clickedSeries.getAllPoints(), function (currentPoint) {
                    valueArray.push(currentPoint.value);
                });
                
                valueArray.max = function () {
                    return Math.max.apply(Math, valueArray);
                };
                
                $scope.outputText = 'Maximum value in the "' + clickedSeries.name + '" series: ' + valueArray.max();
            }
        };
    });

angular.element(document).ready(function () {
   angular.bootstrap(document, ['myApp']);
});

In this example, when you click a series, the chart calculates the maximum point value from this series and outputs it below. To get all points of the clicked series, the series' getAllPoints method is used.

<div style="height:500px; max-width:700px; margin: 0px auto" data-bind="dxChart: chartConfiguration"></div>
<div style="height:20px; margin:5px; text-align:center; font-family:'Segoe UI'; font-size:10pt" data-bind="text: outputText"></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 viewModel = {
    outputText: ko.observable(),
    chartConfiguration: {
        dataSource: dataSource,
        commonSeriesSettings: { argumentField: 'country' },
        series: [
            { valueField: 'y014', name: '0-14 years' },
            { valueField: 'y1564', name: '15-64 years' },
            { valueField: 'y65', name: '65 years and older' }
        ],
        title: 'Population: Age Structure (2000)',
        legend: {
            horizontalAlignment: 'center',
            verticalAlignment: 'bottom'
        },
        valueAxis: {
            label: { format: 'largeNumber' }
        },
        onSeriesClick: function (info) {
            var clickedSeries = info.target;
            var valueArray = [];
            
            ko.utils.arrayForEach(clickedSeries.getAllPoints(), function (currentPoint) {
                valueArray.push(currentPoint.value);
            });
            
            valueArray.max = function () {
                return Math.max.apply(Math, valueArray);
            };
            
            viewModel.outputText('Maximum value in the "' + clickedSeries.name + '" series: ' + valueArray.max());
        }
    }
};

ko.applyBindings(viewModel);

In this example, when you click a series, the chart calculates the maximum point value from this series and outputs it below. To get all points of the clicked series, the series' getAllPoints method is used.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0px auto"></div>
<div id="outputText" style="height:20px; margin:5px; text-align:center; font-family:'Segoe UI'; font-size:10pt"></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}
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: { argumentField: 'country' },
        series: [
            { valueField: 'y014', name: '0-14 years' },
            { valueField: 'y1564', name: '15-64 years' },
            { valueField: 'y65', name: '65 years and older' }
        ],
        title: 'Population: Age Structure (2000)',
        legend: {
            horizontalAlignment: 'center',
            verticalAlignment: 'bottom'
        },
        valueAxis: {
            label: { format: 'largeNumber' }
        },
        onSeriesClick: function (info) {
            var clickedSeries = info.target;
            var valueArray = [];
            
            $.each(clickedSeries.getAllPoints(), function (_, currentPoint) {
                valueArray.push(currentPoint.value);
            });
            
            valueArray.max = function () {
                return Math.max.apply(Math, valueArray);
            };
            
            $('#outputText').html('Maximum value in the &#34;' + clickedSeries.name + '&#34; series: ' + valueArray.max());
        }
    });
});

Point Click

You can handle the click on a data point of any type (point, bar, pie slice, etc.). To do this, implement a callback function and assign it to the onPointClick option of the chart's configuration object.

JavaScript
var chartOptions = {
    onPointClick: function(info){
        //...
    }
};

The onPointClick callback function accepts an object that contains information on the click event. Fields of this object are described in the onPointClick option description of Chart and PieChart. Among these fields, you can find the clicked point. An object that represents this point is described in the Point section.

Show Example:
AngularJS
Knockout
jQuery

In this example, when you click a point, information about the argument of this point appears below the chart. This information is taken from the tag field that is specified for each argument in the chart data source.

<div ng-controller="exampleController">
    <div style="height:500px; max-width:700px; margin: 0px auto" dx-chart="chartConfiguration"></div>
    <div style="height:110px; margin:5px; text-align:center; font-family:'Segoe UI'; font-size:10pt">{{ outputText }}</div>
</div>
var dataSource = [
    { country: 'China', y014: 320866959, y1564: 853191410, y65: 87774113, tag: "China, officially the People's Republic of China (PRC), is a country in East Asia. It is the world'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'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'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's fourth most populous country. Indonesia is a republic, with an elected legislature and president. The nation'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'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'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's inhabited land area. Russia is also the world'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's largest reserves of mineral and energy resources and is the largest producer of oil and natural gas globally. Russia has the world's largest forest reserves and its lakes contain approximately one-quarter of the world's liquid fresh water." }
];

angular
    .module('myApp', ['dx'])
    .controller('exampleController', function ($scope) {
        $scope.outputText = "";
        $scope.chartConfiguration = {
            dataSource: dataSource,
            commonSeriesSettings: {
                argumentField: 'country',
                tagField: 'tag',
                point: { hoverMode: 'allArgumentPoints' }
            },
            series: [
                { valueField: 'y014', name: '0-14 years' },
                { valueField: 'y1564', name: '15-64 years' },
                { valueField: 'y65', name: '65 years and older' }
            ],
            title: 'Population: Age Structure (2000)',
            legend: {
                horizontalAlignment: 'center',
                verticalAlignment: 'bottom'
            },
            valueAxis: {
                label: { format: 'largeNumber' }
            },
            onPointClick: function (info) {
                var clickedPoint = info.target;
                $scope.outputText = clickedPoint.tag;
            }
        };
    });

angular.element(document).ready(function () {
   angular.bootstrap(document, ['myApp']);
});

In this example, when you click a point, information about the argument of this point appears below the chart. This information is taken from the tag field that is specified for each argument in the chart data source.

<div style="height:500px; max-width:700px; margin: 0px auto" data-bind="dxChart: chartConfiguration"></div>
<div style="height:110px; margin:5px; text-align:center; font-family:'Segoe UI'; font-size:10pt" data-bind="text: outputText"></div>
var dataSource = [
    { country: 'China', y014: 320866959, y1564: 853191410, y65: 87774113, tag: "China, officially the People's Republic of China (PRC), is a country in East Asia. It is the world'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'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'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's fourth most populous country. Indonesia is a republic, with an elected legislature and president. The nation'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'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'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's inhabited land area. Russia is also the world'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's largest reserves of mineral and energy resources and is the largest producer of oil and natural gas globally. Russia has the world's largest forest reserves and its lakes contain approximately one-quarter of the world's liquid fresh water." }
];

var viewModel = {
    outputText: ko.observable(),
    chartConfiguration: {
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'country',
            tagField: 'tag',
            point: { hoverMode: 'allArgumentPoints' }
        },
        series: [
            { valueField: 'y014', name: '0-14 years' },
            { valueField: 'y1564', name: '15-64 years' },
            { valueField: 'y65', name: '65 years and older' }
        ],
        title: 'Population: Age Structure (2000)',
        legend: {
            horizontalAlignment: 'center',
            verticalAlignment: 'bottom'
        },
        valueAxis: {
            label: { format: 'largeNumber' }
        },
        onPointClick: function (info) {
            var clickedPoint = info.target;
            viewModel.outputText(clickedPoint.tag);
        }
    }
};

ko.applyBindings(viewModel);

In this example, when you click a point, information about the argument of this point appears below the chart. This information is taken from the tag field that is specified for each argument in the chart data source.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0px auto"></div>
<div id="outputText" style="height:110px; margin:5px; text-align:center; font-family:'Segoe UI'; font-size:10pt"></div>
var dataSource = [
    { country: 'China', y014: 320866959, y1564: 853191410, y65: 87774113, tag: "China, officially the People's Republic of China (PRC), is a country in East Asia. It is the world'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'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'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's fourth most populous country. Indonesia is a republic, with an elected legislature and president. The nation'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'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'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's inhabited land area. Russia is also the world'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's largest reserves of mineral and energy resources and is the largest producer of oil and natural gas globally. Russia has the world's largest forest reserves and its lakes contain approximately one-quarter of the world's liquid fresh water." }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'country',
            tagField: 'tag',
            point: { hoverMode: 'allArgumentPoints' }
        },
        series: [
            { valueField: 'y014', name: '0-14 years' },
            { valueField: 'y1564', name: '15-64 years' },
            { valueField: 'y65', name: '65 years and older' }
        ],
        title: 'Population: Age Structure (2000)',
        legend: {
            horizontalAlignment: 'center',
            verticalAlignment: 'bottom'
        },
        valueAxis: {
            label: { format: 'largeNumber' }
        },
        onPointClick: function (info) {
            var clickedPoint = info.target;
            $('#outputText').html(clickedPoint.tag);
        }
    });
});

Legend Click

In addition to a click on a point or a series, you can handle a click on a legend item. To do this, implement a callback function and assign it to the onLegendClick option of the chart's configuration object.

JavaScript
var chartOptions = {
    onLegendClick: function(info) {
        //...
    }   
};

The onLegendClick callback function accepts an object that contains information on the legend click event. Fields of this object are described in the onLegendClick option description of Chart and PieChart. Among these fields, you can find the series (in Chart) or the argument of the points (in PieChart) that correspond to the clicked legend item.

NOTE: If the onLegendClick option is not specified, a click on the legend will invoke the function assigned to the onSeriesClick (in Chart) or onPointClick (in PieChart) option. To prevent this behavior, assign at least an empty function to the onLegendClick field.

Show Example:
AngularJS
Knockout
jQuery

In this example, when you click a legend item, the chart calculates the maximum point value from this series and outputs it below. To get the points of the series to which the clicked legend item belongs, the series' getAllPoints method is used.

<div ng-controller="exampleController">
    <div style="height:500px; max-width:700px; margin: 0px auto" dx-chart="chartConfiguration"></div>
    <div style="height:20px; margin:5px; text-align:center; font-family:'Segoe UI'; font-size:10pt">{{ outputText }}</div>
</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}
];

angular
    .module('myApp', ['dx'])
    .controller('exampleController', function ($scope) {
        $scope.outputText = "";
        $scope.chartConfiguration = {
            dataSource: dataSource,
            commonSeriesSettings: { argumentField: 'country' },
            series: [
                { valueField: 'y014', name: '0-14 years' },
                { valueField: 'y1564', name: '15-64 years' },
                { valueField: 'y65', name: '65 years and older' }
            ],
            title: 'Population: Age Structure (2000)',
            legend: {
                horizontalAlignment: 'center',
                verticalAlignment: 'bottom'
            },
            valueAxis: {
                label: { format: 'largeNumber' }
            },
            onLegendClick: function (info) {
                var series = info.target;
                var valueArray = [];
                
                angular.forEach(series.getAllPoints(), function (currentPoint) {
                    valueArray.push(currentPoint.value);
                });
                
                valueArray.max = function () {
                    return Math.max.apply(Math, valueArray);
                };
                
                $scope.outputText = 'Maximum value in the "' + series.name + '" series: ' + valueArray.max();
            }
        };
    });

angular.element(document).ready(function () {
   angular.bootstrap(document, ['myApp']);
});

In this example, when you click a legend item, the chart calculates the maximum point value from this series and outputs it below. To get the points of the series to which the clicked legend item belongs, the series' getAllPoints method is used.

<div style="height:500px; max-width:700px; margin: 0px auto" data-bind="dxChart: chartConfiguration"></div>
<div style="height:20px; margin:5px; text-align:center; font-family:'Segoe UI'; font-size:10pt" data-bind="text: outputText"></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 viewModel = {
    outputText: ko.observable(),
    chartConfiguration: {
        dataSource: dataSource,
        commonSeriesSettings: { argumentField: 'country' },
        series: [
            { valueField: 'y014', name: '0-14 years' },
            { valueField: 'y1564', name: '15-64 years' },
            { valueField: 'y65', name: '65 years and older' }
        ],
        title: 'Population: Age Structure (2000)',
        legend: {
            horizontalAlignment: 'center',
            verticalAlignment: 'bottom'
        },
        valueAxis: {
            label: { format: 'largeNumber' }
        },
        onLegendClick: function (info) {
            var series = info.target;
            var valueArray = [];
            
            ko.utils.arrayForEach(series.getAllPoints(), function (currentPoint) {
                valueArray.push(currentPoint.value);
            });
            
            valueArray.max = function () {
                return Math.max.apply(Math, valueArray);
            };
            
            viewModel.outputText('Maximum value in the "' + series.name + '" series: ' + valueArray.max());
        }
    }
};

ko.applyBindings(viewModel);

In this example, when you click a legend item, the chart calculates the maximum point value from this series and outputs it below. To get the points of the series to which the clicked legend item belongs, the series' getAllPoints method is used.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0px auto"></div>
<div id="outputText" style="height:20px; margin:5px; text-align:center; font-family:'Segoe UI'; font-size:10pt"></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}
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: { argumentField: 'country' },
        series: [
            { valueField: 'y014', name: '0-14 years' },
            { valueField: 'y1564', name: '15-64 years' },
            { valueField: 'y65', name: '65 years and older' }
        ],
        title: 'Population: Age Structure (2000)',
        legend: {
            horizontalAlignment: 'center',
            verticalAlignment: 'bottom'
        },
        valueAxis: {
            label: { format: 'largeNumber' }
        },
        onLegendClick: function (info) {
            var series = info.target;
            var valueArray = [];
            
            $.each(series.getAllPoints(), function (_, currentPoint) {
                valueArray.push(currentPoint.value);
            });
            
            valueArray.max = function () {
                return Math.max.apply(Math, valueArray);
            };
            
            $('#outputText').html('Maximum value in the &#34;' + series.name + '&#34; series: ' + valueArray.max());
        }
    });
});

Hover Handling

This topic explains how to handle series and point hover events in the Chart and PieChart widgets.

Series Hover

When an end-user hovers the mouse pointer over a series, its appearance assumes a specific hover style. To customize the default hover style, use the series hoverStyle configuration object. This object can specify settings for all series:

JavaScript
var chartOptions = {
    commonSeriesSettings: {
        hoverStyle: {
            // Common hover style configuration    
        }
    }
};

for type-specific series:

JavaScript
var chartOptions = {
    commonSeriesSettings: {
        line: { // or 'bar', 'spline', etc.
            hoverStyle: {
                // Type-specific hover style configuration    
            }
        }
    }
};

or for an individual series:

JavaScript
var chartOptions = {
    series: [{
        hoverStyle: {
            // Individual hover style configuration
        }
    }, {
        // ...
    }]
};

To choose which series elements to highlight when the series is hovered over, specify the hoverMode option. Like the hover style, this option can be specified for all, type-specific or an individual series. There are several hover modes in the chart widgets. Available modes depend on the series type you use.

To handle the series hover event, assign a function to the onSeriesHoverChanged option of the chart.

JavaScript
var chartOptions = {
    onSeriesHoverChanged: function (info) {
        //...
    }
};

The onSeriesHoverChanged function accepts an object that contains information on the hover event. Among fields of this object, you can find the series whose hover state has been changed. An object that represents this series is described in the Series section. Use the isHovered() method of this object to identify whether the series has been hovered over or hovered out.

NOTE: There are series that consist of points only, e.g., the bar-like and candleStick series of the Chart widget, and the pie and doughnut series of the PieChart widget. The onSeriesHoverChanged function is not called when hovering over a point (a bar or a slice) in these types of series. To handle the hover event for these series, implement the onPointHoverChanged function and access the series of the point whose hover state has been changed (see the Point Hover topic).

Show Example:
AngularJS
Knockout
jQuery

In this example, when you hover the mouse pointer over a series, the chart calculates the maximum point value from this series and outputs it below. To get all the points of the series the mouse is currently hovering over, the series' getAllPoints method is used.

<div ng-controller="exampleController">
    <div style="height:500px; max-width:700px; margin: 0px auto" dx-chart="chartConfiguration"></div>
    <div style="height:20px; margin:5px; text-align:center; font-family:'Segoe UI'; font-size:10pt">{{ outputText }}</div>
</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}
];

angular
    .module('myApp', ['dx'])
    .controller('exampleController', function ($scope) {
        $scope.outputText = "";
        $scope.chartConfiguration = {
            dataSource: dataSource,
            commonSeriesSettings: { argumentField: 'country' },
            series: [
                { valueField: 'y014', name: '0-14 years' },
                { valueField: 'y1564', name: '15-64 years' },
                { valueField: 'y65', name: '65 years and older' }
            ],
            title: 'Population: Age Structure (2000)',
            legend: {
                horizontalAlignment: 'center',
                verticalAlignment: 'bottom'
            },
            valueAxis: {
                label: { format: 'largeNumber' }
            },
            onSeriesHoverChanged: function (info) {
                var series = info.target;
                if (series.isHovered()) {
                    var valueArray = [];
                    
                    angular.forEach(series.getAllPoints(), function (currentPoint) {
                        valueArray.push(currentPoint.value);
                    });
                    
                    valueArray.max = function () {
                        return Math.max.apply(Math, valueArray);
                    };
                    
                    $scope.outputText = 'Maximum value in the "' + series.name + '" series: ' + valueArray.max();
                } else {
                    $scope.outputText = '';
                }
            }
        };
    });

angular.element(document).ready(function () {
   angular.bootstrap(document, ['myApp']);
});

In this example, when you hover the mouse pointer over a series, the chart calculates the maximum point value from this series and outputs it below. To get all the points of the series the mouse is currently hovering over, the series' getAllPoints method is used.

<div style="height:500px; max-width:700px; margin: 0px auto" data-bind="dxChart: chartConfiguration"></div>
<div style="height:20px; margin:5px; text-align:center; font-family:'Segoe UI'; font-size:10pt" data-bind="text: outputText"></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 viewModel = {
    outputText: ko.observable(),
    chartConfiguration: {
        dataSource: dataSource,
        commonSeriesSettings: { argumentField: 'country' },
        series: [
            { valueField: 'y014', name: '0-14 years' },
            { valueField: 'y1564', name: '15-64 years' },
            { valueField: 'y65', name: '65 years and older' }
        ],
        title: 'Population: Age Structure (2000)',
        legend: {
            horizontalAlignment: 'center',
            verticalAlignment: 'bottom'
        },
        valueAxis: {
            label: { format: 'largeNumber' }
        },
        onSeriesHoverChanged: function (info) {
            var series = info.target;
            if (series.isHovered()) {
                var valueArray = [];
                
                ko.utils.arrayForEach(series.getAllPoints(), function (currentPoint) {
                    valueArray.push(currentPoint.value);
                });
                
                valueArray.max = function () {
                    return Math.max.apply(Math, valueArray);
                };
                
                viewModel.outputText('Maximum value in the "' + series.name + '" series: ' + valueArray.max());
            } else {
                 viewModel.outputText('');
            }
        }
    }
};

ko.applyBindings(viewModel);

In this example, when you hover the mouse pointer over a series, the chart calculates the maximum point value from this series and outputs it below. To get all the points of the series the mouse is currently hovering over, the series' getAllPoints method is used.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0px auto"></div>
<div id="outputText" style="height:20px; margin:5px; text-align:center; font-family:'Segoe UI'; font-size:10pt"></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}
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: { argumentField: 'country' },
        series: [
            { valueField: 'y014', name: '0-14 years' },
            { valueField: 'y1564', name: '15-64 years' },
            { valueField: 'y65', name: '65 years and older' }
        ],
        title: 'Population: Age Structure (2000)',
        legend: {
            horizontalAlignment: 'center',
            verticalAlignment: 'bottom'
        },
        valueAxis: {
            label: { format: 'largeNumber' }
        },
        onSeriesHoverChanged: function (info) {
            var series = info.target;
            if (series.isHovered()) {
                var valueArray = [];
                
                $.each(series.getAllPoints(), function (_, currentPoint) {
                    valueArray.push(currentPoint.value);
                });
                
                valueArray.max = function () {
                    return Math.max.apply(Math, valueArray);
                };
                
                $('#outputText').html('Maximum value in the &#34;' + series.name + '&#34; series: ' + valueArray.max());
            } else {
                 $('#outputText').html('');
            }
        }
    });
});

Point Hover

When an end-user rests the mouse pointer over a series point, its appearance assumes a specific hover style. To customize the default hover style, use the point hoverStyle configuration object. This object can specify settings for all series:

JavaScript
var chartOptions = {
    commonSeriesSettings: {
        point: {
            hoverStyle: {
                // Hover style configuration    
            }
        }
    }
};

for type-specific series:

JavaScript
var chartOptions = {
    commonSeriesSettings: {
        line: { // or 'bar', 'spline', etc.
            point: {
                hoverStyle: {
                    // Type-specific hover style configuration    
                }
            }
        }
    }
};

or for an individual series:

JavaScript
var chartOptions = {
    series: [{
        point: {
            hoverStyle: {
                // Individual hover style configuration
            }
        }
    }, {
        // ...
    }]
};

NOTE: The point configuration object defines the points of the line-like, scatter and area-like series only. To set the hover style for points of other series types, use the hoverStyle configuration object of the parent series.

By default, the chart highlights only the point that was hovered over. But in some scenarios, you may need several points to be highlighted. To specify it, use the hoverMode option. Like the hover style, this option can be specified for all, type-specific or an individual series. It can accept one of the following values.

  • onlyPoint — highlights only the point that was hovered over
  • allSeriesPoints — highlights all points from the parent series
  • allArgumentPoints — highlights all points with the same argument
  • none — does not highlight anything

To handle the point hover event, assign a function to the onPointHoverChanged option of the chart.

JavaScript
var chartOptions = {
    onPointHoverChanged: function (info) {
        //...
    }
};

The onPointHoverChanged function accepts an object that contains information on the hover event. Among fields of this object, you can find the point whose hover state has been changed. An object that represents this point is described in the Point section. Use the isHovered() method of this object to identify whether the point has been hovered over or hovered out.

NOTE: Frequently, points that appear hovered over are not actually so, due to the 'allArgumentPoints' or 'allSeriesPoints' hover mode being set. For these points, the pointHoverChanged event does not occur and their isHovered() method returns false.

Show Example:
AngularJS
Knockout
jQuery

In this example, when you hover the mouse pointer over a point, information about the argument of this point appears below the chart. This information is taken from the tag field that is provided for each argument in the chart data source. Additionally, the point hover mode is set to 'allArgumentPoints'.

<div ng-controller="exampleController">
    <div style="height:500px; max-width:700px; margin: 0px auto" dx-chart="chartConfiguration"></div>
    <div style="height:110px; margin:5px; text-align:center; font-family:'Segoe UI'; font-size:10pt">{{ outputText }}</div>
</div>
var dataSource = [
    { country: 'China', y014: 320866959, y1564: 853191410, y65: 87774113, tag: "China, officially the People's Republic of China (PRC), is a country in East Asia. It is the world'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'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'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's fourth most populous country. Indonesia is a republic, with an elected legislature and president. The nation'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'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'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's inhabited land area. Russia is also the world'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's largest reserves of mineral and energy resources and is the largest producer of oil and natural gas globally. Russia has the world's largest forest reserves and its lakes contain approximately one-quarter of the world's liquid fresh water." }
];

angular
    .module('myApp', ['dx'])
    .controller('exampleController', function ($scope) {
        $scope.outputText = "";
        $scope.chartConfiguration = {
            dataSource: dataSource,
            commonSeriesSettings: {
                argumentField: 'country',
                tagField: 'tag',
                point: { hoverMode: 'allArgumentPoints' }
            },
            series: [
                { valueField: 'y014', name: '0-14 years' },
                { valueField: 'y1564', name: '15-64 years' },
                { valueField: 'y65', name: '65 years and older' }
            ],
            title: 'Population: Age Structure (2000)',
            legend: {
                horizontalAlignment: 'center',
                verticalAlignment: 'bottom'
            },
            valueAxis: {
                label: { format: 'largeNumber' }
            },
            onPointHoverChanged: function (info) {
                var point = info.target;
                point.isHovered() ? $scope.outputText = point.tag : $scope.outputText = '';
            }
        };
    });

angular.element(document).ready(function () {
   angular.bootstrap(document, ['myApp']);
});

In this example, when you hover the mouse pointer over a point, information about the argument of this point appears below the chart. This information is taken from the tag field that is provided for each argument in the chart data source. Additionally, the point hover mode is set to 'allArgumentPoints'.

<div style="height:500px; max-width:700px; margin: 0px auto" data-bind="dxChart: chartConfiguration"></div>
<div style="height:110px; margin:5px; text-align:center; font-family:'Segoe UI'; font-size:10pt" data-bind="text: outputText"></div>
var dataSource = [
    { country: 'China', y014: 320866959, y1564: 853191410, y65: 87774113, tag: "China, officially the People's Republic of China (PRC), is a country in East Asia. It is the world'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'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'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's fourth most populous country. Indonesia is a republic, with an elected legislature and president. The nation'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'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'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's inhabited land area. Russia is also the world'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's largest reserves of mineral and energy resources and is the largest producer of oil and natural gas globally. Russia has the world's largest forest reserves and its lakes contain approximately one-quarter of the world's liquid fresh water." }
];

var viewModel = {
    outputText: ko.observable(),
    chartConfiguration: {
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'country',
            tagField: 'tag',
            point: { hoverMode: 'allArgumentPoints' }
        },
        series: [
            { valueField: 'y014', name: '0-14 years' },
            { valueField: 'y1564', name: '15-64 years' },
            { valueField: 'y65', name: '65 years and older' }
        ],
        title: 'Population: Age Structure (2000)',
        legend: {
            horizontalAlignment: 'center',
            verticalAlignment: 'bottom'
        },
        valueAxis: {
            label: { format: 'largeNumber' }
        },
        onPointHoverChanged: function (info) {
            var point = info.target;
            point.isHovered() ? viewModel.outputText(point.tag) : viewModel.outputText('');
        }
    }
};

ko.applyBindings(viewModel);

In this example, when you hover the mouse pointer over a point, information about the argument of this point appears below the chart. This information is taken from the tag field that is provided for each argument in the chart data source. Additionally, the point hover mode is set to 'allArgumentPoints'.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0px auto"></div>
<div id="outputText" style="height:110px; margin:5px; text-align:center; font-family:'Segoe UI'; font-size:10pt"></div>
var dataSource = [
    { country: 'China', y014: 320866959, y1564: 853191410, y65: 87774113, tag: "China, officially the People's Republic of China (PRC), is a country in East Asia. It is the world'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'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'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's fourth most populous country. Indonesia is a republic, with an elected legislature and president. The nation'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'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'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's inhabited land area. Russia is also the world'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's largest reserves of mineral and energy resources and is the largest producer of oil and natural gas globally. Russia has the world's largest forest reserves and its lakes contain approximately one-quarter of the world's liquid fresh water." }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'country',
            tagField: 'tag',
            point: { hoverMode: 'allArgumentPoints' }
        },
        series: [
            { valueField: 'y014', name: '0-14 years' },
            { valueField: 'y1564', name: '15-64 years' },
            { valueField: 'y65', name: '65 years and older' }
        ],
        title: 'Population: Age Structure (2000)',
        legend: {
            horizontalAlignment: 'center',
            verticalAlignment: 'bottom'
        },
        valueAxis: {
            label: { format: 'largeNumber' }
        },
        onPointHoverChanged: function (info) {
            var point = info.target;
            point.isHovered() ? $('#outputText').html(point.tag) : $('#outputText').html('');
        }
    });
});

Selection Handling

This topic provides an overview of fields and methods that will help you configure selection and handle selection-related events in the Chart and PieChart widgets.

Series Selection

To select a series, call the select() method of the series object. For instance, you can select a series when it is clicked within the chart onSeriesClick handler (see Click Handling).

JavaScript
var chartOptions = {
    onSeriesClick: function (info) {
        var clickedSeries = info.target;
        clickedSeries.select();
    }
};

Alternatively, you can access a series when required, using one of the following chart methods: getAllSeries(), getSeriesByName() and getSeriesByPos().

NOTE: There are series that consist of points only, e.g., the bar-like and candleStick series of the Chart widget, and the pie and doughnut series of the PieChart widget. To select these series types on click, implement the onPointClick handler. Use the target.series field of the object passed to this handler as the parameter to access the series of the clicked point (bar or slice).

A series has a distinctive style when selected. To customize it, use the series selectionStyle configuration object. This object can specify settings for all series:

JavaScript
var chartOptions = {
    commonSeriesSettings: {
        selectionStyle: {
            // Common selection style configuration    
        }
    }
};

for type-specific series:

JavaScript
var chartOptions = {
    commonSeriesSettings: {
        line: { // or 'bar', 'spline', etc.
            selectionStyle: {
                // Type-specific selection style configuration    
            }
        }
    }
};

or for an individual series:

JavaScript
var chartOptions = {
    series: [{
        selectionStyle: {
            // Individual selection style configuration
        }
    }, {
        // ...
    }]
};

To choose which series elements to highlight in the selected state, specify the selectionMode option. Like the selection style, this option can be specified for all, type-specific or an individual series. There are several selection modes in the chart widgets. Available modes depend on the series type you use.

You can also allow the user to select multiple series. For this purpose, set the seriesSelectionMode option to 'multiple'.

To handle the series selection event, assign a function to the onSeriesSelectionChanged option of the chart.

JavaScript
var chartOptions = {
    onSeriesSelectionChanged: function (info) {
        //...
    }
};

The onSeriesSelectionChanged function accepts an object that contains information on the selection event. Among fields of this object, you can find the series whose selection state has been changed. An object that represents this series is described in the Series section. Use the isSelected() method of this object to check the selection state of a series.

To clear the series selection, call the clearSelection() method of the series or the same method of the chart instance.

JavaScript
chartInstance.clearSelection();
// chartInstance.getSeriesByName('seriesName').clearSelection();
Show Example:
AngularJS
Knockout
jQuery

In this example, clicking a series selects it. The onSeriesSelectionChanged event handler calculates the maximum point value of the selected series and outputs it below the chart. To get the points of the selected series, its getAllPoints() method is used.

<div ng-controller="exampleController">
    <div style="height:500px; max-width:700px; margin: 0px auto" dx-chart="chartConfiguration"></div>
    <div style="height:20px; margin:5px; text-align:center; font-family:'Segoe UI'; font-size:10pt">{{ outputText }}</div>
</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}
];

angular
    .module('myApp', ['dx'])
    .controller('exampleController', function ($scope) {
        $scope.outputText = "";
        $scope.chartConfiguration = {
            dataSource: dataSource,
            commonSeriesSettings: { argumentField: 'country' },
            series: [
                { valueField: 'y014', name: '0-14 years' },
                { valueField: 'y1564', name: '15-64 years' },
                { valueField: 'y65', name: '65 years and older' }
            ],
            title: 'Population: Age Structure (2000)',
            legend: {
                horizontalAlignment: 'center',
                verticalAlignment: 'bottom'
            },
            valueAxis: {
                label: { format: 'largeNumber' }
            },
            onSeriesClick: function (info) {
                var series = info.target;
                series.isSelected() ? series.clearSelection() : series.select();
            },
            onSeriesSelectionChanged: function (info) {
                var series = info.target;
                if (series.isSelected()) {
                    var valueArray = [];
                    
                    angular.forEach(series.getAllPoints(), function (currentPoint) {
                        valueArray.push(currentPoint.value);
                    });
                    
                    valueArray.max = function () {
                        return Math.max.apply(Math, valueArray);
                    };
                    
                    $scope.outputText = 'Maximum value in the "' + series.name + '" series: ' + valueArray.max();
                } else {
                    $scope.outputText = '';
                }
            }
        };
    });

angular.element(document).ready(function () {
   angular.bootstrap(document, ['myApp']);
});

In this example, clicking a series selects it. The onSeriesSelectionChanged event handler calculates the maximum point value of the selected series and outputs it below the chart. To get the points of the selected series, its getAllPoints() method is used.

<div style="height:500px; max-width:700px; margin: 0px auto" data-bind="dxChart: chartConfiguration"></div>
<div style="height:20px; margin:5px; text-align:center; font-family:'Segoe UI'; font-size:10pt" data-bind="text: outputText"></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 viewModel = {
    outputText: ko.observable(),
    chartConfiguration: {
        dataSource: dataSource,
        commonSeriesSettings: { argumentField: 'country' },
        series: [
            { valueField: 'y014', name: '0-14 years' },
            { valueField: 'y1564', name: '15-64 years' },
            { valueField: 'y65', name: '65 years and older' }
        ],
        title: 'Population: Age Structure (2000)',
        legend: {
            horizontalAlignment: 'center',
            verticalAlignment: 'bottom'
        },
        valueAxis: {
            label: { format: 'largeNumber' }
        },
        onSeriesHoverChanged: function (info) {
            var series = info.target;
            if (series.isHovered()) {
                var valueArray = [];
                
                ko.utils.arrayForEach(series.getAllPoints(), function (_, currentPoint) {
                    valueArray.push(currentPoint.value);
                });
                
                valueArray.max = function () {
                    return Math.max.apply(Math, valueArray);
                };
                
                viewModel.outputText('Maximum value in the "' + series.name + '" series: ' + valueArray.max());
            } else {
                 viewModel.outputText('');
            }
        },
        onSeriesClick: function (info) {
            var series = info.target;
            series.isSelected() ? series.clearSelection() : series.select();
        },
        onSeriesSelectionChanged: function (info) {
            var series = info.target;
            if (series.isSelected()) {
                var valueArray = [];
                
                ko.utils.arrayForEach(series.getAllPoints(), function (currentPoint) {
                    valueArray.push(currentPoint.value);
                });
                
                valueArray.max = function () {
                    return Math.max.apply(Math, valueArray);
                };
                
                viewModel.outputText('Maximum value in the "' + series.name + '" series: ' + valueArray.max());
            } else {
                viewModel.outputText('');
            }
        }
    }
};

ko.applyBindings(viewModel);

In this example, clicking a series selects it. The onSeriesSelectionChanged event handler calculates the maximum point value of the selected series and outputs it below the chart. To get the points of the selected series, its getAllPoints() method is used.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0px auto"></div>
<div id="outputText" style="height:20px; margin:5px; text-align:center; font-family:'Segoe UI'; font-size:10pt"></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}
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: { argumentField: 'country' },
        series: [
            { valueField: 'y014', name: '0-14 years' },
            { valueField: 'y1564', name: '15-64 years' },
            { valueField: 'y65', name: '65 years and older' }
        ],
        title: 'Population: Age Structure (2000)',
        legend: {
            horizontalAlignment: 'center',
            verticalAlignment: 'bottom'
        },
        valueAxis: {
            label: { format: 'largeNumber' }
        },
        onSeriesClick: function (info) {
            var series = info.target;
            series.isSelected() ? series.clearSelection() : series.select();
        },
        onSeriesSelectionChanged: function (info) {
            var series = info.target;
            if (series.isSelected()) {
                var valueArray = [];
                
                $.each(series.getAllPoints(), function (_, currentPoint) {
                    valueArray.push(currentPoint.value);
                });
                
                valueArray.max = function () {
                    return Math.max.apply(Math, valueArray);
                };
                
                $('#outputText').html('Maximum value in the &#34;' + series.name + '&#34; series: ' + valueArray.max());
            } else {
                $('#outputText').html('');
            }
        }
    });
});

Point Selection

To select a data point, use its select() method. For instance, you can select a point on a click using the chart's onPointClick handler (see Click Handling).

JavaScript
var chartOptions = {
    onPointClick: function (info) {
        var clickedPoint = info.target;
        clickedPoint.select();
    }
};

In addition, you can select a specific point in a series using the series' selectPoint(point) function. The series object exposes methods that can help you find the required point to be selected: getAllPoints(), getPointByPos() and getPointsByArg().

A point has a distinctive style when selected. To customize it, use the selectionStyle configuration object. This object can specify settings for all chart points:

JavaScript
var chartOptions = {
    commonSeriesSettings: {
        point: {
            selectionStyle: {
                // Common selection style configuration    
            }
        }
    }
};

for type-specific series points:

JavaScript
var chartOptions = {
    commonSeriesSettings: {
        line: { // or 'bar', 'spline', etc.
            point: {
                selectionStyle: {
                    // Type-specific selection style configuration    
                }
            }
        }
    }
};

or for points of an individual series:

JavaScript
var chartOptions = {
    series: [{
        point: {
            selectionStyle: {
                // Individual selection style configuration
            }
        }
    }, {
        // ...
    }]
};

NOTE: The point configuration object defines the points of the line-like, scatter and area-like series only. To set the selection style for points of other series, use the series | selectionStyle object.

By default, the chart highlights the selected point only. But in some scenarios, you may need several points to be highlighted. To specify this, use the selectionMode option. Like the selection style, this option can be specified for all, type-specific or points of an individual series. It can accept one of the following values.

  • onlyPoint — highlights only the selected point
  • allSeriesPoints — highlights all points from the parent series
  • allArgumentPoints — highlights all points with the same argument
  • none — does not highlight anything

You can also allow the user to select multiple points. For this purpose, set the pointSelectionMode option to 'multiple'.

To handle the point selection event, assign a function to the onPointSelectionChanged option of the chart.

JavaScript
var chartOptions = {
    onPointSelectionChanged: function (info) {
        //...
    }
};

The onPointSelectionChanged function accepts an object that contains information on the selection event. Among fields of this object, you can find the point whose selection state has been changed. An object that represents this point is described in the Point section. Use the isSelected() method of this object to check the selection state of a point.

NOTE: Frequently, points that appear selected are not actually so, due to the 'allArgumentPoints' or 'allSeriesPoints' selection mode having been set. For these points, the pointSelectionChanged event does not occur and their isSelected() method returns false.

To clear the point selection, call the clearSelection() method of the point or the same method of its parent series.

JavaScript
// Access the point
point.clearSelection();

// or access its parent series
series.clearSelection();
Show Example:
AngularJS
Knockout
jQuery

In this example, clicking a point selects that point as well as all the points with the same argument. Information about this argument appears below the chart. This information is taken from the tag field that is provided in the chart data source.

<div ng-controller="exampleController">
    <div style="height:500px; max-width:700px; margin: 0px auto" dx-chart="chartConfiguration"></div>
    <div style="height:110px; margin:5px; text-align:center; font-family:'Segoe UI'; font-size:10pt">{{ outputText }}</div>
</div>
var dataSource = [
    { country: 'China', y014: 320866959, y1564: 853191410, y65: 87774113, tag: "China, officially the People's Republic of China (PRC), is a country in East Asia. It is the world'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'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'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's fourth most populous country. Indonesia is a republic, with an elected legislature and president. The nation'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'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'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's inhabited land area. Russia is also the world'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's largest reserves of mineral and energy resources and is the largest producer of oil and natural gas globally. Russia has the world's largest forest reserves and its lakes contain approximately one-quarter of the world's liquid fresh water." }
];

angular
    .module('myApp', ['dx'])
    .controller('exampleController', function ($scope) {
        $scope.outputText = "";
        $scope.chartConfiguration = {
            dataSource: dataSource,
            commonSeriesSettings: {
                argumentField: 'country',
                tagField: 'tag',
                point: {
                    hoverMode: 'allArgumentPoints',
                    selectionMode: 'allArgumentPoints'
                }
            },
            series: [
                { valueField: 'y014', name: '0-14 years' },
                { valueField: 'y1564', name: '15-64 years' },
                { valueField: 'y65', name: '65 years and older' }
            ],
            title: 'Population: Age Structure (2000)',
            legend: {
                horizontalAlignment: 'center',
                verticalAlignment: 'bottom'
            },
            valueAxis: {
                label: { format: 'largeNumber' }
            },
            onPointClick: function (info) {
                var point = info.target;
                point.isSelected() ? point.clearSelection() : point.select();
            },
            onPointSelectionChanged: function (info) {
                var point = info.target;
                point.isSelected() ? $scope.outputText = point.tag : $scope.outputText = '';
            }
        };
    });

angular.element(document).ready(function () {
   angular.bootstrap(document, ['myApp']);
});

In this example, clicking a point selects that point as well as all the points with the same argument. Information about this argument appears below the chart. This information is taken from the tag field that is provided in the chart data source.

<div style="height:500px; max-width:700px; margin: 0px auto" data-bind="dxChart: chartConfiguration"></div>
<div style="height:110px; margin:5px; text-align:center; font-family:'Segoe UI'; font-size:10pt" data-bind="text: outputText"></div>
var dataSource = [
    { country: 'China', y014: 320866959, y1564: 853191410, y65: 87774113, tag: "China, officially the People's Republic of China (PRC), is a country in East Asia. It is the world'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'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'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's fourth most populous country. Indonesia is a republic, with an elected legislature and president. The nation'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'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'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's inhabited land area. Russia is also the world'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's largest reserves of mineral and energy resources and is the largest producer of oil and natural gas globally. Russia has the world's largest forest reserves and its lakes contain approximately one-quarter of the world's liquid fresh water." }
];

var viewModel = {
    outputText: ko.observable(),
    chartConfiguration: {
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'country',
            tagField: 'tag',
            point: {
                hoverMode: 'allArgumentPoints',
                selectionMode: 'allArgumentPoints'
            }
        },
        series: [
            { valueField: 'y014', name: '0-14 years' },
            { valueField: 'y1564', name: '15-64 years' },
            { valueField: 'y65', name: '65 years and older' }
        ],
        title: 'Population: Age Structure (2000)',
        legend: {
            horizontalAlignment: 'center',
            verticalAlignment: 'bottom'
        },
        valueAxis: {
            label: { format: 'largeNumber' }
        },
        onPointClick: function (info) {
            var point = info.target;
            point.isSelected() ? point.clearSelection() : point.select();
        },
        onPointSelectionChanged: function (info) {
            var point = info.target;
            point.isSelected() ? viewModel.outputText(point.tag) : viewModel.outputText('');
        }
    }
};

ko.applyBindings(viewModel);

In this example, clicking a point selects that point as well as all the points with the same argument. Information about this argument appears below the chart. This information is taken from the tag field that is provided in the chart data source.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0px auto"></div>
<div id="outputText" style="height:110px; margin:5px; text-align:center; font-family:'Segoe UI'; font-size:10pt"></div>
var dataSource = [
    { country: 'China', y014: 320866959, y1564: 853191410, y65: 87774113, tag: "China, officially the People's Republic of China (PRC), is a country in East Asia. It is the world'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'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'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's fourth most populous country. Indonesia is a republic, with an elected legislature and president. The nation'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'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'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's inhabited land area. Russia is also the world'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's largest reserves of mineral and energy resources and is the largest producer of oil and natural gas globally. Russia has the world's largest forest reserves and its lakes contain approximately one-quarter of the world's liquid fresh water." }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'country',
            tagField: 'tag',
            point: {
                hoverMode: 'allArgumentPoints',
                selectionMode: 'allArgumentPoints'
            }
        },
        series: [
            { valueField: 'y014', name: '0-14 years' },
            { valueField: 'y1564', name: '15-64 years' },
            { valueField: 'y65', name: '65 years and older' }
        ],
        title: 'Population: Age Structure (2000)',
        legend: {
            horizontalAlignment: 'center',
            verticalAlignment: 'bottom'
        },
        valueAxis: {
            label: { format: 'largeNumber' }
        },
        onPointClick: function (info) {
            var point = info.target;
            point.isSelected() ? point.clearSelection() : point.select();
        },
        onPointSelectionChanged: function (info) {
            var point = info.target;
            point.isSelected() ? $('#outputText').html(point.tag) : $('#outputText').html('');
        }
    });
});

Zooming and Scrolling

When you deal with a large amount of data, providing an efficient way of navigating this data is essential. In this section, you will learn how to implement scrolling and zooming in the Chart widget.

Using dxRangeSelector

The Chart and RangeSelector widgets can operate together, allowing an end-user to zoom and scroll through a chart. Follow the steps below to implement these capabilities.

  • Configure Chart

    Create and configure the Chart widget using one of the available data-binding approaches. For details, see the "Create and Configure a Widget" guide for jQuery, AngularJS or Knockout.

    JavaScript
    var chartOptions = {
        // Chart configuration
    };
  • Configure RangeSelector

    Create and configure the RangeSelector widget in a similar manner. Chart and RangeSelector must have completely identical argument axes. Hence, you need to assign the same data source to both widgets.

    JavaScript
    var dataSource = [...];
    var chartOptions = {
        dataSource: dataSource,
        // ...
    };
    var rangeSelectorOptions = {
        dataSource: dataSource,
        // ...
    };

    Optionally, you can display the chart in miniature in the background of RangeSelector. For this purpose, assign the same array of series configurations to both widgets.

    JavaScript
    var dataSource = [...];
    var series = [...];
    var chartOptions = {
        dataSource: dataSource,
        series: series
        // ...
    };
    var rangeSelectorOptions = {
        dataSource: dataSource,
        chart: {
            series: series    
        }
        // ...
    };
  • Implement Widget Interaction

    To make Chart and RangeSelector interact with each other, handle the selectedRangeChanged event. For this purpose, assign a function to the onSelectedRangeChanged option of RangeSelector. Within this function, call the zoomArgument method of the chart instance. This method accepts the start and end range values as its parameters.

    JavaScript
    var rangeSelectorOptions = {
        // ...
        onSelectedRangeChanged: function (e) {
            chartInstance.zoomArgument(e.startValue, e.endValue);
        },
        behavior: { callSelectedRangeChanged: 'onMoving' }
    };

    NOTE: The selectedRangeChanged event can fire either when an end-user keeps dragging the sliders or when he/she has released them. This depends on the value of the behavior | callSelectedRangeChanged option. When implementing zooming/scrolling, make sure that this option is set to 'onMoving'.

    By default, the chart adjusts its value axis to the currently selected minimum and maximum values. To change this behavior, set the adjustOnZoom option to false.

Free and Fixed Range Scrolling

Following the steps above, you get free range scrolling. It means that an end-user scrolls the chart by selecting a range in RangeSelector and dragging it to any side. You can fix the selected range. In this instance, an end-user will be able to scroll the chart dragging the predefined range. For this purpose, set the minRange and maxRange option of the scale configuration object to the same value. Then, specify the initial range using the selectedRange option.

JavaScript
var rangeSelectorOptions = {
    // ...
    scale: {
        minRange: 10,
        maxRange: 10,
    },
    selectedRange: { startValue: 0, endValue: 10 }      
};
Show Example:
AngularJS
Knockout
jQuery
<div ng-controller="exampleController">
    <div style="height:350px; max-width:800px; margin: 0px auto" dx-chart="chartConfiguration"></div>
    <div style="height:120px; max-width:800px; margin: 0px auto" dx-range-selector="rangeSelectorConfiguration"></div>
</div>
var dataSource =  [
    { arg: 10, y1: -12, y2: 10, y3: 32 },
    { arg: 20, y1: -32, y2: 30, y3: 12 },
    { arg: 40, y1: -20, y2: 20, y3: 30 },
    { arg: 50, y1: -39, y2: 50, y3: 19 },
    { arg: 60, y1: -10, y2: 10, y3: 15 },
    { arg: 75, y1: 10, y2: 10, y3: 15 },
    { arg: 80, y1: 30, y2: 100, y3: 130 },
    { arg: 90, y1: 40, y2: 110, y3: 140 },
    { arg: 100, y1: 50, y2: 90, y3: 90 },
    { arg: 105, y1: 40, y2: 145, y3: 120 },
    { arg: 110, y1: -12, y2: 10, y3: 32 },
    { arg: 120, y1: -32, y2: 30, y3: 12 },
    { arg: 130, y1: -20, y2: 20, y3: 30 },
];

var series = [
    { argumentField: 'arg', valueField: 'y1' },
    { argumentField: 'arg', valueField: 'y2' },
    { argumentField: 'arg', valueField: 'y3' }
];

angular
    .module('myApp', ['dx'])
    .controller('exampleController', function ($scope) {
        $scope.chartInstance = {};
        $scope.chartConfiguration = {
            dataSource: dataSource,
            series: series,
            legend: { visible: false },
            onInitialized: function (e) {
                // Setting initial zoom range
                e.component.zoomArgument(75, 130);
                // Preserving the chart instance to use later in dxRangeSelector
                $scope.chartInstance = e.component;
            }
        };
        $scope.rangeSelectorConfiguration = {
            dataSource: dataSource,
            chart: { series: series },
            scale: { minRange: 10 },
            selectedRange: {
                startValue: 75,
                endValue: 130
            },
            behavior: { callSelectedRangeChanged: 'onMoving' },
            onSelectedRangeChanged: function (e) {
                $scope.chartInstance.zoomArgument(e.startValue, e.endValue);
            }
        }
    });

angular.element(document).ready(function () {
   angular.bootstrap(document, ['myApp']);
});
<div style="height:350px; max-width:800px; margin: 0px auto" data-bind="dxChart: chartConfiguration"></div>
<div style="height:120px; max-width:800px; margin: 0px auto" data-bind="dxRangeSelector: rangeSelectorConfiguration"></div>
var dataSource =  [
    { arg: 10, y1: -12, y2: 10, y3: 32 },
    { arg: 20, y1: -32, y2: 30, y3: 12 },
    { arg: 40, y1: -20, y2: 20, y3: 30 },
    { arg: 50, y1: -39, y2: 50, y3: 19 },
    { arg: 60, y1: -10, y2: 10, y3: 15 },
    { arg: 75, y1: 10, y2: 10, y3: 15 },
    { arg: 80, y1: 30, y2: 100, y3: 130 },
    { arg: 90, y1: 40, y2: 110, y3: 140 },
    { arg: 100, y1: 50, y2: 90, y3: 90 },
    { arg: 105, y1: 40, y2: 145, y3: 120 },
    { arg: 110, y1: -12, y2: 10, y3: 32 },
    { arg: 120, y1: -32, y2: 30, y3: 12 },
    { arg: 130, y1: -20, y2: 20, y3: 30 },
];

var series = [
    { argumentField: 'arg', valueField: 'y1' },
    { argumentField: 'arg', valueField: 'y2' },
    { argumentField: 'arg', valueField: 'y3' }
];

var viewModel = {
    chartInstance: {},
    chartConfiguration: {
        dataSource: dataSource,
        series: series,
        legend: { visible: false },
        onInitialized: function (e) {
            // Setting initial zoom range
            e.component.zoomArgument(75, 130);
            // Preserving the chart instance to use later in dxRangeSelector
            viewModel.chartInstance = e.component;
        }
    },
    rangeSelectorConfiguration: {
        dataSource: dataSource,
        chart: { series: series },
        scale: { minRange: 10 },
        selectedRange: {
            startValue: 75,
            endValue: 130
        },
        behavior: { callSelectedRangeChanged: 'onMoving' },
        onSelectedRangeChanged: function (e) {
            viewModel.chartInstance.zoomArgument(e.startValue, e.endValue);
        }
    }
};

ko.applyBindings(viewModel);
<div id="chartContainer" style="height:350px; max-width:800px; margin: 0px auto"></div>
<div id="rangeSelectorContainer" style="height:120px; max-width:800px; margin: 0px auto"></div>
var dataSource =  [
    { arg: 10, y1: -12, y2: 10, y3: 32 },
    { arg: 20, y1: -32, y2: 30, y3: 12 },
    { arg: 40, y1: -20, y2: 20, y3: 30 },
    { arg: 50, y1: -39, y2: 50, y3: 19 },
    { arg: 60, y1: -10, y2: 10, y3: 15 },
    { arg: 75, y1: 10, y2: 10, y3: 15 },
    { arg: 80, y1: 30, y2: 100, y3: 130 },
    { arg: 90, y1: 40, y2: 110, y3: 140 },
    { arg: 100, y1: 50, y2: 90, y3: 90 },
    { arg: 105, y1: 40, y2: 145, y3: 120 },
    { arg: 110, y1: -12, y2: 10, y3: 32 },
    { arg: 120, y1: -32, y2: 30, y3: 12 },
    { arg: 130, y1: -20, y2: 20, y3: 30 },
];

var series = [
    { argumentField: 'arg', valueField: 'y1' },
    { argumentField: 'arg', valueField: 'y2' },
    { argumentField: 'arg', valueField: 'y3' }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        series: series,
        legend: { visible: false },
        onInitialized: function (e) {
            // Setting initial zoom range
            e.component.zoomArgument(75, 130);
        }
    })

    $("#rangeSelectorContainer").dxRangeSelector({
        dataSource: dataSource,
        chart: { series: series },
        scale: { minRange: 10 },
        selectedRange: {
            startValue: 75,
            endValue: 130
        },
        behavior: { callSelectedRangeChanged: 'onMoving' },
        onSelectedRangeChanged: function (e) {
            var chartInstance = $("#chartContainer").dxChart("instance");
            chartInstance.zoomArgument(e.startValue, e.endValue);
        }
    });
});

Using Mouse or Touch Gestures

The Chart widget allows you to enable built-in scrolling and zooming. You can use the mouse wheel or the "pinch" gesture for zooming and the horizontal slide gesture across the chart (using mouse or touch interface) for scrolling.

DevExtreme ChartJS Zooming Scrolling

You can enable mouse support, touch support or both by assigning corresponding values to the scrollingMode and/or zoomingMode options.

JavaScript
var chartOptions = {
    // ...
    scrollingMode: "all", // "touch", "mouse"
    zoomingMode: "all"    // "touch", "mouse"
};

View Demo

Using the Scroll Bar

In addition to scrolling by mouse and touch gestures, you can display a separate visual element for scrolling called scroll bar.

The scroll bar is configured using the scrollBar object. Set the visible field of this object to true to display the scroll bar.

NOTE: Before displaying the scroll bar, make sure that scrolling and zooming features are enabled, otherwise the scroll bar will not be operational.

JavaScript
var chartOptions = {
    // ...
    scrollingMode: "all",
    zoomingMode: "all",

    scrollBar: {
        visible: true,
        //...
    }
};

View Demo

To learn more about the scroll bar as a visual element, refer to the Chart Elements | Scroll Bar topic.