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

    1.0.7 • Public • Published

    npm version

    Ring Chart

    Simple Ring-Chart/Pie-Chart angular component with 1 or more sections (see demo)

    Getting started

    Install

    NPM

    npm install --save st-ring-chart

    YARN

    yarn add st-ring-chart

    Import The Ring Chart module

    import { RingChartModule } from 'st-ring-chart';
     
    @NgModule({
      declarations: [AppComponent],
      imports: [RingChartModule],
      bootstrap: [AppComponent]
    })
    export class AppModule {}

    See Usage At The Demo Project

    API

    Input Type Default Required Description
    [sections] RingSectionItem[] [] Yes represents the chart sections, every section is in the form of: {"color": string, "percentage": number}. Sum of section percentages must be equal to 1
    [thickness] number (px) 5 No The width of the ring. When this number is half or greater the ring diameter it fills the ring entirely and it becomes a pie.
    [diameter] number (px) 0 Yes The Ring/Pie diameter.
    [centerColor] string background No The color of the ring center. It is recommended to pass this parameter in order to avoid some display artifacts where the sections intersect

    Development

    Run npm start for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

    Build

    Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

    Running unit tests

    Run ng test to execute the unit tests via Karma.

    Install

    npm i st-ring-chart

    DownloadsWeekly Downloads

    0

    Version

    1.0.7

    License

    MIT

    Unpacked Size

    174 kB

    Total Files

    29

    Last publish

    Collaborators

    • shimital