Ng2-charts: how to use barcharts in angular2 cli project(RC4)

Created on 13 Jul 2016 · 14Comments · Source: valor-software/ng2-charts

Hi Team,

Could you please guide on ,how to i use charts(bar) in my angular2 cli project.I am new to angular .Please guide me from scratch.

Thanks and regards

Venky

Source

venkatesh707

👍4

Most helpful comment

the problem is solved from the #222 issue , i just added (display: block; width: 100%) to the chart div

thank you very much @sahlouls for your help :D :D

alaa-bourouissi on 22 Jul 2016

🎉2

All 14 comments

Did you manage to display any other charts with RC4 ?
It does not render from my side.

sahlouls on 20 Jul 2016

👍1

Same here , with rc4 there is no error but the charts does not appear in the browser

alaa-bourouissi on 21 Jul 2016

I have even tried to render simple canvas but no luck, may be it is angular2 rc.4 issue.

amarewgs on 21 Jul 2016

Working fine with angular2 rc4.

Update angular 2 imports
add the ng2-charts to the main js bundle (depending on your build tool, SystemJs, WebPack, ...)
Need to include both js file in your html
Chart.min.js
Chart.bundle.min.js

Used chart.js version is 2.1.3

sahlouls on 21 Jul 2016

Please can you explain more ? I'm new in using angular 2 and I don't get it

alaa-bourouissi on 21 Jul 2016

Copy both Char.min.js and Chart.bundle.min.js in your index.html file

<body>
  <my-app>Loading...</my-app>
  <script src="assets/js/Chart.min.js"></script>
  <script src="assets/js/Chart.bundle.min.js"></script>
</body>

Add directives for charts and add event handlers, sample below with a customized doughnut chart

import { Component, Input } from '@angular/core'
import { ROUTER_DIRECTIVES }  from '@angular/router'
import { CORE_DIRECTIVES, NgClass } from '@angular/common'
import { CHART_DIRECTIVES } from 'ng2-charts'

const template = require('./my-com.component.html')
const style = require('./my-com.component.css').toString()

@Component({
  selector: 'my-comp',
  template: template,
  styles: [style],
  directives: [ROUTER_DIRECTIVES, CHART_DIRECTIVES, CORE_DIRECTIVES, NgClass]
})
export class MyComp {

  // Doughnut
  public doughnutChartType:string = 'doughnut'
  public doughnutChartLegend:boolean = false
  public doughnutColors:any[] = [{ backgroundColor: ['#1ABB9C', '#E74C3C', '#9CC2CB'] }]

  // Some data - depending on your case
  public doughnutChartLabels:string[] = ['Passed', 'Failed', 'Not Assessed']
  public doughnutChartData:number[] = [4, 5, 15]

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

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

Add the chart in your template

<base-chart class="chart"
                [data]="doughnutChartData"
                [labels]="doughnutChartLabels"
                [legend]="doughnutChartLegend"
                [colors]="doughnutColors"
                [chartType]="doughnutChartType"
                (chartHover)="chartHovered($event)"
                (chartClick)="chartClicked($event)"></base-chart>

Hope it is more clear ;-)

sahlouls on 21 Jul 2016

👍1

thank you for your help @sahlouls but the problem persist :

in my index.html :

.....
< script src="../node_modules/chart.js/dist/Chart.bundle.min.js" >< /script >
< script src="../node_modules/chart.js/dist/Chart.js" >< /script >
< /head >
< body >
< demo >
Loading...
< /demo >
< /body >

in my ChartComponent.ts :

import {Component} from "@angular/core";
import {CHART_DIRECTIVES} from 'ng2-charts';
import {FORM_DIRECTIVES} from "@angular/forms";
import {CORE_DIRECTIVES, NgClass} from "@angular/common";
import {ROUTER_DIRECTIVES} from "@angular/router";

let template = require('./ChartComponent.html');

@Component({
selector: 'line-chart-demo',
template: template,
directives: [CHART_DIRECTIVES, NgClass, CORE_DIRECTIVES, FORM_DIRECTIVES,ROUTER_DIRECTIVES]
})
export class ChartComponent{
// Doughnut
public doughnutChartType:string = 'doughnut'
public doughnutChartLegend:boolean = false
public doughnutColors:any[] = [{ backgroundColor: ['#1ABB9C', '#E74C3C', '#9CC2CB'] }]
// Some data - depending on your case
public doughnutChartLabels:string[] = ['Passed', 'Failed', 'Not Assessed']
public doughnutChartData:number[] = [4, 5, 15]
// events
public chartClicked(e:any):void {
console.log(e);
}
public chartHovered(e:any):void {
console.log(e);
}

and in the ChartComponent.html :

[data]="doughnutChartData"
[labels]="doughnutChartLabels"
[legend]="doughnutChartLegend"
[colors]="doughnutColors"
[chartType]="doughnutChartType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)">

i have installed the ng2-chart and the chart.js (thet are located in the nodes_modules )

alaa-bourouissi on 22 Jul 2016

the problem is solved from the #222 issue , i just added (display: block; width: 100%) to the chart div

thank you very much @sahlouls for your help :D :D

alaa-bourouissi on 22 Jul 2016

🎉2

@alaa-bourouissi thanks you have shared the right place

amarewgs on 22 Jul 2016

I managed to get it work, but only in dev mode. Does it work for you guys with 'ng serve -prod'?

mollywoodnini on 9 Aug 2016

Hi guys I am facing integration issue in angular CLI so can anyone guide me the clear steps which is currently working , it will be great help.......

devrockzz on 18 Aug 2016

Hi, I'm trying to install ng2-charts under angular2 rc4 with npm install ng2-charts --save
The problem I'm facing is that ng2-charts adds angular2 alpha.46 as a dependency. As a consequence, npm shows duplication errors.
Also CHART_DIRECTIVES are not found when adding: import { CHART_DIRECTIVES } from 'ng2-charts'.
I can't figure out what's wrong or what's missing ?
Thanks for help.

zeinebM on 18 Aug 2016

👍1

I was stuck in the ng2-charts because I have RC-4. @sahlouls Thanks, buddy you helped me a lot.

rajjerry on 20 Feb 2018

Closing for inactivity. This package is now updated for Angular 7. If this issue persists please provide a stackblitz/codepen/... example which reproduces it.