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