minicharts

Piechart

Represent data with a pie chart

A pie chart is a special case of polar chart where the data values are represented by the angle of the slices. They should only be used to compare qualitatively proportions and compositions. Indeed, human eye is not good at comparing angles so only large differences are visible.

Constructor

new Piechart(el, data, options)

Name Type Description
el string CSS selector representing the element that will hold the chart.
data Array.<number> Data the chart has to represent.
options PiechartOptions Options controling graphical aspects of the chart.

Options

Name Type Default Description
width number 60 Width of the chart.
height number 60 Height of the chart.
transitionTime number 750 Duration of the transitions, in milliseconds.
colors Array.<string> | function d3.schemeCategory10 Either an array of colors or a function `(d, i) -> color` where `d` is a data value and `i` is the index of the value.If it is an array with length less than the length of data, then the colors are recycled.
labels Array.<string> | "none" | "auto" | function "none" Labels to display in slices. It can be an array with same length as the data. It can also be a function `(d, i) -> labelText` where `d` is a data value and `i` is the index of the value. Finally it can be equal to "none" to hide labels or "auto" to display in a compact way values.
labelColors string | Array.<string> | "auto" | function "auto" Color of the labels. It can be a single value or an array with same length as the data. It can also be a function `(d, i) -> color` where `d` is a data value and `i` is the index of the value. Finally it can be equal to "auto". In this case, the most readable color is choosen depding on the color of the slice.
labelMinSize number 8 Label minimum size in pixels. If there is not enough space for a given label, then it is hidden.
labelMaxSize number 24 Label maximum size in pixels.
labelClass string "" Labels CSS class.
shapeClass string "" slices CSS class.

Methods

setData(data)

Update the data represented by the chart
Name Type Description
data Array.<number> Data the chart has to represent.

setOptions(options)

Update the graphical options of a chart
Name Type Description
options PiechartOptions Options controling graphical aspects of the chart.

update(data, options)

Update simulatenously data and options of a pie chart.
Name Type Description
data Array.<number> Data the chart has to represent.
options PiechartOptions Options controling graphical aspects of the chart.