create gauge chart using chart.js and angular in an ionic app

64 Views Asked by At

I am using ionic with angular and trying to add a gauge chart in my app. I already have standard other charts such as bar chart etc.

I came across this https://github.com/haiiaaa/chartjs-gauge and installed chartjs-gauge

However, I am stil not able to understand how to use it. Trying below

import { Chart } from 'chartjs-gauge.js';

ChartMethod() {
   let chartStatus = Chart.getChart("canvas"); // <canvas> id
    if (chartStatus != undefined) {
      chartStatus.destroy();
    }
    this.finChart = new Chart(this.canvas.nativeElement, {
      type: 'gauge',
      data: {
        datasets: [{
          value: 0.5,
          minValue: 0,
          data: [1, 2, 3, 4],
          backgroundColor: ['green', 'yellow', 'orange', 'red'],
        }]
      },
      options: {
        needle: {
          radiusPercentage: 2,
          widthPercentage: 3.2,
          lengthPercentage: 80,
          color: 'rgba(0, 0, 0, 1)'
        },
        valueLabel: {
          display: true,
          formatter: (value:any) => {
            return '$' + Math.round(value);
          },
          color: 'rgba(255, 255, 255, 1)',
          backgroundColor: 'rgba(0, 0, 0, 1)',
          borderRadius: 5,
          padding: {
            top: 10,
            bottom: 10
          }
        }
      }
    });
  }

This however, give me error that it cannot find module chartjs-gauge.js

0

There are 0 best solutions below