Ng2-charts app not showing charts

Question

I followed the instructions on the ng2-charts demo page to get set up. I'm using angular-cli so I also imported the packages using System.JS. Then I copied the demo code, but it won't display. The canvas is being created but no chart is being drawn. My component and template code are exactly the same as here.

http://stackoverflow.com/questions/37849490/ng2-chart-doesnt-display-as-expected-even-more-the-console-doesnt-show-any-err?rq=1 — yurzui, Jun 28 '16 at 19:33
do you have a solution I have added ng2 charts : Can't bind to 'datasets' since it isn't a known property of 'base-chart'. — EL missaoui habib, Oct 13 '16 at 22:33

Alex Shnyrov · Answer 1 · 2019-06-21T00:49:59.873

11

Use <div style="display: block"> around canvas tag

Your final html code should look similar to this

<div style="display: block">
  <canvas
    baseChart
    [chartType]="'line'"
    [datasets]="chartData"
    [labels]="chartLabels"
    [options]="chartOptions"
    [legend]="true"
    (chartClick)="onChartClick($event)">
  </canvas>
</div>

edited Jun 21 '19 at 00:49

answered Mar 04 '19 at 15:47

Alex Shnyrov

548
5
12

2

Worked. I has almost pulled my hairs on this. – Gaurish Gangwar Apr 09 '20 at 16:54

score 6 · Answer 2 · answered Mar 25 '19 at 12:50

6

responsive: true sometimes the problem. When changed to false the will canvas appear.

answered Mar 25 '19 at 12:50

Cengkuru Michael

4,590
1
33
33

you saved me some time man, never thought this would cause my issue. Thanks a lot! Do you know if theirs another way to fix this, while keeping responsive true? – Rob Angelier Feb 06 '20 at 14:32

score 1 · Answer 3 · answered Feb 08 '23 at 10:38

1

In case, you're fetching data from API, try this

@ViewChild(BaseChartDirective) chart?: BaseChartDirective;

getChartData(){
  // do something
  this.chart?.chart?.update()
}

answered Feb 08 '23 at 10:38

Saiprasad sharma

11
3

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Feb 10 '23 at 13:46

score 0 · Answer 4 · answered Oct 05 '22 at 16:15

0

Adding for future seekers

In my case, it was the chart type. I was using horizontalbar. It worked when i changed it to bar or horizontalBar.

answered Oct 05 '22 at 16:15

Alexander Santos

1,458
11
22

Ng2-charts app not showing charts

4 Answers4