graph-element.component.ts

import { Component, ViewChild, ElementRef, AfterViewInit, Input} from '@angular/core';

import { chart } from 'highcharts';
import { Highcharts } from 'angular-highcharts';

@Component({ 
    selector: 'graph-element',
    templateUrl: './graph-element.component.html',
    styleUrls: [ './graph-element.component.scss']
})
export class GraphElementComponent implements AfterViewInit {
    chart: Highcharts.ChartObject;
    @ViewChild('graphTarget') graphTarget: ElementRef;
    @Input() options: Highcharts.Options;

    constructor() {
        Highcharts.setOptions({
            lang: {
                months: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
                weekdays: ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado'],
                shortMonths: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez']
            }
        })
    }
    ngAfterViewInit() {
		this.chart = chart(this.graphTarget.nativeElement, this.options);
    }

    public reset(graphOptions: Highcharts.Options) {
        this.options = graphOptions;
        this.chart.destroy();
        this.chart = chart(this.graphTarget.nativeElement, this.options);
    }
}