svg-pie

svg-pie is a free, open source module for creating responsive vector pie charts. Based on D3 v.4

Installation

From NPM :

• npm install svg-pie

Download:

• Minified version (~5K)
• Minified version with all needed D3 modules (~100K)

Examples:

• zemlyansky.github.io/svg-pie/

Features

• tooltips
• custom color range
• color interpolation
• customizable inner radius (doughnut version)
• different input formats (number, array, array of objects)
• sorting
• responsive
• animation

Usage

DOM

Add <div id="chart"></div> where you want to place a pie chart. Feel free to add any content between <div> and </div>. It'll be centered.

Javascript

The module return a constructor that accepts two parameters: selector and options

CommonJS

var SvgChart = require('svg-pie')
var chart = new SvgChart('#chart', options)

Browser

Use svg-pie.min.js together with D3:

<script src="https://d3js.org/d3.v4.js"></script>
<script src="svg-pie.min.js" charset="utf-8"></script>
<script type="text/javascript">
  var chart = new SvgPie('#chart', {data: {...}, options: {...}})
</script> 

svg-pie.bundle.min.js includes all needed dependencies:

<script src="svg-pie.bundle.min.js" charset="utf-8"></script>
<script type="text/javascript">
  var chart = new SvgPie('#chart', {data: {...}, options: {...}})
</script> 

Data & Options

Data and Options are objects you pass to constructor. Like that:

new SvgPie('#chart1', {
    data: {
        dataset: [
            {label: 'Label 1', value: 65},
            {label: 'Label 2', value: 35},
        ]
    },
    options: {
        innerRadiusSize: .7,
        transition: 2000,
        initialTransition: true,
        sort: true,
        colors: ['#44DDDD','#EEEEEE']
    }
})

Data

Parameter	Default value	Description
dataset	undefined	Actual data. Array of objects. Each objects should have a `value`. `label` is optional
values	undefined	Array of numbers. Alternative to dataset
labels	undefined	Array of strings. Alternative to dataset

Options

Parameter	Default value	Description
showTooltip	true	Boolean. To show or not a tooltip
showLabels	false	Boolean. To show or not labels on a chart
sort	false	Boolean. To sort data or not
innerRadiusSize	0.7	Float [0,1]. The size of innerRadius comparing to outerRadius
colors	['#004A7C','#CDFC41','#A2A2A1']	Array of strings. List of colors to interpolate
transition	700	Number or Boolean. Transition duration. Accepts boolean true ~ default 700
initialTransition	false	Boolean. To show or not initial animation
percents	false	Boolean. Pass values as percents. Calculates the Other field if sum < 100%
group	false	Boolean. Group small values into the Other
showOtherTooltip	false	Boolean. To show or not a tooltip for the Other field
otherSize	1	Float [0,1]. Relative size of the Other segment. 1 - same size as other segments. 0 - hidden

Style

By default a chart, its inner content and a tooltip have no styling. To style the tooltip use CSS and .csv-tooltip, .csv-tooltip-label, .csv-tooltip-value selectors. For example:

.csv-tooltip {
  font-size: .8em;
  background: white;
  box-shadow: 0 0 10px rgba(0,0,0,.2);
  padding: 10px;
  opacity: .8;
}
.csv-tooltip-label {
  font-size: 1.2em;
  font-weight: bold;
}

To style inner content of the chart add your own DOM elements:

<div id="chart">
  <div class="your-new-element">70%</div>
</div>