Ng2-charts: Can't get anything to display in browser.

[katsuragi545]

I haven't been able to get anything to display in my browser. I'm currently using a slightly modified version of the quickstart source project provided by the official Angular 2 site - it simply prints "My First Angular App' to the browser. I've added the HTML and Typescript code to the project and nothing displays. I've added a Google Drive link to a zip file containing the entire project I'm using - if anyone can point me in the right direction that would be great - I've been at this for hours and making absolutely no progress. I have updated my Angular 2 version to rc1.

Google Drive link to project: https://drive.google.com/open?id=0B67vjAYn5WnTajdMZnBJZU9tMTg

[maxtuzz]

Try add this css in the component that you are using your chart directive in.
.chart {display: block; width: 100%;}

I've tried to embed this to the style of canvas selector directly as done in the ng2 charts directive. But it doesn't have an effect and the chart will never actually render correctly until that css is embedded in the component that displays the chart itself.

[valorkin]

@katsuragi545 please provide link to plunkr or github repo

[katsuragi545]

Here's a plunkr link: https://plnkr.co/edit/QSIoEo

[katsuragi545]

Here's github repo as well minus the node_modules folder: https://github.com/katsuragi545/angular2-quickstart

[katsuragi545]

These are the errors I have right now:

Error: SyntaxError: Unexpected token <(…) angular2-polyfills.js:1243
Zone.run @ angular2-polyfills.js:1243
zoneBoundFn @ angular2-polyfills.js:1220
lib$es6$promise$$internal$$tryCatch @ angular2-polyfills.js:468
lib$es6$promise$$internal$$invokeCallback @ angular2-polyfills.js:480
lib$es6$promise$$internal$$publish @ angular2-polyfills.js:451
lib$es6$promise$$internal$$publishRejection @ angular2-polyfills.js:401
(anonymous function) @ angular2-polyfills.js:123
Zone.run @ angular2-polyfills.js:1243
zoneBoundFn @ angular2-polyfills.js:1220
lib$es6$promise$asap$$flush @ angular2-polyfills.js:262

[shawnrmoss]

Im not able to get the charts to display either.

https://github.com/shawnrmoss/ng2-charts-starter
I get a warning from webpack server
./~/chart.js/dist/Chart.bundle.min.js
Critical dependencies:
10:113-120 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results.
@ ./~/chart.js/dist/Chart.bundle.min.js 10:113-120

[snarum]

@katsuragi545 I had a quick look at your source, and while I dont know what is causing your problems, I would suggest a few things that at least would clean up a bit:

1) move reference to chart.js to index.html, and remove all source tags from main.html. You should only have one reference to chart.js
2) remove the "canvas" tag from main.html. base-chart creates it's own canvas.
3) rename main.html to app.component.html or something. this is the app component's view, and has nothing to do with main.ts

[stefan0001]

//update
well .chart {display: block; width: 100%;} worked now.
dont know why it didnt yesterday.

[Mihai-B]

Adding .chart {display: block; width: 100%;} as @maxtuzz sugested worked for me

[katsuragi545]

Okay, I've eliminated a fair amount of issues. Can someone explain how to embed the Chart.js lib properly? Right now the error I get is:

ORIGINAL EXCEPTION: Error: ng2-charts configuration issue: Embedding Chart.js lib is mandatory

I'm using webpack - do I need to do something in my webpack.config.js file?
Here's my html file:

<script src="node_modules/chart.js/dist/Chart.bundle.min.js"></script>

<h1>Chart Test...</h1>

<style>
    .chart {
        display: block;
        width: 100%;
    }
</style>

<div class="row">
    <div class="col-md-6">
        <base-chart class="chart" 
                    [datasets]="lineChartData"
                    [labels]="lineChartLabels"
                    [options]="lineChartOptions"
                    [colors]="lineChartColours"
                    [legend]="lineChartLegend"
                    [chartType]="lineChartType"
                    (chartHover)="chartHovered($event)"
                    (chartClick)="chartClicked($event)"></base-chart>
    </div>
    <div class="col-md-6" style="margin-bottom: 10px;">
        <table class="table table-responsive table-condensed">
            <tr>
                <th *ngFor="let label of lineChartLabels"></th>
            </tr>
            <tr *ngFor="let d of lineChartData">
                <td *ngFor="let label of lineChartLabels; let j=index"></td>
            </tr>
        </table>
        <button (click)="randomize()">CLICK</button>
    </div>
</div>

[katsuragi545]

Okay, seems like I was adding the Chart.js library in the wrong file. I've now added

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>

to my index file (I have an Index.cshtml file) and no longer get any errors. However, the chart still isn't visible - there are some horizontal lines showing up however. I can clearly see the canvas being created in my Chrome Developer Tools window. Here's a screenshot:

[alfakappa]

Did you add the css as proposed by @maxtuzz

Something Else may be broken in your CSS as well, as I cannot see your H1 as well?

[rjustindoe]

Got it working...seems like some of the sample code from http://valor-software.com/ng2-charts/ doesn't match up with the development branch on github. I think that page needs to be updated. Also, I had to remove some parts from my base chart html:

<base-chart class="chart" [datasets]="lineChartData" [labels]="lineChartLabels" [colors]="lineChartColours" [legend]="lineChartLegend" [chartType]="lineChartType"></base-chart>

[davidwdan]

@katsuragi545 try to include the following charts.js cdn with css fix mentioned above:

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

[granak]

Hey guys, here is my solution:
<div class="col-md-6" style="padding: 0;"> <base-chart class="chart" ...></base-chart> </div>
Just add style="padding: 0;" to parent element. It looks it's somehow related to: https://github.com/chartjs/Chart.js/issues/507
At least this works for me.

