CODEWITHSUNDEEP
angularchart.js
kessy
kessy

Reputation: 41

how to use chart.js in angular 7

my chart.js is not displaying

The is an admin dashboard, am trying to display a graph of revenues for the year. But am trying the tutorial, before passing real data.

ngOnInit() {
    this.createChart();
  }

  createChart() {
    const revenueLineChart = new Chart('revenueLineChart', {
      type: 'line',
      data: {
        labels: Object.values(Months),
        datasets: [
          {
            label: 'Monthly Revenues For The Year',
            data: [2, 3, 5, 7, 8, 6, 7, 9, 4, 3, 0, 8],
            fill: false,
            lineTension: 0.2,
            borderColor: 'red',
            borderWidth: 1,
          }
        ],
      },
      options: {
        title: {
          text: 'Monthly Revenue',
          display: true
        },
        scales: {
          yAxes: [
            {
              ticks: {
                beginAtZero: true
              }
            }
          ]
        }
      },
    });
  }

Upvotes: 3

Views: 7354

Answers (1)

Stavm
Stavm

Reputation: 8131

after installing chartjs via npm or what have you:

import { Chart } from 'chart.js';

app.component.ts

@ViewChild('revenueLineChart') chart: ElementRef;

ngAfterViewInit() { this.createChart() }

createChart() {
   const ctx = this.chart.nativeElement.getContext('2d');
   const revenueLineChart = new Chart(ctx, { // ... });
   // .. the rest of your settings
}

app.component.html

<canvas #revenueLineChart></canvas>

Upvotes: 2

Related Questions