@angx/ngx-circle-chart

An Angular component that draws a value as a ring — the shape you've seen on every fitness app and dashboard. Give it a number and a maximum, and it renders the rest.

● v4.0.0 MIT Angular 21 · 22 ~5 KB

See it running npm Source

Live demo

The real component, running here

This isn't a screenshot — it's the published package, built and embedded below. Drag the slider at the bottom to watch a chart update.

demo Open in a new tab ↗

Usage

Two lines to get a chart

install

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

component.ts

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

@Component({
  imports: [NgxCircleChartComponent],
  template: `
    <circle-chart
      [value]="6"
      [maxValue]="8"
      color="#0076ff"
      [dimensionsInPixels]="180"
      [gradientColoring]="true" />
  `,
})

The component is standalone, so there's no module to register — import it straight into whichever component uses it.

It renders through chart.js, which is a peer dependency: you install it alongside, and it's shared with any other charts in your app rather than bundled twice.

Only value and maxValue are required. Everything else has a sensible default, and the label inside the ring scales itself to whatever size you ask for.

API

Inputs

Selector: <circle-chart>

Input	Type	Default	What it does
value	number	required	The current value. Clamped into `[0, maxValue]` before drawing, so an overshoot can't wrap the ring around.
maxValue	number	required	The value that represents a full circle.
color	string	'#0076ff'	Colour of the filled arc and of the value text.
bgColor	string	'#e7e9ed'	Colour of the unfilled track behind the arc.
gradientColoring	boolean	false	Fade the arc from `color` towards `bgColor` along its length. The gradient follows the end of the arc, so the fade always runs along the drawn portion.
dimensionsInPixels	number	45	Width and height in CSS pixels. The inner label scales with it.
fontFamily	string	system stack	Font used for the label inside the circle.

Full documentation, including the exported shadeHexColor helper, lives in the repository README.

Free to use, MIT licensed

Use it, fork it, ship it. Issues and pull requests are welcome.

Install from npm Source

← All my open source work