0.1.2 • Published 6 years ago
svg-pie v0.1.2
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:
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
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>