{"id":16342,"date":"2018-04-14T20:08:25","date_gmt":"2018-04-14T20:08:25","guid":{"rendered":"http:\/\/www.highcharts.com\/blog\/?p=16342"},"modified":"2026-01-12T09:50:30","modified_gmt":"2026-01-12T09:50:30","slug":"live-data-configuration","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/news\/live-data-configuration\/","title":{"rendered":"Live data configuration"},"content":{"rendered":"<p>&nbsp;<\/p>\n<p>Highcharts 6.1 introduces support for setting up a live data connection to the server in a pure configuration syntax. Previously you needed to load data using ajax, then run <a href=\"https:\/\/api.highcharts.com\/class-reference\/Highcharts.Series#addPoint\">Series.addPoint<\/a>, <a href=\"&quot;https:\/\/api.highcharts.com\/class-reference\/Highcharts.Series#update\">Series.update<\/a> or similar functions on success. Highcharts now does all that for you. All you need to do is to provide the link to an URL (CSV, JSON or Google Spreadsheet) and enable polling to keep it updated. This functionality is part of the <a href=\"https:\/\/www.highcharts.com\/docs\/working-with-data\/data-module\">data module<\/a>.<\/p>\n<p><iframe loading=\"lazy\" style=\"height: 650px; width: 100%;\" src=\"https:\/\/www.highcharts.com\/samples\/embed\/highcharts\/data\/livedata-columns\/\" width=\"300\" height=\"150\"><\/iframe><\/p>\n<h3>Setting up dynamic data<\/h3>\n<p>The chart above (<a href=\"http:\/\/jsfiddle.net\/gh\/get\/library\/pure\/highcharts\/highcharts\/tree\/master\/samples\/highcharts\/data\/livedata-columns\/\">view it on jsFiddle<\/a>) is set up in a declarative way, using no callbacks or function calls. That means a chart like that can also be created using graphical user interfaces, including <a href=\"https:\/\/cloud.highcharts.com\">Highcharts Cloud<\/a>, providing that you have the dynamic backend that can serve the updated data set. For this purpose we have created a node based test server. The file <a href=\"https:\/\/demo-live-data.highcharts.com\/vs-load.csv\">vs-load.csv<\/a> prints updated data from the server. Three new Highcharts options are central for making this work.<\/p>\n<ul>\n<li><a href=\"https:\/\/api.highcharts.com\/highcharts\/data.csvURL\">data.csvURL<\/a> points to a CSV file which is loaded into series and categories in the chart.<\/li>\n<li><a href=\"https:\/\/api.highcharts.com\/highcharts\/data.enablePolling\">data.enablePolling<\/a> instructs the chart to reload the data periodically. By default, this is false, providing only a static chart.<\/li>\n<li><a href=\"http:\/\/api.highcharts.com\/highcharts\/data.dataRefreshRate\">data.dataRefreshRate<\/a> sets the refresh rate, defaulting to 2 seconds.<\/li>\n<\/ul>\n<h3>Shifting data<\/h3>\n<p>The demo above displays a single series with categorized data, where the categories are constant, but the data values change. A very common use case for dynamic charts however is a timeline where the chart shifts as new measurements come in. In this scenario, Highcharts will map the new X values (times) against the existing ones. It removes missing values and add new ones, while animating the ones that are mapped. This results in a smooth update animation where it is clear to the user how the old data relates to the new.<\/p>\n<p><iframe loading=\"lazy\" style=\"height: 450px; width: 100%;\" src=\"https:\/\/www.highcharts.com\/samples\/embed\/highcharts\/data\/livedata-csv\/\" width=\"300\" height=\"150\"><\/iframe><\/p>\n<p>In addition to this, the chart will also respond to the data structure itself being changed. Columns can be removed or added, resulting on data series being removed or added.<\/p>\n<h3>Other sources<\/h3>\n<p>Dynamic data can also be loaded from other sources than CSV. The new <a href=\"https:\/\/api.highcharts.com\/highcharts\/data.rowsURL\">data.rowsURL<\/a> and <a href=\"https:\/\/api.highcharts.com\/highcharts\/data.columnsURL\">data.columnsURL<\/a> options point to JSON files containing two-dimensional arrays with tabular data. The <a href=\"https:\/\/api.highcharts.com\/highcharts\/data.googleSpreadsheetKey\">data.googleSpreadsheetKey<\/a> option can also be combined with enablePolling in order to create a live chart.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>&nbsp; Highcharts 6.1 introduces support for setting up a live data connection to the server in a pure configuration syntax. Previously you needed to load data using ajax, then run Series.addPoint, Series.update or similar functions on success. Highcharts now does all that for you. All you need to do is to provide the link to [&hellip;]<\/p>\n","protected":false},"author":49,"featured_media":21955,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"meta_title":"","meta_description":"","hc_selected_options":[],"footnotes":""},"categories":[211],"tags":[1094,1100],"coauthors":[734],"class_list":["post-16342","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-news","tag-highcharts-core","tag-performance"],"_links":{"self":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/16342","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\/49"}],"replies":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/comments?post=16342"}],"version-history":[{"count":1,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/16342\/revisions"}],"predecessor-version":[{"id":29128,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/16342\/revisions\/29128"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/21955"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=16342"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=16342"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=16342"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=16342"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}