Ng2-charts: Access Chart object in 1.4.0?

[anthony-pinskey]

Prior to upgrading to 1.4.0, I was able to get the Chart.js object by assigning it to a local variable like so:

                    <base-chart #Chart class="chart"
                        [datasets]="lineChartData"
                        [labels]="lineChartLabels"
                        [options]="lineChartOptions"
                        [colors]="lineChartColors"
                        [legend]="lineChartLegend"
                        [chartType]="lineChartType"
                        (chartHover)="chartHovered($event)"
                        (chartClick)="chartClicked($event)">
                    </base-chart>

Then in my component class, get the object like so:

    import { Component, ViewChild } from '@angular/core';
    import { Http, Headers, RequestOptions, Response } from '@angular/http';
    require('chart.js');

    @Component({
        selector: 'chart-cmp',
        templateUrl: './chart.template.html'
    })

    export class ChartComponent {
        /* Store Chart Instance */
        @ViewChild('Chart') Chart
    }

However, in ng2-charts 1.4.0 after breaking changes to the component

                    <canvas baseChart #Chart class="chart"
                        [datasets]="lineChartData"
                        [labels]="lineChartLabels"
                        [options]="lineChartOptions"
                        [colors]="lineChartColors"
                        [legend]="lineChartLegend"
                        [chartType]="lineChartType"
                        (chartHover)="chartHovered($event)"
                        (chartClick)="chartClicked($event)">
                    </canvas>

When I check the value of #Chart it only returns a nativeElement now.

How do we access the Chart.js object with all of the methods/properties?

[valorkin]

there are a chart property, but it is private
you can change it to public if you need it (I mean PR)

[anthony-pinskey]

Great, thanks! I will issue a PR later today.

[anthony-pinskey]

@valorkin After changing the chart property to public, how exactly do you select it in my component class so that I have access to it's methods and properties though?

[valorkin]

Via child component selector

[anthony-pinskey]

@valorkin So would it be like:

    import { Component, ViewChild } from '@angular/core';
    import { Http, Headers, RequestOptions, Response } from '@angular/http';
    require('chart.js');

    @Component({
        selector: 'chart-cmp',
        templateUrl: './chart.template.html'
    })

    export class ChartComponent {
        /* Store Chart Instance */
        @ViewChild('baseChart') Chart
    }

Then in my template:

<canvas baseChart class="chart"
    [datasets]="lineChartData"
    [labels]="lineChartLabels"
    [options]="lineChartOptions"
    [colors]="lineChartColors"
    [legend]="lineChartLegend"
    [chartType]="lineChartType"
    (chartHover)="chartHovered($event)"
    (chartClick)="chartClicked($event)">
</canvas>

[valorkin]

Yep

[valorkin]

Check modals sample in ng2 bootstrap, it does same thing

[anthony-pinskey]

@valorkin Hmm, okay. I keep getting undefined in the return value from the view child property I set above. But that looks like it's because I was selecting the directive baseChart instead of assigning a local variable to the component like how you are doing on ng2-bootstrap modals.

However, in the example on ng2-bootstrap it has:

<div bsModal #childModal="bs-modal">
  ....
</div>

This is setting the value of the local variable #childModal to the component via the selector correct? Which gets imported in the modal-demo component:

import { ModalDirective } from '../../../components/modal/modal.component';

But there isn't a component provided in ng2-charts to do something similar, so I guess that's why I am getting a bit confused, unless I should be referencing the exported class BaseChartDirective from charts.d.ts?

[valorkin]

Exactly, we need to add export-as!

[anthony-pinskey]

@valorkin I got this working locally now, I will push a PR today, thanks!

[anthony-pinskey]

Marking this as closed now with my PR fix now merged in #472

Thanks!

[valorkin]

Thanks for PR! Dm me if something urgent!

[anthony-pinskey]

@valorkin Will do, thanks again!

[Viktor-Bredihin]

@anthony-pinskey
can you post the final code to access chart object?

[XidongHuang]

@Viktor-Bredihin I have the same question, just wanna know how can we get the value from a specific bar/line. Now I have to do with the native js like:
public chartClicked(e:any): void{ console.log(e.active[0]._chart........); }

[anthony-pinskey]

@Viktor-Bredihin Yes I can post this for you today here. Sorry for the late response!

[ByteDefault]

Hi @valorkin

Can you please publish this to npm? Version 1.4.1 doesn't have this fix yet.

I can confirm that it works tho because I've changed the generated code adding exportAs: 'base-chart':

BaseChartDirective.decorators = [
    { type: core_1.Directive, args: [{ selector: 'canvas[baseChart]', exportAs: 'base-chart' },] },
];

[valorkin]

Sure, I will do today

[valorkin]

v1.4.4 version published, please check and approve it helped
with @valorkin mention so I will get email :D
thanks

[ByteDefault]

It's working now @valorkin thank you!!

[priyaponni]

how do I access the chart object? I am unable to do it with the #chartObj way. Please post the code to access chart object.

[wrobe0709]

@priyaponni here is how I did it. I was new to TypeScript and ng2-charts when doing this and the item that solved it for me was accessing the chart in the class tied to the component template. Below is an example.

my.component.html

<canvas #testChart='base-chart' baseChart
    [datasets]="chartData"
    [labels]="chartLabels"
    [options]="chartOptions"
    [colors]="chartColors"
    [chartType]="chartType">
</canvas>

my.component.ts

@Component({
    selector: 'my',
    providers: [],
    styleUrls: [],
    templateUrl: './my.component.html'
})
export class EffectiveThroughputComponent {
    @ViewChild('testChart') testChart: BaseChartDirective;

    constructor() {
    }

    public doSomething():void{
        console.log(this.testChart);
    }
}