# Ionic 2 + ng-charts / chartjs

**URL:** <https://forum.ionicframework.com/t/ionic-2-ng-charts-chartjs/53544>\
**Category:** ionic-v3\
**Created:** [May 31, 2016, 6:35pm UTC](https://forum.ionicframework.com/t/ionic-2-ng-charts-chartjs/53544 "2016-05-31T18:35:27Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![apaliku](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/apaliku/32/100829_2.png) [@apaliku](https://forum.ionicframework.com/u/apaliku)\
**Post date:** [May 31, 2016, 6:35pm UTC](https://forum.ionicframework.com/t/ionic-2-ng-charts-chartjs/53544/1 "2016-05-31T18:35:27Z")

</div>

Related to: [[SOLVED] Ionic 2 + NG2-Charts](https://forum.ionicframework.com/t/solved-ionic-2-ng2-charts/42926)

I have been trying for 24 hrs to set this up with no luck.

I get no errors in my console or terminal. Just a blank canvas.  
I tried:

1. [https://github.com/ihadeed/charttest](https://github.com/ihadeed/charttest)
2. [https://github.com/ihadeed/ionic2-ng2charts](https://github.com/ihadeed/ionic2-ng2charts) (from @ihadeed)
3. [https://github.com/valor-software/ng2-charts](https://github.com/valor-software/ng2-charts) (the demo sample code)

My package.json below

```
{
  "dependencies": {
    "@angular/common": "^2.0.0-rc.1",
    "@angular/compiler": "^2.0.0-rc.1",
    "@angular/core": "^2.0.0-rc.1",
    "@angular/http": "^2.0.0-rc.1",
    "@angular/platform-browser": "^2.0.0-rc.1",
    "@angular/platform-browser-dynamic": "^2.0.0-rc.1",
    "@angular/router": "^2.0.0-rc.1",
    "es6-shim": "^0.35.0",
    "ionic-angular": "2.0.0-beta.7",
    "ionic-native": "^1.1.0",
    "ionicons": "3.0.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12",

    "chart.js": "1.0.2",
    "ng2-charts": "1.1.0"
  },
  "devDependencies": {
    "del": "2.2.0",
    "gulp": "3.9.1",
    "gulp-watch": "4.3.5",
    "ionic-gulp-browserify-typescript": "^1.1.0",
    "ionic-gulp-fonts-copy": "^1.0.0",
    "ionic-gulp-html-copy": "^1.0.0",
    "ionic-gulp-sass-build": "^1.0.0",
    "ionic-gulp-scripts-copy": "^2.0.0",
    "run-sequence": "1.1.5"
  },
  "cordovaPlugins": [
    "cordova-plugin-device",
    "cordova-plugin-console",
    "cordova-plugin-whitelist",
    "cordova-plugin-splashscreen",
    "cordova-plugin-statusbar",
    "ionic-plugin-keyboard"
  ],
  "cordovaPlatforms": [
    "ios",
    {
      "platform": "ios",
      "version": "",
      "locator": "ios"
    }
  ],
  "name": "cutepuppypics",
  "description": "cutePuppyPics: An Ionic project"
    }

```

My index.html importing chart.js

```
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
  <!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.bundle.min.js"></script> -->

```

And my page:  
Typescript file:

```
import {Page, NavController, NavParams} from 'ionic-angular';

import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass} from '@angular/common';

// import {CHART_DIRECTIVES} from './charts';
import {CHART_DIRECTIVES} from "ng2-charts/ng2-charts";

// Local services
import { SettingsService } from '../../model/settings/settings.service.ts';

// Page template
@Page({
    templateUrl: 'build/pages/history/history.html',
    directives: [CHART_DIRECTIVES, NgClass, CORE_DIRECTIVES, FORM_DIRECTIVES]
})

export class HistoryPage {
    public lineChartData: Array<any> = [
        [65, 59, 80, 81, 56, 55, 40],
        [28, 48, 40, 19, 86, 27, 90]
    ];
    public lineChartLabels: Array<any> = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
    public lineChartType: string = 'line';
    public pieChartType: string = 'pie';

    // Pie
    public pieChartLabels: string[] = ['Download Sales', 'In-Store Sales', 'Mail Sales'];
    public pieChartData: number[] = [300, 500, 100];

    public randomizeType(): void {
        this.lineChartType = this.lineChartType === 'line' ? 'bar' : 'line';
        this.pieChartType = this.pieChartType === 'doughnut' ? 'pie' : 'doughnut';
    }

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

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

```

HTML file:

```
<ion-content>
  <div class="col-md-6">
    <base-chart class="chart"
            [datasets]="lineChartData"
            [labels]="lineChartLabels"
            [options]="lineChartOptions"
            [chartType]="lineChartType"></base-chart>
  </div>
  <div class="col-md-6">
    <base-chart class="chart"
            [datasets]="pieChartData"
            [labels]="pieChartLabels"
            [chartType]="pieChartType"
            (chartHover)="chartHovered($event)"
            (chartClick)="chartClicked($event)"></base-chart>
  </div>
  <div class="col-md-12 text-center" style="margin-top: 10px;">
    <button (click)="randomizeType()" style="display: inline-block">Toggle</button>
  </div>
</ion-content>

```

Note: I have tried both Chartjs 1 and 2 (2 has a breaking change with ng2-charts that’s a known issue) with no luck.

Any help is appreciated ;D

---

<div class="post-metadata">

**Author:** ![ihadeed](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ihadeed/32/95258_2.png) [@ihadeed](https://forum.ionicframework.com/u/ihadeed)\
**Post date:** [June 1, 2016, 5:06am UTC](https://forum.ionicframework.com/t/ionic-2-ng-charts-chartjs/53544/2 "2016-06-01T05:06:51Z")

</div>

Just tested out my repos, looks like they don’t work anymore. I tried creating a new app from scratch and it seems like the directives are broken now.

Since Charts.js 2.0 is out, I think we need new set of directives anyways 🙂

---

<div class="post-metadata">

**Author:** ![Dimitrios](https://avatars.discourse-cdn.com/v4/letter/d/b3f665/32.png) [@Dimitrios](https://forum.ionicframework.com/u/Dimitrios)\
**Post date:** [June 14, 2016, 4:48pm UTC](https://forum.ionicframework.com/t/ionic-2-ng-charts-chartjs/53544/3 "2016-06-14T16:48:56Z")

</div>

So there is no way to have ng2-charts with Ionic 2 right now? If not, is there some other plugin to use for charts?  
Thanks.

EDIT:  
I think I managed to make **ng2-charts** work correctly in the meantime!

- I installed ng2-charts and chart.js through npm
- I used the setup described in the [ng2-charts docs](http://valor-software.com/ng2-charts/) for html & typescript
- **I imported chart.js in my app.ts as follows:**

> import ‘…/node\_modules/chart.js/dist/Chart.bundle.min.js’;

(this is what mainly made the difference in the end)

- In the scss of the page that is displaying the chart, I added

> .chart {  
> display: block;  
> height: 100%;  
> }

The charts now show up fine 😄

---

<div class="post-metadata">

**Author:** ![JovanyMezura](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/jovanymezura/32/129415_2.png) [@JovanyMezura](https://forum.ionicframework.com/u/JovanyMezura)\
**Post date:** [April 30, 2020, 5:54pm UTC](https://forum.ionicframework.com/t/ionic-2-ng-charts-chartjs/53544/4 "2020-04-30T17:54:11Z")

</div>

en my case only added class .chart in css and done.

file css or scss :  
.chart {  
display:block;  
}

greetings.

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [July 19, 2021, 9:00pm UTC](https://forum.ionicframework.com/t/ionic-2-ng-charts-chartjs/53544/5 "2021-07-19T21:00:59Z")

</div>

Closed on July 19, 2021, 9:00pm UTC