Ionic 2 + Chartjs2 small chart

Hi, I am trying to use Chartjs v2 with ionic2 and chart is showing but it’s small tryed adding

#myChart {
  display: block;
  width: 100%;
  margin-top: 30px;
}

and

ctx.canvas.width = 300;
ctx.canvas.height = 300;

but i didn’t help
here is my code
about.ts

import {Component} from ‘@angular/core’;
import {NavController} from ‘ionic-angular’;
import * as ChartJs from ‘chart.js’;

@Component({
templateUrl: ‘build/pages/about/about.html’
})
export class AboutPage {
constructor(private navController:NavController) {

}

ngAfterViewInit() {
let canvas: any = document.getElementById(“myChart”);
let ctx = canvas.getContext(“2d”);
ctx.canvas.width = 300;
ctx.canvas.height = 300;
var plot = new ChartJs(ctx, {
type: ‘line’,
data: {
labels: [“Red”, “Blue”, “Yellow”, “Green”, “Purple”, “Orange”],
datasets: [{
label: ‘# of Votes’,
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
‘rgba(255, 99, 132, 0.2)’,
‘rgba(54, 162, 235, 0.2)’,
‘rgba(255, 206, 86, 0.2)’,
‘rgba(75, 192, 192, 0.2)’,
‘rgba(153, 102, 255, 0.2)’,
‘rgba(255, 159, 64, 0.2)’
],
borderColor: [
‘rgba(255,99,132,1)’,
‘rgba(54, 162, 235, 1)’,
‘rgba(255, 206, 86, 1)’,
‘rgba(75, 192, 192, 1)’,
‘rgba(153, 102, 255, 1)’,
‘rgba(255, 159, 64, 1)’
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
stacked: true
}]
}
}
});

}
}

and about.html

<ion-navbar *navbar>
  <ion-title>
    About
  </ion-title>
</ion-navbar>
<ion-content padding class="about">
  <canvas  id="myChart" width="400" height="400"></canvas> 
</ion-content>

any ideas??

One thing you could try is turning responsive off.

1 Like

that did the trick! thank you !!

Can you send the source?

If you are looking for a way to implement chartjs in ionic2 here is the instruction that i followed
btw i don’t speak japanese either just follow the steps

here is the working code based on the example above

  private ngAfterViewInit() {
    
      let canvas: any = document.getElementById("myChart");
      let ctx = canvas.getContext("2d");
      ctx.canvas.width = 350;
      ctx.canvas.height = 300;

      var plot = new ChartJs(ctx, {
         type: 'line',
         data: {
             labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
             datasets: [{
                 label: 'Avg Km',
                 data: [4,5,8,4,5,2,4,5,4],
                 backgroundColor: [
                     'rgba(25,229,22,0.2)',
                 ],
                 borderColor: [
                     'rgba(25,229,22,1)',
                 ],
                 borderWidth: 1
             }

           ]
         },
         options: {
     responsive: false,
             scales: {
                 yAxes: [{
                     stacked: true
                 }]
             }
         }
       }); ///chartjs ends here
}
3 Likes

here is what i put in the forum a week or so ago, and its in english :slight_smile:

3 Likes

Thanks! I have it working!

1 Like

Many thanks!!! It works

1 Like