ChartJs is not working in angular 4 with no errors

Question

I am being new to chart js ,trying to implement in angular 4 application. even though no errors in the code chart is not appearing in browser. I referred a lot of documentation and online material to implement chart.i have spent almost 3 days to figure out the cause.Please help me to rectify the same thank you

Here is my code 
dependencies:

"chart.js": "^2.7.3"

in angular cli.json

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

in Component

import {Chart} from 'chart.js';

ngOnInit() {
    const el = <HTMLCanvasElement> document.getElementById('myChart');
    const ctx = el.getContext('2d');

    console.log(el);
    console.log(ctx);

    var myChart = new Chart(ctx, {
      type: 'bar',
      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: [{
                  ticks: {
                      beginAtZero:true
                  }
              }]
          }
      }
  });

}

in html

 <canvas id="myChart" width="400" height="400"></canvas>

I am getting no error in broswer and i am able to print both native element and context and Chart object as well .Not sure why chart is not appearing in browser. Please help

nativeEliment on console giving-
<canvas _ngcontent-c1="" height="0" id="myChart" width="0" class="chartjs-render-monitor" style="display: block; height: 0px; width: 0px;"></canvas>

context on console:
CanvasRenderingContext2D {canvas: canvas#myChart, globalAlpha: 1, globalCompositeOperation: "source-over", filter: "none", imageSmoothingEnabled: true, …}

chart object on console.log-Chart {id: 0, ctx: CanvasRenderingContext2D, canvas: canvas#myChart.chartjs-render-monitor, config: {…}, width: 0, …}

i don't know angular, but some few doubts. 1) is ngOnInit is the right method where it should call 2) the id and variable name are similar . Also please refer this article if you can find anything from this one coursetro.com/posts/code/126/… — Beginner
– Beginner, Commented Jan 6, 2019 at 4:32
You can use: primefaces.org/primeng/#/chart or check there sources on github — Marcel Hoekstra
– Marcel Hoekstra, Commented Jan 6, 2019 at 9:12
Thank you for replying ...@DILEEP THOMAS and @ Marcel Hoekstra .I found a way to implement .i tried with ng2-charts/angular2-chartjs libraries and it worked for me with both of the libraries.As you suggested Primeng is also working for me . — tech_asprnt
– tech_asprnt, Commented Jan 7, 2019 at 1:49

matt · Accepted Answer · 2019-07-19 08:07:54Z

3

I got that the thread is somewhat outdated, however to spare other the nervs i've spend on the matter, i'll provide this:

The canvas (- now -) has to be nested within a display:block-styled Element

Since i use angular (CLI) 8.0.3 and Chart.js v2.8.0, this might not solve your problem either.

Nevertheless i also ran into serveral other problems you might consider at this point: almost every other snippet i've found so far is kinda obsolete. Check your @ViewChild Annotation as well as your Rx-imports, if they'r up to date (even if you won't got any compile errors)

answered Jul 19, 2019 at 8:07

matt

1151 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Maciej Wojcik Over a year ago

you saved my day! almost 4 hours finding what's wrong in the configuration... Thanks a lot!

Panos Over a year ago

code please for our convenience

Collectives™ on Stack Overflow

ChartJs is not working in angular 4 with no errors

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related