Is there a way to use it with ng2-charts?

[bastifix]

I'd love to use it with ng2-charts, but unfortunately was not able to get it working.

[Kattoor]

At the top of your .ts file, add this import: import '@node_modules/chartjs-gauge';

Use [datasets] instead of [data] on your canvas object:

<canvas baseChart
    [datasets]='gaugeChartData'
    [labels]='gaugeChartLabels'
    [chartType]='gaugeChartType'
    [options]='gaugeChartOptions'
    [colors]='gaugeChartColors'>
</canvas>

Example settings in your .ts:

gaugeChartOptions = {
    responsive: true,
    maintainAspectRatio: false,
    legend: { display: false },
    tooltips: { enabled: false },
    needle: {
        radiusPercentage: 2,
        widthPercentage: 3.2,
        lengthPercentage: 80,
        color: 'rgba(0, 0, 0, 1)'
    },
    valueLabel: {
        display: true,
        formatter: value => Math.round(value),
        color: 'rgba(255, 255, 255, 1)',
        backgroundColor: 'rgba(0, 0, 0, 1)'
    },
    cutoutPercentage: 70
};
gaugeChartLabels: Label[] = ['Green', 'Orange', 'Red'];
gaugeChartData = [{
    value: 50,
    data: [50, 80, 100]
}];
gaugeChartColors = [{ backgroundColor: ['#28a745', '#ffc107', '#dc3545'] }];
gaugeChartType = 'gauge';

[fedecarpi]

@Kattoor Thanks for your previous comment! I was trying to make that work in my current project, everything is compiling fine, but I've got this error on the console:

ERROR Error: "gauge" is not a chart type.

Looks like the import of import '@node_modules/chartjs-gauge'; is not working.

Any clue ? any other required change on the setup ?

Thanks!

[ganholete]

@Kattoor Thanks for your previous comment! I was trying to make that work in my current project, everything is compiling fine, but I've got this error on the console:

ERROR Error: "gauge" is not a chart type.

Looks like the import of import '@node_modules/chartjs-gauge'; is not working.

Any clue ? any other required change on the setup ?

Thanks!

Change to import 'chartjs-gauge/dist/chartjs-gauge.js';

[victor-vanni]

Hi, I tried this now, and it didn't work for me.

To avoid any confusion with my own code I tried using the example you showed @Kattoor, but with no success.

My ng --version:

Angular CLI: 13.3.8
Node: 12.22.1
Package Manager: npm 6.14.12
OS: win32 x64

Angular: 13.3.11
... animations, common, compiler, compiler-cli, core, forms
... localize, platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1303.8
@angular-devkit/build-angular   13.3.8
@angular-devkit/core            13.3.8
@angular-devkit/schematics      13.3.8
@angular/cli                    13.3.8
@schematics/angular             13.3.8
rxjs                            7.5.5
typescript                      4.6.4

Issue:

Type 'string' is not assignable to type 'ChartType'.ngtsc(2322)
barometer-chart.component.ts(8, 3): Error occurs in the template of component BarometerChartComponent.

barometer-chart.component.ts

import { Component, Input, OnInit, OnChanges } from '@angular/core';
import { Product } from 'src/app/model';
import "@node_module/chartjs-gauge"

@Component({
  selector: 'app-barometer-chart',
  templateUrl: './barometer-chart.component.html',
  styleUrls: ['./barometer-chart.component.css']
})
export class BarometerChartComponent implements OnInit, OnChanges {
  @Input() product: Product = <Product>{}

  gaugeChartOptions = {
    responsive: true,
    maintainAspectRatio: false,
    legend: { display: false },
    tooltips: { enabled: false },
    needle: {
        radiusPercentage: 2,
        widthPercentage: 3.2,
        lengthPercentage: 80,
        color: 'rgba(0, 0, 0, 1)'
    },
    valueLabel: {
        display: true,
        formatter: (value: number) => Math.round(value),
        color: 'rgba(255, 255, 255, 1)',
        backgroundColor: 'rgba(0, 0, 0, 1)'
    },
    cutoutPercentage: 70
  };
  gaugeChartLabels = ['Green', 'Orange', 'Red'];
  gaugeChartData = [{
    value: 50,
    data: [50, 80, 100]
  }];
  gaugeChartColors = [{ backgroundColor: ['#28a745', '#ffc107', '#dc3545'] }];
  gaugeChartType = 'gauge';

  constructor() { }

  ngOnInit(): void {
  }

  ngOnChanges() {
  }

barometer-chart.component.html:

    <canvas baseChart
        [datasets]='gaugeChartData'
        [labels]='gaugeChartLabels'
        [chartType]='gaugeChartType'
        [options]='gaugeChartOptions'
        [colors]='gaugeChartColors'>
    </canvas>

Am I missing something?