Simple Ring-Chart/Pie-Chart angular component with 1 or more sections (see demo)
npm install --save st-ring-chart
yarn add st-ring-chart
import { RingChartModule } from 'st-ring-chart';
@NgModule({
declarations: [AppComponent],
imports: [RingChartModule],
bootstrap: [AppComponent]
})
export class AppModule {}| 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 |
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.
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.
Run ng test to execute the unit tests via Karma.