ring-chart's Introduction

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.

ring-chart's People

Contributors

Stargazers

Watchers

ring-chart's Issues

Display Artifact In Section Borders

When not passing "centerColor", then you might see display artefact between the sections of the ring-chart

[Suggestion] using css radial-gradient instead of creating elements for sections

you can simplify your current implementation, by removing the creation of sections as elements in the DOM.
(because then you need to actually style them, rotate them etc.)

you can use the css radial-gradient property (it even has very good browser support)
to style a single DOM element in the desired pie/ring effect, by using multiple stops (of different sizes) on the same linear gradient.

a demo of how its done can be seen here: https://bennettfeely.com/csspiechart/

[Suggestion] allowing sum of sections to be different than 1.

Sum of section percentages must be equal to 1

you should be able to draw a pie chart even if the sum of total sections is not equal to 1,
by normalizing the given percentages to 1.

example 1 (when the total sum is greater than 1):
[{"color": red, "percentage": 1}, {"color": blue, "percentage": 1}] => should resolve into 0.5 for each of the sections.

example 2 (when the sum is smaller than 1):
[{"color": red, "percentage": 0.5}, {"color": blue, "percentage": 0.25}] => should resolve into 0.66 for red, and 0.33 for blue.

the general way to do that calculation:
you can calculate the total sum of all percentages.
const allPercentages = sections.map(s => s.percentage).reduce((sum, i) => sum + i, 0);

and then recalculate the normalized percentage for each section to be: const normalizedPercentage = percentage / allPercentages.

as a side-effect, you also gain the ability to pass the percentage as "whole numbers" like 50, 75 etc. (representing 50%, 75%).
because now they don't have a restriction that force then to sum to 1.

Recommend Projects

stal269 / ring-chart Goto Github PK