Thanks to visit codestin.com
Credit goes to github.com

Skip to content

tafsiri/d3.chart.pie

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

46 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

d3.chart.pie

Pie/Donut chart using d3 and d3.chart, see demo here.

Inspired and based on this jsfiddle by Steve Boak.

Dependencies
devDependency Status
Gitter chat

Usage

  // Appends the chart to an 'svg' element.
  var chart = d3.select('body')
    .append('svg')
    .height(350)
    .width(400)
    .chart('Pie', {
      height: 350,
      width: 400,
      radius: 100,
      donutHole: {
        radius: 80
      }
      labelTemplate: '[{label}]' // [my label]
    });

  // Draws graph once you add data.
  chart.draw([
    {
      label: 'my label',
      value: 3
    }, {
      label: 'your label',
      value: 0.5
    }, {
      label: 'other label',
      value: 1
    }
  ]);

Available Options & Defaults

  {
    radius: 100,
    width: 450, // Or container's width
    height: 300, // Or container's height
    labelTemplate: '{label}',
    labels: undefined,
    legend: undefined
    donutHole: undefined
  }

See d3.chart.legend for available options and usage.

The following options are available for donutHole:

{
  radius: int|float,
  color: valid d3 colors
}

Not specifying the donutHole object will create a Pie chart, rather then a Donut chart.

Contributing

See the following links:

  1. d3.chart quickstart
  2. d3.chart API reference
  3. d3 API

About

Pie/Donut chart using d3 and d3.chart.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 97.1%
  • CSS 2.9%