Package Exports

st-ring-chart

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (st-ring-chart) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.