Get started with radialIndicator CDN
MIT licensed
Radial indicator: Chart component showing progress along radius from center.
Tags:- indicator
- radial-indicator
- circular-progressbar
Stable version
Copied!
How to start using radialIndicator CDN
import { Component } from '@angular/core';
import { RadialGaugeComponent } from 'angular2-gauges';
@Component({
selector: 'app-radial-indicator',
template: `
<div class="gauge-container">
<radial-gauge [options]="options" [events]="events" [colors]="colors"></radial-gauge>
</div>
`,
})
export class RadialIndicatorComponent {
options: any = {
width: 300,
height: 300,
startAngle: 90,
endAngle: 270,
minValue: 0,
maxValue: 100,
majorTicks: 5,
minorTicks: 10,
label: {
show: false,
},
title: {
text: 'Radial Indicator',
show: true,
fontSize: 18,
fontWeight: 'bold',
fontFamily: 'Arial',
color: '#333',
},
};
events: any = {
onValueChange: (value: number) => console.log('Value changed:', value),
};
colors: any = {
'0': '#F44336',
'50': '#E91E63',
'100': '#9C27B0',
};
}
Copied!
Copied!