PieChart

live example

Explore the API in the live example.

api reference

PieChart(name[, parent])

The pie chart widget. As a chart, it extends the [Chart] ../components/chart.html component, with all of its available APIs. Furthermore, it extends the following components:

ElementTooltip
Highlight Slices can be highlighted by passing their category names as specified in the data array.
Label Labels are shown inside the slice if they fit in, otherwise they are shown outside.
Objects

By changing the inner radius of the chart, this widget doubles as a donut chart.

Parameters

Name	Type	Description
name	string	Name of the chart. Should be a unique identifier.
parent	string	optionalSee [Widget] ../components/widget.html for description. Default value is `body`.

PieChart.data(plots)

Set/updates the data that is shown in the pie chart. In the pie chart, each slice is a plot group in itself, so all methods that operate on plot groups are applied on the slice level.

Parameters

Name	Type	Description
plots	Object[]	Array of objects representing the pie slices to show. Each slice has two properties: name `string` Category name. value `number` Category value.

Returns

PieChart

Reference to the PieChart API.

Examples

const pie = dalian.PieChart('my-chart')
  .data([
    {name: 'slice 1', value: 1},
    {name: 'slice 2', value: 3},
    {name: 'slice 3', value: 2},
    ...
  ])
  .render()

PieChart.innerRadius([radius])

Sets the inner radius of the pie chart making it actually a donut chart.

Parameters

Name	Type	Description
radius	number	optionalThe inner radius in pixels. Default value is `0`.

Returns

PieChart

Reference to the PieChart API.

Examples

// Set inner radius to 10px.
const pie = dalian.PieChart('my-chart')
  .innerRadius(10)
  .render()

// Reset inner radius to default.
pie.innerRadius()
  .render()

PieChart.outerRadius([radius])

Sets the outer radius of the pie chart.

Parameters

Name	Type	Description
radius	number	optionalThe outer radius in pixels. If not specified, it is set to 100. Default value is `100`.

Returns

PieChart

Reference to the PieChart API.

Examples

// Set outer radius to 60px.
const pie = dalian.PieChart('my-chart')
  .outerRadius(60)
  .render()

// Reset outer radius to default.
pie.outerRadius()
  .render()