{"id":19832,"date":"2020-06-09T10:11:46","date_gmt":"2020-06-09T09:11:46","guid":{"rendered":"http:\/\/www.highcharts.com\/blog\/?p=19832"},"modified":"2026-01-12T11:41:16","modified_gmt":"2026-01-12T11:41:16","slug":"introduction-to-highcharts-events","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/tutorials\/introduction-to-highcharts-events\/","title":{"rendered":"Introduction to Highcharts events"},"content":{"rendered":"<p>For almost every Highcharts feature, there are a bunch of events that will unleash a whole set of custom interactions users can take vis-a-vis your charts.<br \/>\nIn this article, we will show you the basic concept of Highcharts events within the <a href=\"https:\/\/api.highcharts.com\/highcharts\/chart.events\" target=\"_blank\" rel=\"noopener noreferrer\">chart feature<\/a>, and how\/when you can use them.<br \/>\nLet\u2019s start with the basic chart events on the demo below:<\/p>\n<ul>\n<li>Zoom in.<\/li>\n<li>Click on the chart.<\/li>\n<li>Resize the window.<\/li>\n<li>Change the series type.<\/li>\n<\/ul>\n<p class=\"demo-container\"><iframe loading=\"lazy\" src=\"\/\/jsfiddle.net\/BlackLabel\/w2zp5bam\/embedded\/result\/\" width=\"100%\" height=\"520\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\" title=\"A line chart displays random data that switches to column chart using a button. By Karol Ko\u0142odziej\"><\/iframe><\/p>\n<p>When the user interacts with the chart such as the zoom in, chart resize, etc. events occur. Each event on the chart has an event listener or handler that fires when an event occurs. For example, the code below displays a message for each of the event above:<\/p>\n<pre>  chart: {\r\n    events: {\r\n      click: function() {\r\n        let message = `Click event- fired after ${new Date() - start} ms. &lt;br&gt;`\r\n        text.innerHTML += message;\r\n      },\r\n      load: function() {\r\n        let message = `Load event- fired after ${new Date() - start} ms. &lt;br&gt;`\r\n        text.innerHTML += message;\r\n      },\r\n      render: function() {\r\n        let message = `Render event- fired after ${new Date() - start} ms. &lt;br&gt;`\r\n        text.innerHTML += message;\r\n      },\r\n      redraw: function() {\r\n        let message = `Redraw event- fired after ${new Date() - start} ms. &lt;br&gt;`\r\n        text.innerHTML += message;\r\n      },\r\n      selection: function() {\r\n        let message = `Selection event- fired after ${new Date() - start} ms. &lt;br&gt;`\r\n        text.innerHTML += message;\r\n      },\r\n    },\r\n    zoomType: 'x'\r\n  },<\/pre>\n<p>Here is the explanation of the events used in the demo above:<\/p>\n<h2>Load event<\/h2>\n<p>The <a href=\"https:\/\/api.highcharts.com\/highcharts\/chart.events.load\" target=\"_blank\" rel=\"noopener noreferrer\">load event<\/a> is the first event to be fired, even before the render phase. Btw, the load event is fired only once at the beginning of the chart creation. That is why this part of code is usually used to:<\/p>\n<ol>\n<li>Manipulate static\/hardcoded data (check <a href=\"https:\/\/jsfiddle.net\/BlackLabel\/7wu4695b\/\" target=\"_blank\" rel=\"noopener noreferrer\">demo<\/a>).<\/li>\n<li>Updating chart options ( check <a href=\"https:\/\/jsfiddle.net\/BlackLabel\/ovn1cehf\/\" target=\"_blank\" rel=\"noopener noreferrer\">demo<\/a>).<\/li>\n<\/ol>\n<h2>Render event<\/h2>\n<p>The <a href=\"https:\/\/api.highcharts.com\/highcharts\/chart.events.render\" target=\"_blank\" rel=\"noopener noreferrer\">render event<\/a> is a very universal and powerful event. It is fired after the load phase and after a few other events. Basically, whenever anything is changed in the chart &#8211; this event is triggered.<br \/>\nThis function has to be treated with caution because you might accidentally create an infinite loop with this event.<br \/>\nHere are examples of how to use this event:<\/p>\n<ol>\n<li>Manipulate dynamically loaded data.<\/li>\n<li>Use SVG renderer to add custom responsive paths (check <a href=\"https:\/\/jsfiddle.net\/BlackLabel\/90uwskm8\/\" target=\"_blank\" rel=\"noopener noreferrer\">demo<\/a>)<\/li>\n<\/ol>\n<h2>Redraw event<\/h2>\n<p>The <a href=\"https:\/\/api.highcharts.com\/highcharts\/chart.events.redraw\" target=\"_blank\" rel=\"noopener noreferrer\">redraw event<\/a> may often be seen before render. Notice that this event isn\u2019t fired at the initial chart rendering phase.<br \/>\nHowever, this function has one very popular use case &#8211; to force the chart to rerender once more. It is useful when dealing with a lot of updates at one time:<\/p>\n<p class=\"demo-container\"><iframe loading=\"lazy\" src=\"\/\/jsfiddle.net\/BlackLabel\/f4rv8t92\/embedded\/result\/\" width=\"100%\" height=\"400\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\" title=\"A line chart displays random data. By Karol Ko\u0142odziej\"><\/iframe><\/p>\n<p>After each update, the redraw function is invoked. To get better performances, it is recommended to avoid invoking the redraw function each time by adding a second argument (\u2018false\u2019) to the update method. Next, when all points are updated, you can force the chart to redraw just once. As this simple example shows, rendering time can be about ten times shorter:<\/p>\n<p class=\"demo-container\"><iframe loading=\"lazy\" src=\"\/\/jsfiddle.net\/BlackLabel\/3ejcdom5\/embedded\/result\/\" width=\"100%\" height=\"400\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\" title=\"A line chart displays random data. By Karol Ko\u0142odziej\"><\/iframe><\/p>\n<h2>Click event<\/h2>\n<p>The <a href=\"https:\/\/api.highcharts.com\/highcharts\/chart.events.click\" target=\"_blank\" rel=\"noopener noreferrer\">click event<\/a> only gets fired after clicking on the chart plot area. If a chart is displayed on mobile devices, all click events will also be fired on touch. It helps to interact with users, usually used for getting coordinates of clicked points to use in the further functionalities. Notice that clicking on the series or point won\u2019t fire this event unless you disable the <code>enableMouseTracking<\/code> property.<br \/>\nClick on the chart below to check the <code>enableMouseTracking<\/code> property in action:<\/p>\n<p class=\"demo-container\"><iframe loading=\"lazy\" src=\"\/\/jsfiddle.net\/BlackLabel\/eg57sjuL\/embedded\/result\/\" width=\"100%\" height=\"400\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\" title=\"A line chart displays random data with the selection event enabled. By Karol Ko\u0142odziej\"><\/iframe><\/p>\n<h2>Selection event<\/h2>\n<p>The <a href=\"https:\/\/api.highcharts.com\/highcharts\/chart.events.selection\" target=\"_blank\" rel=\"noopener noreferrer\">selection event<\/a> is fired after selecting the area on the chart. It might be helpful in situations when developers need to know the exact coordinates of selected areas. In the example below, the subtitle can be changed after zooming in or out.<br \/>\nSelect a section on the chart below to fire the selection event:<\/p>\n<p class=\"demo-container\"><iframe loading=\"lazy\" src=\"\/\/jsfiddle.net\/BlackLabel\/cjgsu95x\/embedded\/result\/\" width=\"100%\" height=\"400\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\" title=\"A line chart displays random data. By Karol Ko\u0142odziej\"><\/iframe><\/p>\n<p>Now you know how to use the chart property events, feel free to create demos, and explore the power of Highcharts events.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A step by step tutorial to learn how and when to use Highcharts events.<\/p>\n","protected":false},"author":251,"featured_media":19836,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"meta_title":"","meta_description":"","hc_selected_options":[],"footnotes":""},"categories":[210],"tags":[1094],"coauthors":[790],"class_list":["post-19832","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-highcharts-core"],"_links":{"self":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/19832","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/users\/251"}],"replies":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/comments?post=19832"}],"version-history":[{"count":1,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/19832\/revisions"}],"predecessor-version":[{"id":29238,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/19832\/revisions\/29238"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/19836"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=19832"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=19832"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=19832"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=19832"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}