ngx-donutchart

ngx-donutchart

ngx-donutchart is an Angular component built with TypeScript, HTML5 and Angular >= 4. It is an Angular component for presenting donut charts in a light package with no external dependencies. The chart just consume your data and doesn't make any assumptions about your datastructure or how you handle it.

Features

• Handle large data sets (Virtual DOM)
• Easy configuration and manipulation
• Light codebase / No external dependencies
• Easy selectors for testing purposes
• AoT compilation support

Installation

All you need to do is to run the following command:

$ npm install ngx-donutchart --save

Usage

Import ngx-donutchart directives into your component:

import {NgModule} from '@angular/core';

...

import {NgXDonutChartModule} from 'ngx-donutchart';

Register it by adding to the list of directives of your module:

@NgModule({
  imports: [
    ...
    NgXDonutChartModule
  ],
  ...
})
export class AppModule {
}

Configure the chart and add it into the template by registering slices, size and innerRadius property.

import {NgXDonutChartSlice} from 'ngx-donutchart/ngx-donutchart.type';

slices: NgXDonutChartSlice[] | any[] = [ // exported type
    {
      value: 1,
      color: 'red'
    },
    {
      value: 2,
      color: 'green'
    },
    {
      value: 3,
      color: 'blue'
    }
];

size = 170;

innerRadius = 60

Add ngx-donutchart component inside to the template:

// ...

@Component({
    template: `
    <ngx-donutchart 
        [slices]="slices"
        [size]="size"
        [innerRadius]="innerRadius">
    </ngx-donutchart>
    `
})
// ...

Now you have some slices in your donut chart.

The event available with this component is:

• onSliceHover

Add them as outputs to listen the events.

@Component({
    template: `
    <ngx-donutchart 
        [slices]="slices"
        [size]="size"
        [onSliceHover]="...($event)">
    </ngx-donutchart>
    `
})

Optionally you can add a title to the middle of your component by registering title:

@Component({
    template: `
    <ngx-donutchart 
        [title]="'NgXDonutChart'"
        [slices]="slices"
        [size]="size"
        [onSliceHover]="...($event)">
    </ngx-donutchart>
    `
})

License

MIT © jcunhafonte

Built with :heart: by jcunhafonte