Interface: DoughnutControllerDatasetOptions | Chart.js
Description: Open source HTML5 Charts for your website

# # Interface: DoughnutControllerDatasetOptions

## # Hierarchy

- `ControllerDatasetOptions`

- `ScriptableAndArrayOptions`<`ArcOptions`, `ScriptableContext`<`"doughnut"`>>

- `ScriptableAndArrayOptions`<`ArcHoverOptions`, `ScriptableContext`<`"doughnut"`>>

- `AnimationOptions`<`"doughnut"`>

  ↳ `DoughnutControllerDatasetOptions`

  ↳↳ `PolarAreaControllerDatasetOptions`

## # Properties

### # animation

• animation: `false` | `AnimationSpec`<`"doughnut"`> & { `onComplete?`: (`event`: `AnimationEvent`) => `void` ; `onProgress?`: (`event`: `AnimationEvent`) => `void` }

#### # Inherited from

AnimationOptions.animation

#### # Defined in

index.esm.d.ts:1640
(opens new window)

### # animations

• animations: `AnimationsSpec`<`"doughnut"`>

#### # Inherited from

AnimationOptions.animations

#### # Defined in

index.esm.d.ts:1650
(opens new window)

### # backgroundColor

• backgroundColor: `ScriptableAndArray`<`Color`, `ScriptableContext`<`"doughnut"`>>

#### # Inherited from

ScriptableAndArrayOptions.backgroundColor

#### # Defined in

index.esm.d.ts:1696
(opens new window)

### # borderAlign

• borderAlign: `ScriptableAndArray`<`"center"` | `"inner"`, `ScriptableContext`<`"doughnut"`>>

Arc stroke alignment.

#### # Inherited from

ScriptableAndArrayOptions.borderAlign

#### # Defined in

index.esm.d.ts:1732
(opens new window)

### # borderColor

• borderColor: `ScriptableAndArray`<`Color`, `ScriptableContext`<`"doughnut"`>>

#### # Inherited from

ScriptableAndArrayOptions.borderColor

#### # Defined in

index.esm.d.ts:1695
(opens new window)

### # borderJoinStyle

• borderJoinStyle: `ScriptableAndArray`<`CanvasLineJoin`, `ScriptableContext`<`"doughnut"`>>

Line join style. See MDN. Default is 'round' when `borderAlign` is 'inner', else 'bevel'.

#### # Inherited from

ScriptableAndArrayOptions.borderJoinStyle

#### # Defined in

index.esm.d.ts:1737
(opens new window)

### # borderRadius

• borderRadius: `ScriptableAndArray`<`number` | `ArcBorderRadius`, `ScriptableContext`<`"doughnut"`>>

Sets the border radius for arcs

`default` 0

#### # Inherited from

ScriptableAndArrayOptions.borderRadius

#### # Defined in

index.esm.d.ts:1743
(opens new window)

### # borderWidth

• borderWidth: `ScriptableAndArray`<`number`, `ScriptableContext`<`"doughnut"`>>

#### # Inherited from

ScriptableAndArrayOptions.borderWidth

#### # Defined in

index.esm.d.ts:1694
(opens new window)

### # circular

• circular: `ScriptableAndArray`<`boolean`, `ScriptableContext`<`"doughnut"`>>

If false, Arc will be flat.

`default` true

#### # Inherited from

ScriptableAndArrayOptions.circular

#### # Defined in

index.esm.d.ts:1754
(opens new window)

### # circumference

• circumference: `number`

Sweep to allow arcs to cover.

`default` 360

#### # Defined in

index.esm.d.ts:250
(opens new window)

### # clip

• clip: `number` | `false` | `ChartArea`

How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. 0 = clip at chartArea. Clipping can also be configured per side: clip: {left: 5, top: false, right: -2, bottom: 0}

#### # Inherited from

ControllerDatasetOptions.clip

#### # Defined in

index.esm.d.ts:70
(opens new window)

### # hidden

• hidden: `boolean`

Configures the visibility state of the dataset. Set it to true, to hide the dataset from the chart.

`default` false

#### # Inherited from

ControllerDatasetOptions.hidden

#### # Defined in

index.esm.d.ts:88
(opens new window)

### # hoverBackgroundColor

• hoverBackgroundColor: `ScriptableAndArray`<`Color`, `ScriptableContext`<`"doughnut"`>>

#### # Inherited from

ScriptableAndArrayOptions.hoverBackgroundColor

#### # Defined in

index.esm.d.ts:1702
(opens new window)

### # hoverBorderColor

• hoverBorderColor: `ScriptableAndArray`<`Color`, `ScriptableContext`<`"doughnut"`>>

#### # Inherited from

ScriptableAndArrayOptions.hoverBorderColor

#### # Defined in

index.esm.d.ts:1701
(opens new window)

### # hoverBorderWidth

• hoverBorderWidth: `ScriptableAndArray`<`number`, `ScriptableContext`<`"doughnut"`>>

#### # Inherited from

ScriptableAndArrayOptions.hoverBorderWidth

#### # Defined in

index.esm.d.ts:1700
(opens new window)

### # hoverOffset

• hoverOffset: `ScriptableAndArray`<`number`, `ScriptableContext`<`"doughnut"`>>

#### # Inherited from

ScriptableAndArrayOptions.hoverOffset

#### # Defined in

index.esm.d.ts:1758
(opens new window)

### # indexAxis

• indexAxis: `"x"` | `"y"`

The base axis of the chart. 'x' for vertical charts and 'y' for horizontal charts.

`default` 'x'

#### # Inherited from

ControllerDatasetOptions.indexAxis

#### # Defined in

index.esm.d.ts:66
(opens new window)

### # label

• label: `string`

The label for the dataset which appears in the legend and tooltips.

#### # Inherited from

ControllerDatasetOptions.label

#### # Defined in

index.esm.d.ts:74
(opens new window)

### # normalized

• normalized: `boolean`

Chart.js is fastest if you provide data with indices that are unique, sorted, and consistent across datasets and provide the normalized: true option to let Chart.js know that you have done so.

#### # Inherited from

ControllerDatasetOptions.normalized

#### # Defined in

index.esm.d.ts:58
(opens new window)

### # offset

• offset: `number`

Arc offset (in pixels).

#### # Overrides

ScriptableAndArrayOptions.offset

#### # Defined in

index.esm.d.ts:255
(opens new window)

### # order

• order: `number`

The drawing order of dataset. Also affects order for stacking, tooltip and legend.

#### # Inherited from

ControllerDatasetOptions.order

#### # Defined in

index.esm.d.ts:78
(opens new window)

### # parsing

• parsing: `false` | { [key: string]: `string`; }

How to parse the dataset. The parsing can be disabled by specifying parsing: false at chart options or dataset. If parsing is disabled, data must be sorted and in the formats the associated chart type and scales use internally.

#### # Inherited from

ControllerDatasetOptions.parsing

#### # Defined in

index.esm.d.ts:49
(opens new window)

### # rotation

• rotation: `number`

Starting angle to draw this dataset from.

`default` 0

#### # Defined in

index.esm.d.ts:261
(opens new window)

### # spacing

• spacing: `number`

Similar to the `offset` option, but applies to all arcs. This can be used to to add spaces between arcs

`default` 0

#### # Defined in

index.esm.d.ts:274
(opens new window)

### # stack

• stack: `string`

The ID of the group to which this dataset belongs to (when stacked, each group will be a separate stack).

#### # Inherited from

ControllerDatasetOptions.stack

#### # Defined in

index.esm.d.ts:83
(opens new window)

### # transitions

• transitions: `TransitionsSpec`<`"doughnut"`>

#### # Inherited from

AnimationOptions.transitions

#### # Defined in

index.esm.d.ts:1651
(opens new window)

### # weight

• weight: `number`

The relative thickness of the dataset. Providing a value for weight will cause the pie or doughnut dataset to be drawn with a thickness relative to the sum of all the dataset weight values.

`default` 1

#### # Defined in

index.esm.d.ts:267
(opens new window)