{"id":5233,"date":"2015-12-10T14:40:05","date_gmt":"2015-12-10T13:40:05","guid":{"rendered":"http:\/\/www.highcharts.com\/blog\/?p=5233"},"modified":"2026-01-08T08:52:39","modified_gmt":"2026-01-08T08:52:39","slug":"195-meteor-standalone","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/integration\/195-meteor-standalone\/","title":{"rendered":"Highcharts and Meteor"},"content":{"rendered":"

This article will describe how to install and use Highcharts in Meteor.<\/p>\n

1. Installation<\/h2>\n

To install Highcharts in Meteor, run in the terminal:<\/p>\n

> meteor add highcharts:highcharts-meteor<\/pre>\n
Now, you have installed Highcharts in your project. If you want to include modules from the Highcharts library like exporting, drilldown, 3D charts etc., read more\u00a0here<\/a>.<\/p>\n
2. Live chart<\/h2>\n
The example below shows how to create a live chart in Meteor using Highcharts:<\/p>\n
Note: All examples in this article are based on Meteor\u2019s tutorial<\/a>.<\/span><\/p>\n
> index.html<\/p>\n
<div id=\"chart\">{{createChart}}<\/div><\/pre>\n
Code above will create empty div which will require a helper in our template. Let’s add it:<\/span><\/p>\n
if (Meteor.isClient) {\r\n  Meteor.subscribe(\"Tasks\");\r\n\r\n  Template.body.helpers({\r\n    createChart: function () {\r\n      \/\/ Gather data: \r\n      var allTasks = Tasks.find().count(),\r\n            incompleteTask = Tasks.find({checked: {$ne: true}}).count(),\r\n            tasksData = [{\r\n                y: incompleteTask,\r\n                name: \"Incomplete\"\r\n             }, {\r\n                 y: allTasks - incompleteTask,\r\n                 name: \"Complete\"\r\n             }];\r\n      \/\/ Use Meteor.defer() to craete chart after DOM is ready:\r\n      Meteor.defer(function() {\r\n        \/\/ Create standard Highcharts chart with options:\r\n        Highcharts.chart('chart', {\r\n          series: [{\r\n            type: 'pie',\r\n            data: tasksData\r\n          }]\r\n        });\r\n      });\r\n    }\r\n  });\r\n<\/pre>\n
3. Live chart with Highcharts API<\/h2>\n
The example above recreates a new chart for each new data added to the chart. As long as the amount of data is low, the chart\u2019s responsiveness will not be challenged. Nevertheless, for a larger amount of data such as 50 000 points, the chart\u2019s responsiveness will no longer be guaranteed. One way to resolve that issue is by using Highcharts\u2019 API to update the chart (check the example below):<\/p>\n
\u00a0<\/span>Template:<\/span><\/p>\n
\u00a0> index.html<\/span><\/p>\n
{{> reactiveChart chart_id=\"liveChart\"}} <template name=\"reactiveChart\"> <div id=\"{{chart_id}}\"><\/div> <\/template><\/pre>\n
> template.js<\/p>\n
  Template.reactiveChart.onRendered(function () {\r\n\t\tvar cursor = Template.currentData(),\r\n\t\t\t\tquery = Tasks.find(),\r\n\t\t\t\tinitializing = true, \/\/ add initializing variable, see:  http:\/\/docs.meteor.com\/#\/full\/meteor_publish\r\n\t\t\t\tliveChart;\r\n\t\r\n\t\t\/\/ Create basic line-chart:\r\n\t\tliveChart = Highcharts.chart(cursor.chart_id, {\r\n\t\t\t\ttitle: {\r\n\t\t\t\t\t\ttext: 'Number of elements'\r\n\t\t\t\t},\r\n\t\t\t\tseries: [{\r\n\t\t\t\t\t\ttype: 'column',\r\n\t\t\t\t\t\tname: 'Tasks',\r\n\t\t\t\t\t\tdata: [query.count()]\r\n\t\t\t\t}]\r\n\t\t});\r\n\t\r\n\t\t\/\/ Add watchers:\r\n\t\tquery.observeChanges({\r\n\t\t\t\tadded: function () {\r\n\t\t\t\t\tif (!initializing) {\r\n\t\t\t\t\t\t\/\/ We will use Highcharts API to add point with \"value = previous_value + 1\" to indicate number of tasks\r\n\t\t\t\t\t\tvar points = liveChart.series[0].points;\r\n\t\t\t\t\t\tliveChart.series[0].addPoint(\r\n\t\t\t\t\t\t\t\tpoints[points.length - 1].y + 1\r\n\t\t\t\t\t\t);\r\n\t\t\t\t\t}\r\n\t\t\t\t},\r\n\t\t\t\tremoved: function () {\r\n\t\t\t\t\tif (!initializing) {\r\n\t\t\t\t\t\t\/\/ We will use Highcharts API to add point with \"value = previous_value - 1\" to indicate number of tasks\r\n\t\t\t\t\t\tvar points = liveChart.series[0].points;\r\n\t\t\t\t\t\tliveChart.series[0].addPoint(\r\n\t\t\t\t\t\t\t\tpoints[points.length - 1].y - 1\r\n\t\t\t\t\t\t);\r\n\t\t\t\t\t}\r\n\t\t\t}\r\n\t\t});   \r\n\t\tinitializing = false;\r\n\t});\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
Meteor allows for rapid prototyping and produces cross-platform (web, Android, iOS) code. In this article we will go over some of the ways Highcharts can be used with Meteor.<\/p>\n","protected":false},"author":48,"featured_media":10592,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"meta_title":"","meta_description":"","hc_selected_options":[],"footnotes":""},"categories":[1105],"tags":[1094],"coauthors":[727],"class_list":["post-5233","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-integration","tag-highcharts-core"],"_links":{"self":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/5233","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\/48"}],"replies":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/comments?post=5233"}],"version-history":[{"count":1,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/5233\/revisions"}],"predecessor-version":[{"id":29036,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/5233\/revisions\/29036"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/10592"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=5233"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=5233"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=5233"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=5233"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}