D3 Pie Chart
myt-pie-chart
Simple pie chart library with D3
Prerequisites
If you're installing with NPM, you need NPM installed. Otherwise you can checkout the library from GitHub and use directly.
Getting started:
- Install via the npm
npm install myt-pie-chart --save
. - Either include the library with a script tag or require it (RequireJS, AMD, Browserify etc.).
Usage
If using script tags.
<script src="./node_modules/path/to/d3.js"></script><script src="./node_modules/myt-pie-chart/myt-pie-chart.js"></script>
If requiring.
var d3 = require('d3');var mytPieChart = require('myt-pie-chart');
Prepare your chart data, it may look something like this:
var data = [{ name: 'Users', // Required. {string} - Data entry name. value: 28819, // Required. {int} - Data entry value. bgColor: '#747485', // Optional. {string} - defaults to ~random color. color: 'green' // Optional. {string} - defaults to black.}];
Create a pie chart instance, then assign your data to it.
var pie = mytPieChart.newChart('container-id').setData(data);
Configure your chart.
// Chart inherits the size of the container element. // Additional options, see full options support in documentation.pie.tooltip = true; // Optional. {boolean} - To show the tooltip, defaults to false.pie.tooltipId = 'tooltipContainerId'; // Optional. {string} - Assign the element to be used as tooltip.
Render the chart.
pie.display();
In case you want to redraw the chart, you may call pie.restart();
.
pie.display(); // Do some data changes, like Ajax calls.data = someNewData();pie.setData(data); // Re-render the chart with new data.pie.update(); // Update only works for data changes, if you want to redraw the chart use 'pie.restart()'
Examples and in depth explanations
For more info, see examples and complete API documentation.