Ng2-charts: Chart not showing using Angular2 RC1 in CLI project

[thorstenschaefer]

I'm having trouble integrating ng2-charts into a CLI project. After spending hours trying to use charts in a CLI project, I finally got it integrated and it builds/runs without errors, but the graph doesn't show up. I can see that the directive is getting rendered (there's a <canvas> element within the base-chart element), but it's all empty.

I took the following steps:

• Created a new project (named dependencies) using ng new dependencies
• Followed the installation instructions for ng2-charts, i.e., executed npm install ng2-charts --save npm install chart.js --save and added a script reference to the index.html (<script src="vendor/chart.js/dist/Chart.min.js"></script>)
• Adjusted the angular-cli-build.js to copy the npm files into the dist directory:

vendorNpmFiles: [
...
'chart.js/dist/Chart.min.js',
'ng2-charts/*_/_.js'
]

• Adjusted the system.config.js in order to map the name 'ng2-charts' to the respective vendor directory and the package name ng2-charts to it's main file.

const map: any = {
'ng2-charts': 'vendor/ng2-charts'
};
/** User packages configuration. */
const packages: any = {
'ng2-charts': {
main: 'bundles/ng2-charts.min.js'
}
};

• Copied the ts code/html from the line chart example (http://valor-software.com/ng2-charts/)

Anyone knows the issue or has a project using Angular2 CLI with ng2-charts integrated? I uploaded the code to https://github.com/thorstenschaefer/dependencies. All changes from the newly created CLI project can be seen here: https://github.com/thorstenschaefer/dependencies/commit/8169b429d37b72bb9e8718b76d27c258602d1c07

[Warkdev]

Hello thorstenschaefer, I'm facing the exact same issue and I can't figure out why. :(

• Edit * Just tested this in my CSS: .chart {display: block; width: 100%;}

It works.. strangely.

[thorstenschaefer]

@Warkdev Thanks a lot man. Setting the CSS worked for me too. Just the style attribute { display:block } is enough in my case.

After searching a bit more, it looks to me that this is similar to https://github.com/valor-software/ng2-charts/issues/53 which was marked as fixed. Shouldn't the base-chart component have the display style set to blocked by default?

[cnishina]

I was having the same problem getting the chart to appear. I ended up copying the demo styles.css into my test project. Potentially a great place to improve the existing docs.

[gomesNazareth]

Wow .it worked :+1: .. Thanks .. I spent 4 hrs trying to debug this isssue... :(

[thorstenschaefer]

@valorkin Even though the issues are 'solved' I think one should provide the necessary CSS as a default as it's anything close to obvious and most users will fall into the trap and not see any chart. I haven't found a commit related to this, so I'd suggest to give the chart selector a default block style.

[valorkin]

Agreed, I will do

[Priyankashelar10]

.chart {display: block; width: 100%;}
It works for me..I spent 5 hrs to resolve this..thanks...

[dimnls]

For the record, the CSS fix really did work. After an entire day I have ng2-charts working :D Thanks a lot!

[Hongbo-Miao]

I found out that if responsive is false, no need to add the style:

.chart {
  display: block
}

Because when responsive is true. It resizes when the canvas container does.

[jcquinlan]

Still getting this issue, even after adding the CSS fix and setting responsive to false.

[dimnls]

I am using the charts in an Ionic 2 project (based on Angular 2). To make them work I had to insert the following in app.ts:

import '../node_modules/chart.js/dist/Chart.bundle.min.js';

It's supposedly not recommended referencing files this way, but it's what made it work in the end (after many tries).

[bushev]

I use an Ionic 2.

I have tried:

1. .chart {display: block; width: 100%;}
2. .chart {display: block;}
3. import '../node_modules/chart.js/dist/Chart.bundle.min.js';

No success..

[lindsaymarkward]

I had to add the CSS code to get my chart to display too. I see this was to be fixed... is it only in the develop branch? When will it be added to master? Thank you.

[MarkRBM]

@bushev thank-you your import was the only thing that fixed it for me also @valorkin any idea why this might be the case? I have the charts cdn script in the index.html so would have thought that was enough

[devrockzz]

zone.js:101 GET http://localhost:4200/vendor/chart.js/Chart.min.js 404 (Not Found) exactly i have done the way it was explained but still it is showing this error any idea how to solve it

[Katumies]

This is still an issue. After doing the setup as told and copy pasted the first chart ( Line chart ). Setup the imports, systemjs all that. No errors, just a empty table and button to click.

Added: .chart {display: block; width: 100%;} to my styles and its working.

Chart.js: 2.2.2
ng2-charts: 1.1.0"

(Looks great now btw, good job)

[prashanthmadi]

I'm using new webpack build of angular2 and none of the above options worked for me

using below instead of CDN fixed issue.

import 'chart.js/dist/Chart.bundle.min.js';

[bitfidget]

@devrockzz I chased around a similar problem and found this https://github.com/angular/angular-cli/wiki/3rd-party-libs which helped me get all dependencies working in my build (I had to change a lot of the paths in angular-cli-build.js to match my local build but got there in the end).

I still have an issue with chart not showing though. I can see that the chart directive is carrying all data via console:

<base-chart _ngcontent-uko-5="" class="chart" ng-reflect-datasets="[object Object],[object Object],[object Object]" ng-reflect-labels="January,February,March,April,May,June,July" ng-reflect-options="[object Object]" ng-reflect-colors="[object Object],[object Object],[object Object]" ng-reflect-legend="true" ng-reflect-chart-type="line"></base-chart>

and I have added display: block and width: 100% (and height: 500px for good measure) to the .chart class, but all I get is a big square box where I would expect the chart to be.

Looking at the examples at http://valor-software.com/ng2-charts/ I can see that there is a canvas element injected into the base-chart html element, but I'm not seeing this.

[xMarkusSpringerx]

I have the same problem as @bitfidget , any updates on this?

[paviad]

Closing for inactivity - if issue persists, feel free to comment with a working example (codepen/plunkr/...) which demonstrates the issue.