Chart.js in meteor

help
1

I’m new to meteor and programming. So can someone help me with chart.js?
I don’t know how to use the line graph.

2

If you are using React and chart.js 3, you can just use it like this:

import {
  LineController,
  LinearScale,
  Tooltip,
  CategoryScale,
  PointElement,
  LineElement,
} from 'chart.js';
import { ReactChart } from 'chartjs-react';

ReactChart.register(
  LineController,
  LinearScale,
  Tooltip,
  CategoryScale,
  PointElement,
  LineElement
);

const options = {
  indexAxis: 'x',
  scales: {
    y: {
      beginAtZero: true,
    },
  },
};

The datasets objects might have a structure like this:

const datasets = [{
      label: 'foo',
      data: [1, 2, 3],
      fill: false,
      borderColor: 'rgb(161, 219, 255)',
      tension: 0.1,
    }]

And then finally render a chart:

  const chartData = {
    labels: ['qux', 'bar', 'baz'],
    datasets,
  };
<ReactChart options={options} type="line" data={chartData} height={100} />

Good luck.

3

thanks for your answer. But I am using an old version of the meteor, I use javascript as required by the company.

4

The alihuber’s code don’t works in your Meteor version ?

5

If you are using Blaze you can create template for rendering using chartjs

template html

<template name="resultAnalyticsD">
  <div class="card" style="border:white">
    <div class="col-sm-12 col-md-12"  style="width: 100%; min-height: 400px;text-align:center;">
      <canvas id="canvas1{{chartid}}" style="width: 400px; height: 400px;"></canvas>
    </div>
  </div>
</template>

template js

import Chart from "chart.js";
Template.resultAnalyticsD.onRendered(function () {
  let template = this;

  let gg = template.data.chartid;
  //console.log('ff');
  let gg1 = template.data.data;
  //console.log(gg1);
  let canvas1 = template.find("#canvas1" + gg);
  let ctx1 = canvas1.getContext("2d");

  let myBar1 = new Chart(ctx1, gg1);
})

call the template

{{>resultAnalyticsD chartid=chartid data=data}}

chartid if multiple charts on a page, data - the chart definition as per chart.js documentation

1 Like