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!

All versions