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

Options

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>