❤
npm
Sign UpSign In

create-svg-pie

1.0.0 • Public • Published

create-svg-pie

Build Status

Create a SVG pie chart from number array.

Installation

npm install create-svg-pie --save

Usage

import createSVGPie from 'create-svg-pie';
 
const values = [5, 10, 15];
const radius = 100;
 
// Pie with default colors
const pie = createSVGPie(values, pie);
document.body.appendChild(pie);
 
// Pie with custom colors
const palette = ['#3cf','#f36','#fc3'];
const customPie = createSVGPie(values, pie, palette);
document.body.appendChild(customPie);
 

Example HTML output

<!-- Pie with default colors -->
<svg width="200" height="200" viewBox="0 0 200 200">
  <path d="M100,100  L100,0  A100,100 0 0,1 186.60254037844388,50.00000000000001 z" fill="#4D4D4D"></path>
  <path d="M100,100  L186.60254037844388,50.00000000000001  A100,100 0 0,1 100,200 z" fill="#5DA5DA"></path>
  <path d="M100,100  L100,200  A100,100 0 0,1 99.99999999999999,0 z" fill="#FAA43A"></path>
</svg>
 
<!-- Pie with custom colors -->
<svg width="200" height="200" viewBox="0 0 200 200">
  <path d="M100,100  L100,0  A100,100 0 0,1 186.60254037844388,50.00000000000001 z" fill="#3cf"></path>
  <path d="M100,100  L186.60254037844388,50.00000000000001  A100,100 0 0,1 100,200 z" fill="#f36"></path>
  <path d="M100,100  L100,200  A100,100 0 0,1 99.99999999999999,0 z" fill="#fc3"></path>
</svg>

Example image output

Default pie Custom pie

Contributing

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code.

Release History

  • 1.0.0 Initial release

Todo

  • Create useful tests

Readme

Keywords

Package Sidebar

Install

npm i create-svg-pie

Repository

github.com/janjarfalk/create-svg-pie

Homepage

github.com/janjarfalk/create-svg-pie#readme

Weekly Downloads

547

Version

1.0.0

License

ISC

Last publish

Collaborators

  • janjarfalk
Try on RunKit
Report malware