Chart in meteor?

how to use Chart.js in meteor?
Pl example…

1 Like

Cant help with Chart.js but how about Highcharts? There is a template helper and some other examples.

1 Like

Very thanks for your reply.

No problem. If you have more questions, just ask them on the github page.

I have never used chartjs before but I gave it a quick shot. Here is a working chart.js site and here is the repo to that site I apologize for how sloppy it is. I hope it helps though. I had a hard time getting bar charts to work so they are not included. It was weird.



I´ve used your example plus the bar example from the website. Added the current min version of the library (1.0.2), removed your existing files in compatibility and bar chart worked out of the box.

1 Like

Good example. Static chart working well. But what about reactive changes? If I change data on the page, how to rerender chart without page reload?

Use an autorun in the onrendered callback.

So. As a result it is easy. Here my code.

// --- Update Chart Function
function updateChart() {
    $('#myChart').replaceWith('<canvas class="chart" id="myChart"></canvas>');
    var data = new dataForChart();
    new drowChart(data);


<div class="col-xs-12">
    <canvas class="chart" id="myChart"></canvas>

When you change data you should call function updateChart()

Why did you replace the dom and no invoke the chart js api to clean/refresh the chart?

There’s an official package for Chart.js. Have you tried it?

@dcworldwide Yes I just replase DOM element canvas. I didn’t find better solution

@dandv No, I don’t use packaje. I just downlod Chart.js library from official page

Hi , How are you ?

Can you help me to fill my geochart dynamically, here is my code :

Template.AllUsers.rendered = function() {
chart = {
target: ‘chart1’,
type: ‘GeoChart’,
columns: [
[‘string’, ‘Country’],
[‘number’, ‘Nombres de personnes inscrites’]
rows: [
[‘Belgium’, 3],
[‘Canada’, 100],
[‘France’, 50],
[‘Russie’, 100],
[‘United States’, 50]
options: {colorAxis: {colors: [’#cfd8dc’, ‘#607d8b’]}


I would like to fill in the rows dynamically. Thank you very much !

Can you show a little more code? What is the source of the data?

Which chart library are you using? It doesn’t seem to be Chart.js, Highcharts or Google Charts.

i use google charts in meteor

So, I used the first example in Google’s docs and reworked that to demonstrate how to drive a geo chart reactively. It’s probably not the most efficient implementation, but I’ve never used Google Charts before.

Repo is here - It’s a good options for charts if you are open to use 3rd party. Takes very less time to get integrated with Meteor.

I am having trouble with my charts. They don’t get updated even though the data is changed. () {
this.budget = new ReactiveVar();
this.budget_used_check = new ReactiveVar();
this.budget_used = new ReactiveVar();
this.profit = new ReactiveVar();
const instance = this
	instance.autorun(() => {
		this.budget_used_check.set(Template.instance().data.a.cost * Template.instance().data.a.time);
		this.budget_used.set(Template.instance().budget_used_check.get() + parseFloat(expense(Template.instance().data.b)));
		this.profit.set(this.budget.get() - this.budget_used.get());
		var context = '.graph';
		var budget_ctx = $(context);
		var budget_chart = new Chart(budget_ctx, {
			type: 'doughnut',
			data: {
				datasets: [{
					data: [Template.instance().budget.get(), Template.instance().budget_used.get(), Template.instance().profit.get()],
					backgroundColor: color_budget
				labels: ["budget", "expense", "profit"],
			options: {
				legend: {
					onClick: (e) => e.stopPropagation()
		console.log(Template.instance().profit.get(),"inside autorun");

the autorun doesnt render new data as well.