[valorkin]

hah, thanks @marcel141 it is really an issue with chart.js https://github.com/chartjs/Chart.js/pull/851

[omargon]

Hey guys, after adding the mentioned padding to the parent and the width and display properties to the chart class, I'm getting this error and no graph:

browser_adapter.ts:78 EXCEPTION: TypeError: i is not a functionBrowserDomAdapter.logError @ browser_adapter.ts:78BrowserDomAdapter.logGroup @ browser_adapter.ts:89ExceptionHandler.call @ exception_handler.ts:53(anonymous function) @ application_ref.ts:304schedulerFn @ async.ts:131SafeSubscriber.__tryOrUnsub @ Rx.js?1466003237174:10855SafeSubscriber.next @ Rx.js?1466003237174:10810Subscriber._next @ Rx.js?1466003237174:10766Subscriber.next @ Rx.js?1466003237174:10743Subject._finalNext @ Rx.js?1466003237174:11425Subject._next @ Rx.js?1466003237174:11417Subject.next @ Rx.js?1466003237174:11376EventEmitter.emit @ async.ts:117onError @ ng_zone.ts:138onHandleError @ ng_zone_impl.ts:90ZoneDelegate.handleError @ zone.js?1466003237174:327Zone.runTask @ zone.js?1466003237174:259ZoneTask.invoke @ zone.js?1466003237174:423
browser_adapter.ts:78 STACKTRACE:BrowserDomAdapter.logError @ browser_adapter.ts:78ExceptionHandler.call @ exception_handler.ts:56(anonymous function) @ application_ref.ts:304schedulerFn @ async.ts:131SafeSubscriber.__tryOrUnsub @ Rx.js?1466003237174:10855SafeSubscriber.next @ Rx.js?1466003237174:10810Subscriber._next @ Rx.js?1466003237174:10766Subscriber.next @ Rx.js?1466003237174:10743Subject._finalNext @ Rx.js?1466003237174:11425Subject._next @ Rx.js?1466003237174:11417Subject.next @ Rx.js?1466003237174:11376EventEmitter.emit @ async.ts:117onError @ ng_zone.ts:138onHandleError @ ng_zone_impl.ts:90ZoneDelegate.handleError @ zone.js?1466003237174:327Zone.runTask @ zone.js?1466003237174:259ZoneTask.invoke @ zone.js?1466003237174:423
browser_adapter.ts:78 TypeError: i is not a function
    at o.render (Chart.bundle.min.js?1466003237176:13)
    at Object.startDigest (Chart.bundle.min.js?1466003237176:13)
    at Chart.bundle.min.js?1466003237176:13
    at ZoneDelegate.invokeTask (zone.js?1466003237174:356)
    at Object.onInvokeTask (ng_zone_impl.ts:56)
    at ZoneDelegate.invokeTask (zone.js?1466003237174:355)
    at Zone.runTask (zone.js?1466003237174:256)
    at ZoneTask.invoke (zone.js?1466003237174:423)BrowserDomAdapter.logError @ browser_adapter.ts:78ExceptionHandler.call @ exception_handler.ts:57(anonymous function) @ application_ref.ts:304schedulerFn @ async.ts:131SafeSubscriber.__tryOrUnsub @ Rx.js?1466003237174:10855SafeSubscriber.next @ Rx.js?1466003237174:10810Subscriber._next @ Rx.js?1466003237174:10766Subscriber.next @ Rx.js?1466003237174:10743Subject._finalNext @ Rx.js?1466003237174:11425Subject._next @ Rx.js?1466003237174:11417Subject.next @ Rx.js?1466003237174:11376EventEmitter.emit @ async.ts:117onError @ ng_zone.ts:138onHandleError @ ng_zone_impl.ts:90ZoneDelegate.handleError @ zone.js?1466003237174:327Zone.runTask @ zone.js?1466003237174:259ZoneTask.invoke @ zone.js?1466003237174:423
Rx.js?1466003237174:10858 Uncaught TypeError: i is not a functiono.render @ Chart.bundle.min.js?1466003237176:13startDigest @ Chart.bundle.min.js?1466003237176:13(anonymous function) @ Chart.bundle.min.js?1466003237176:13ZoneDelegate.invokeTask @ zone.js?1466003237174:356onInvokeTask @ ng_zone_impl.ts:56ZoneDelegate.invokeTask @ zone.js?1466003237174:355Zone.runTask @ zone.js?1466003237174:256ZoneTask.invoke @ zone.js?1466003237174:423

Any ideas?

[Perezmarc]

same here

[alfakappa]

@omargon looks like you didn't load the newest chart.min.js correctly. Could you try to load the latest version from sdn and see if it solves the problem?

@Perezmarc bit short of information ;-) getting the same error, does nothing shows up, what is your code... etc.

[omargon]

@alfakappa All good on my end. Thanks!

[jahagirdar]

Facing the same problem, Starting with the default quick start application I have copy pasted the linechart code in the app.component.ts and html.
I have applied all the fixes listed in this thread, set width to 100%, display to block, used the .js file from cdn instead of local copy, added padding to the parent element. but no success.

Checking in Chrome debugger I see the following generated html code

The computed box model for this element shows width:100%; height:0 I tried setting the height to a fixed value but it did not help

It seems this is a recurring problem for everyone, can someone post a modified working quickstart file on github so that we can see and learn on what we are doing wrong.

[skamlet]

@katsuragi545 try to include the following charts.js cdn with css fix mentioned above:

@davidwdan This did the trick for me!

[paviad]

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