Member Avatar for davy_yg
davy_yg 2 Posting Whiz

Hello,

I am following this tutorial:

https://valor-software.com/ng2-charts/

I try to set up the barchart. I copy exactly from the demo script:

new.html

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="node_modules/chart.js/src/chart.js"></script>
<script src="bar.js"></script>
</head>

<body>

<div>
  <div style="display: block">
    <canvas baseChart
            [datasets]="barChartData"
            [labels]="barChartLabels"
            [options]="barChartOptions"
            [legend]="barChartLegend"
            [chartType]="barChartType"
            (chartHover)="chartHovered($event)"
            (chartClick)="chartClicked($event)"></canvas>
  </div>
  <button (click)="randomize()">Update</button>
</div>

</body>
</html>

bar.js 

import { Component } from '@angular/core';

@Component({
  selector: 'bar-chart-demo',
  templateUrl: './bar-chart-demo.html'
})
export class BarChartDemoComponent {
  public barChartOptions:any = {
    scaleShowVerticalLines: false,
    responsive: true
  };
  public barChartLabels:string[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
  public barChartType:string = 'bar';
  public barChartLegend:boolean = true;

  public barChartData:any[] = [
    {data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A'},
    {data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B'}
  ];

  // events
  public chartClicked(e:any):void {
    console.log(e);
  }

  public chartHovered(e:any):void {
    console.log(e);
  }

  public randomize():void {
    // Only Change 3 values
    let data = [
      Math.round(Math.random() * 100),
      59,
      80,
      (Math.random() * 100),
      56,
      (Math.random() * 100),
      40];
    let clone = JSON.parse(JSON.stringify(this.barChartData));
    clone[0].data = data;
    this.barChartData = clone;
    /**
     * (My guess), for Angular to recognize the change in the dataset
     * it has to change the dataset variable directly,
     * so one way around it, is to clone the data, change it and then
     * assign it;
     */
  }
}

I wonder why I still see a blank page with an update button?

What's missing? Do I need to modify the Markup or the TypeScript to make it works?

  • 1 Contributor
  • 0 Replies
  • 296 Views

Dani AI

Generated

Short answer: the demo you copied is for Angular (2+) / TypeScript and won’t work when dropped into a plain HTML page that loads AngularJS 1.x. The template bindings you used ([datasets], (chartClick), etc.) are Angular (2+) syntax and need an Angular component/module build step; ng2-charts is designed to run inside an Angular (2+) app, not inside AngularJS. (github.com)

Two practical paths to fix this for :

  1. Convert to an Angular (2+) project and use ng2-charts (recommended if you want the TypeScript demo). Quick steps:
  • create an Angular app (Angular CLI),
  • add ng2-charts (or npm install ng2-charts chart.js / ng add ng2-charts),
  • provide the chart configuration globally (modern ng2-charts uses provideCharts / withDefaultRegisterables() or the older ChartsModule approach). Example AppModule provider pattern:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { provideCharts, withDefaultRegisterables } from 'ng2-charts';
import { AppComponent } from './app.component';

@NgModule({
  imports: [BrowserModule],
  providers: [provideCharts(withDefaultRegisterables())],
  bootstrap: [AppComponent]
})
export class AppModule {}

Also follow Chart.js integration notes: recent Chart.js releases require either the chart.js/auto import or explicit registration of controllers/elements if you use a bundler. (github.com)

  1. Keep using AngularJS 1.x (no rewrite): use the AngularJS wrapper angular-chart.js or call Chart.js directly from your controller. The wrapper exposes AngularJS directives (e.g. <canvas class="chart chart-bar" chart-data="data" chart-labels="labels">) and requires Chart.js 2.x. Example pattern:
angular.module('myApp', ['chart.js'])
.controller('BarCtrl', function($scope) {
  $scope.labels = [...];
  $scope.series = [...];
  $scope.data = [ [...], [...] ];
});

See the angular-chart.js docs for the exact directive names and options. (jtblin.github.io)

Troubleshooting tips:

  • Don’t include Chart.js from node_modules/.../src — use the package via your bundler (npm + imports) or the dist/CDN build; Chart.js v3+ changed distributed files and bundler behavior (tree-shaking / registration).
  • Remove the AngularJS script if you switch to an Angular CLI app (they conflict).
  • Check the browser console for errors like “Chart is not a constructor” or missing registerables — those point to Chart.js import/registration problems. Follow the Chart.js integration/migration notes if you hit import errors. (chartjs.org)

If the goal is a quick proof-of-concept, creating a small Angular CLI demo with ng2-charts or a tiny AngularJS page with angular-chart.js will show which route is easiest.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.