Wondering what’s next for npm?Check out our public roadmap! »

    TypeScript icon, indicating that this package has built-in type declarations

    6.0.7 • Public • Published

    Angular 9+ component wrapper for @Mikhus' canvas-gauges library.

    a fork from https://github.com/MeetmeLeave/ng-canvas-gauges to support angular 9.x

    Getting Started

    1. Install the package in your angular 9 or greater app
    npm install @biacsics/ng-canvas-gauges
    1. Import the GaugesModule to your AppModule file and register it in the imports:
    import {BrowserModule} from '@angular/platform-browser';
    import {NgModule} from '@angular/core';
    import {AppComponent} from './app.component';
    import {GaugesModule} from '@biacsics/ng-canvas-gauges';
        declarations: [
        imports: [
        providers: [],
        bootstrap: [AppComponent]
    export class AppModule {
    1. Add the linear-gauge or radial-gauge element to your template:
    <linear-gauge width="150" height="400"></linear-gauge>
    <radial-gauge width="400" height="400"></radial-gauge>

    Example gauges

    More specific examples of data binding using attributes and component properties

        highlights='[ {"from": -50, "to": 0, "color": "rgba(0,0, 255, .3)"},
        {"from": 0, "to": 50, "color": "rgba(255, 0, 0, .3)"} ]'

    All canvas-gauge attributes are supported as shown above (kebab format) or programmatically (camelCase format). Learn more: https://canvas-gauges.com/documentation/user-guide/configuration


    This repo layout is based on an Angular 9.x or greater workspace consists of the ng-canvas-gauge library project and a demo angular app project.

    1. Install dependencies
    npm install
    1. Create an installable library (.tgz) for upload to the npm public repository or for local installation. Output is to ./dist/ng-canvas-gauges/ folder.
    npm run build:package

    Special Thanks

    The upgrade of this library to angular 9.x and the demos project were developed using CodeMix.


    For supporting development!


    npm i @biacsics/ng-canvas-gauges

    DownloadsWeekly Downloads






    Unpacked Size

    4.56 MB

    Total Files


    Last publish


    • avatar