Create a version to support angular4

[davidgodzsak]

Reproduction of the problem I want to use ng2-charts in Ionic3 which depends on angular4. Can you create a version which works with angular4?

[davidgodzsak]

I started working on this issue and found, that it could be done if ngm-cli had a version which depends on angular 4.0.0, but they skipped that version and went with 4.0.2

[alaturqua]

I have got the same issue. Have been using it with angular 2 and would like to upgrade to 4th version of angular.

[davidgodzsak]

By the way I found out that If you just ignore the warning it will still work with angular4

[santekotturi]

@godzsa can you share how you import ng2-charts into your ionic2/ng4 app?

I'm just getting started with it but am getting all sorts of errors.

[davidgodzsak]

I have this in my dependencies: "ng2-charts": "^1.5.0"

[santekotturi]

@godzsa I'm using:

"chart.js": "^2.5.0",
"ng2-charts": "^1.5.0",

and in my module: I have import { ChartsModule } from 'ng2-charts/ng2-charts'; and

@NgModule({
  declarations: [
    BarChartDemoComponent
  ],
  entryComponents: [
    BarChartDemoComponent
  ],
  imports: [
    IonicPageModule.forChild(MyPage),
    ChartsModule
  ],
  exports: [...  ]
})

But this throws: Unhandled Promise rejection: Template parse errors: Can't bind to 'datasets' since it isn't a known property of 'base-chart'.

Where my component is (the example from the website):

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;
     */
  }
}

template:

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

Curious how you have it working. All the other posts/answers online are from people using different ways of importing, none of which are related to ionic's setup.

[Ronald-13]

Im having a similar issue. Just can't get it through rollup, even after including it in namedExport.

Error: 'ChartsModule' is not exported by node_modules\ng2-charts\ng2-charts.js

[davidgodzsak]

@skotturi In my app.module.ts I have : import {ChartsModule} from "ng2-charts"; And I think you should use <canvas> instead of <base-chart> unless you wrapped canvas in a base-chart component.

  <canvas baseChart
            [labels]="statistic.labels"
            [datasets]="statistic.datasets"
            [chartType]="chartType"
            [legend]="false">
  </canvas>

[anton-kirschhock]

@godzsa I have followed the installation steps in http://valor-software.com/ng2-charts/ but I don't see a chart:

<canvas baseChart
        [data]="data"
        [labels]="labels"
        [chartType]="chartType"></canvas>

with the properties:

    private data: number[] = [10,10,10,10,10];
    private labels = ["lbl1", "lbl2", "lbl3", "lbl4", "lbl5"];
    private chartType = "pie";

I am using NG 4:

"@angular/common": "^4.0.0",
"@angular/compiler": "^4.0.0",
"@angular/core": "^4.0.0",
"@angular/forms": "^4.0.0",
"@angular/http": "^4.0.0",
"@angular/platform-browser": "^4.0.0",
"@angular/platform-browser-dynamic": "^4.0.0",
"@angular/router": "^4.0.0",

and package.json looks fine:

"chart.js": "^2.5.0",
"ng2-charts": "^1.5.0",

Any clue what here the problem seems to be?

[davidgodzsak]

@muziekklas do you have ChartsModule included in your app.modules.ts in imports list?

import {ChartsModule} from "ng2-charts";

@NgModule({
  declarations: [
....
  ],
  imports: [
.....
    ChartsModule,
....
  ],
  providers: [
  ...
  ]
...
})
export class AppModule {
}

[anton-kirschhock]

@godzsa Yes. I followed the installation guidelines which indeed state that you must add it to the imports list

[davidgodzsak]

@muziekklas It should be working then. Check the console whether you have any error messages. See if you have ng2-charts in your node_modules, I don't have any other idea at the moment. Although what I noticed is that I don't have charts.js in my package.json as a dependency, I have downloaded it to my resources folder and added the script tag to my index.html page. But I don't think this makes any difference...

One more important thing is to put your tag before the bundle (main.js) so it gets loaded before your Angular app...

[anton-kirschhock]

@godzsa we have interfaced ChartJS on our own. It works now. Thanks anyhow

[dfa1234]

Hi,

I suppose that I have the same problem. I'm using ionic3 so angular4.0.0

dfa$ npm install ng2-charts --save
ionic-hello-world@ /Users/dfa/workspace
├── UNMET PEER DEPENDENCY @angular/common@4.0.0
├── UNMET PEER DEPENDENCY @angular/core@4.0.0
├── UNMET PEER DEPENDENCY @ionic/app-scripts@1.3.0
└─┬ ng2-charts@1.5.0 
  └─┬ chart.js@2.5.0 
    ├─┬ chartjs-color@2.1.0 
    │ ├─┬ chartjs-color-string@0.4.0 
    │ │ └── color-name@1.1.2 
    │ └── color-convert@0.5.3 
    └── moment@2.18.1 

npm WARN @ionic/cli-plugin-ionic-angular@1.1.2 requires a peer of @ionic/app-scripts@^1.3.7 but none was installed.
npm WARN ng2-charts@1.5.0 requires a peer of @angular/common@^2.3.0 but none was installed.
npm WARN ng2-charts@1.5.0 requires a peer of @angular/core@^2.3.0 but none was installed.

[daemonblade]

This is what I did to get mine working: package.json:

"chart.js": "~2.5.0",
"ng2-charts": "~1.5.0",

systemjs.config.js:

map:
{
  ...,
  "ng2-charts": "npm:ng2-charts"
},
packages:
{
  ...,
  "ng2-charts":
     {
        format: "cjs",
        main: "bundles/ng2-charts.umd.js",
        defaultExtension: "js"
     }    
}

index.html:

<script src="node_modules/chart.js/dist/Chart.bundle.min.js"></script>

And then import {ChartsModule} from "ng2-charts"; as required.

[CanadianEngineer]

Hey, I'm still having the issue of the charts not appearing.

npm list ng2-charts
client@0.0.0 ...
└── ng2-charts@1.6.0

npm list chart.js
client@0.0.0 ...
├── chart.js@2.6.0
└─┬ ng2-charts@1.6.0
  └── chart.js@2.6.0  deduped

I've included the following lines in my angular-cli.json file, under scripts:

"../node_modules/moment/moment.js",
"../node_modules/chart.js/dist/Chart.min.js",

But I've noticed that there's no css file in chart.js/dist/, so I didn't try including it

I've also imported the file in my app.module.ts as shown below, and included ChartsModule in the respective imports:

import { ChartsModule } from 'ng2-charts/ng2-charts';

Finally, in my component, I have

<base-chart class="chart" [datasets]="datasets" [labels]="labels" [options]="options" [chartType]="'line'">
          </base-chart>

and

  public datasets = [
    {
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3]
    }
  ];

  public labels = ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'];

  public options = {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  };

Which I copied from some example somewhere.