ng2-chartjs2 ignores type and always shows a bar chart

Question

I am using angular2 with ng2-chartjs2. I have the following component and template which I took directly from https://www.npmjs.com/package/ng2-chartjs2. The chart displays fine, but when I change the type in the template from bar to line I still see the same bar chart with no errors.

import { Component } from '@angular/core';
import { Router, RouterLink, CanActivate } from '@angular/router';
import { CORE_DIRECTIVES } from '@angular/common';
import { DashboardLayoutComponent } from '../dashboard_layout/dashboard_layout.component';
import {ChartComponent, Chart} from 'ng2-chartjs2';


@Component({
    selector: 'home',
    templateUrl: 'client/components/home/home.component.html',
    directives: [DashboardLayoutComponent, CORE_DIRECTIVES, ChartComponent]
})

export class HomeComponent {

    constructor(private _router: Router) {
    }

    labels: string[] = ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"];
    data: Chart.Dataset[] = [
        {
            label: '# of Votes',
            data: [12, 19, 3, 5, 25, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }
    ];
}

Template:

 <!-- template -->
 <dashboard-layout pageTitle="Statistical Overview">
     <div class="home">

<chart [labels]="labels" [data]="data" type="line"></chart>

     </div>
</dashboard-layout>

It seems like I am following the documentation correctly. Is this a bug? Is there a workaround if so?

Answer 1

Look at the source code

if(!this.options){
  this.options = {
    type: 'bar', <== this line
    data: {
      labels: this.labels,
      datasets: this.data
    }
  }
}

This way if you don't provide options it always will be as bar chart

You can leverage the following workaround:

import { ChartComponent } from 'ng2-chartjs2';

@Component({
  selector: 'my-app',
  template: `
   <chart [options]="options"></chart>
  `,
   directives: [ChartComponent]
})
export class AppComponent {
  options = {
    type: 'line',
    data: {
          labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
          datasets: [
            {
                label: '# of Votes',
                data: [12, 19, 3, 5, 25, 3],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                    'rgba(255,99,132,1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
            }
        ]
    }
  };
}

Demo Plunker