Skip to content
Angular 6+ component wrapper for the beautiful canvas-gauges library
Branch: master
Clone or download
Pull request Compare This branch is 18 commits ahead of MeetmeLeave:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode
lib
projects
.editorconfig
.gitignore
.project
LICENSE
README.md
angular.json
gauges1.gif
gauges1.jpg
package-lock.json
package.json
tsconfig.json
tslint.json

README.md

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

Note: The ng-beautiful-gauges is an updated version of the ng-canvas-gauges project to work with Angular 6 and greater versions. This package will remain active until the project is updated to work with Angular 6+ projects. A pull request based on this project was submitted to ng-canvas-gauges on 20190228).

Getting Started

  1. Install the package in your angular 6 or greater app
npm install ng-beautiful-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 'ng-beautiful-gauges';

@NgModule({
    declarations: [
        AppComponent,
    ],
    imports: [
        BrowserModule,
        GaugesModule
    ],
    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

<linear-gauge
    width="150"
    height="400"
    units="°C"
    title="Temperature"
    min-value="-50"
    max-value="50"
    major-ticks="[-50,-40,-30,-20,-10,0,10,20,30,40,50]"
    minor-ticks="5"
    stroke-ticks="true"
    ticks-width="15"
    ticks-width-minor="7.5"
    highlights='[ {"from": -50, "to": 0, "color": "rgba(0,0, 255, .3)"},
    {"from": 0, "to": 50, "color": "rgba(255, 0, 0, .3)"} ]'
    color-major-ticks="#ffe66a"
    color-minor-ticks="#ffe66a"
    color-title="#eee"
    color-units="#ccc"
    color-numbers="#eee"
    color-plate="#2465c0"
    color-plate-end="#327ac0"
    border-shadow-width="0"
    borders="false"
    border-radius="10"
    needle-type="arrow"
    needle-width="3"
    animation-duration="250"
    animation-rule="linear"
    animated-value="true"
    color-needle="#222"
    color-needle-end=""
    color-bar-progress="#327ac0"
    color-bar="#f5f5f5"
    bar-stroke="0"
    bar-width="8"
    bar-begin-circle="false"
    [attr.value]="myValueProperty"
  ></linear-gauge>

  <radial-gauge 
    [options]="myOptionsProperty"
    [value]="myValueProperty"
  ><radial-gauge>

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


Build

The repo layout is based on the Angular 6 or greater workspace consisting of the ng-beautiful-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-beautiful-gauges/ folder.
npm run build:package

Special Thanks

The upgrade of this project to ng-beautiful-gauges and demos were developed using CodeMix.

Lohika

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.