Animated-3d-piechart NPM

Animeted 3d piechart

This library is for drawing nice looking pie/donat charts with d3js.

Here is the link to the demo

##How to install

npm install animeted-3d-piechart

How to use it

In you html file you need to add any html tag with uniq id.

Example:

<div id="piechart"></div>

And add script:

import Dounat3D from 'animated-3d-pie';

var chartId = 'piechart';
var data = [10, 20, 30];
piechart3D.draw(chartId, data);

piechart3D.draw(chartid, data, config')

chartId - string, id of html that where chart should be placed
data - array of numbers or objects
config - object with chart config

Data

Data can be provided on two ways. The basic one is an array of numbers - example [10, 20, 30]. Each number will be treat as value for single part of the chart. Colors will be added automatic for each value.

Second way is to provide own array of objects with definitions of colors and/or lables.

Data with objects:

var data = [
  {
    value: 10,
      color: 'red',
      label: 'No'
  },
  {
    value: 20,
      color: 'green',
      label: 'Yes'
  },
  {
    value: 5,
      color: 'silver',
      label: 'Others'
  }
];

value - number
color - string
label - string

Config

config - Object

Parameter	Default	Decryption
`ir`	`0`	`Number` (min: 0, max: 100) Inner radius in %
`h`	`20`	`Number` (min: 0) Height of walls in px
`angle`	`45`	`Number` (min: 0, max: 90) Angle of chart in degrees, when 90 the chart become normal flat pie chart
`size`	`100`	`Number` (min: 0, max: 100) size in inner html tag in %
`animationDuration`	`750`	`Number` (min: 0) time in ms of drawing the chart
`fontSize`	`12`	`Number` (min: 0) label and tooltip font size in px
`animatedSlices`	`true`	`Boolean` if false the slices are not click-able
`label`	`labelFunction`	`Function/Boolean` if false there will be no labels on the chart, d => {}
`linesColor`	`'black'`	`Function/String` color for the lines, d => {}
`labelColor`	`'black'`	`Function/String` color for the lables, d => {}
`onSliceSelect`	`null`	`Function` on slice click, d => {}
`tooltip`	`tooltipFunction`	`Function` tooltip text, d => {}
`tooltipColor`	`black`	`Function/String` color of the tooltips, d => {}

d => {} - function that depends on d.

d = {
  data: {
      color: ...,
        value: ...,
        label: ...
    },
    index: ...,
    startAngle: ...,
    endAngle: ...,
    value: ...
}

Example of function d => {}:

tooltipFunction: d => `${Number(d.value).toFixed(2)}`

Update

Update chart if config or data changed.

piechart3D.update(chartId, data, config)

License

chart d3 animation 3d pie pie3d donat

@everything-registry/sub-chunk-1140

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago