CoxcombChart

live example

Explore the API in the live example.

api reference

CoxcombChart(name[, parent])

The coxcomb chart widget. The chart extends the following components:

Color
Description
Font
Label
Highlight: plot groups can be highlighted by passing their names as specified in the data array.
Mouse: The group name and the wedge y value is passed to each mouse callback.
Placeholder
PointTooltip: The tooltip has the wedge x value as title and each plot group's y value as values.
Widget

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`.

CoxcombChart.angle([angle])

Sets the start angle of the chart (first wedge).

Parameters

Name	Type	Description
angle	number	optionalStart angle in degrees measured from the top of the vertical center of the chart. Default value is `0`.

Returns

CoxcombChart

Reference to the CoxcombChart API.

Examples

// Set start angle to 90°.
const coxcomb = dalian.CoxcombChart('my-chart')
  .angle(90)
  .render()

// Reset angle to default.
coxcomb.angle()
  .render()

CoxcombChart.data(plots)

Sets the data that is shown in the coxcomb chart. In the chart, each group of wedges with the same color is a plot group in itself, so all methods that operate on plot groups are applied on them.

Parameters

Name Type Description

plots

Object[]

Name	Type	Description
plots	Object[]	Array of objects representing the groups of wedges to show. Each group has two properties: name `string` Group name. values `number` Group values. The `values` property is an array of objects of the following structure: x `number` Wedge label y `number` Wedge value.. The value of `y` for missing `x` coordinates are replaced by `null` and are not shown on the chart.

Array of objects representing the groups of wedges to show. Each group has two properties:

name: string Group name.
values: number Group values.

The values property is an array of objects of the following structure:

x: number Wedge label
y: number Wedge value..

The value of y for missing x coordinates are replaced by null and are not shown on the chart.

Returns

CoxcombChart

Reference to the CoxcombChart API.

Examples

const coxcomb = dalian.CoxcombChart('my-chart')
  .data([{
    name: 'wedges 1',
    values: [
      {x: 'Mon', y: 2.3},
      {x: 'Tue', y: 2.1},
      {x: 'Wed', y: 2.5},
      ...
    ]
  }, {
    name: 'wedges 2',
    values: [
      {x: 'Mon', y: 7.1},
      {x: 'Wed', y: 2.4},
      ...
    ]
  } ... ])
  .render()

CoxcombChart.radius([radius])

Sets the maximum radius of the chart.

Parameters

Name	Type	Description
radius	number	optionalRadius to set in pixels. Default value is `100`.

Returns

CoxcombChart

Reference to the CoxcombChart API.

Examples

// Set radius to 50px.
const coxcomb = dalian.CoxcombChart('my-chart')
  .radius(5)
  .render()

// Reset radius to default.
coxcomb.radius()
  .render()