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:
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>