@angx/ngx-circle-chart

Beautiful, auto-scaling circle (doughnut) progress chart for Angular.

Live demo · npm

Built directly on chart.js.

• Value label scales itself to fit the ring, at any size
• Optional gradient colouring along the progress arc
• Themeable colours, size and font
• Zoneless and SSR safe — no canvas work happens on the server
• Registers only the doughnut controller, not all of chart.js/auto
• Standalone component, no NgModule required

npm i @angx/ngx-circle-chart chart.js

chart.js is a peer dependency, so install it alongside.

import { Component } from '@angular/core';
import { NgxCircleChartComponent } from '@angx/ngx-circle-chart';

@Component({
  selector: 'app-stats',
  imports: [NgxCircleChartComponent],
  template: `
    <circle-chart
      [value]="6"
      [maxValue]="8"
      color="#FF4040"
      bgColor="#FADADA"
      [gradientColoring]="true"
      [dimensionsInPixels]="200"
    />
  `,
})
export class StatsComponent {}

The chart updates automatically whenever an input changes — bind a signal and it follows.

• Angular 21+ is required, and the workspace targets Angular 22.
• ng2-charts is no longer needed. It was a peer dependency and pulled @angular/cdk in with it. Unless you use them elsewhere:

  npm uninstall ng2-charts

• value and maxValue are now required inputs — the compiler will tell you if one is missing.
• New optional fontFamily input.
• Inputs are signal-based internally; template bindings are unchanged.

• The chart never redrew when its inputs changed — it was built once in ngAfterViewInit.
• Every instance emitted id="chart" and id="chart-foreground", so two charts on one page collided and the centre label was measured against the wrong element.
• The label colour helper dropped leading zeros (#0f1e2d darkened to the invalid #51423), silently breaking the /maxValue text.
• A value greater than maxValue produced a negative arc segment.
• Charts were never destroyed, leaking a chart.js instance per component.
• Canvas code ran during server-side rendering.
• The centre label is now genuinely centred rather than offset by a hard-coded fudge factor.

npm install
npm run build:lib   # build the package into dist/angx/ngx-circle-chart
npm start           # build the lib, then serve the demo app
npm test            # run the library unit tests

The demo app is deployed to GitHub Pages from master by .github/workflows/deploy-demo.yml.

If you like my work and feel like buying me a coffee, please feel free to do so:

Buy Me A Coffee

MIT © Abhishek Singh

GitHub · Twitter