Skip to main content

Donut

Basic Configuration

The minimum configuration for the Donut component looks like:

component.tsx
import { VisSingleContainer, VisDonut } from '@unovis/react'

function Component(props) {
const data: number[] = props.data
const value = (d: number) => d

return (
<VisSingleContainer data={data}>
<VisDonut value={value}/>
</VisSingleContainer>
)
}
Loading...

Labels

Donut can have a label and a smaller sub-label in the center. You can provide them by using the centralLabel and centralSubLabel config properties. The sub-label will automatically wrap onto multiple lines (unless you set the centralSubLabelWrap property to false), while the main label is supposed to be short and doesn't have wrapping implemented.

<VisDonut
value={value}
centralLabel="Label"
centralSubLabel="Long sub-label wraps onto the next line"
/>
Loading...

Angle Range

By default, a Donut will populate values in the angle range [0, 2π]. You can adjust your Donut's angleRange property to a [a,b] of type [number, number] where a[0] = the starting position and a[1] = the ending position (in radians). A common example might be when you want an incomplete/semi circle:

<VisDonut value={value} angleRange={[1,3.141592653589793]}/>
Loading...

Sorting

By default, each segment is placed in order of appearance within your data array, from To change this, provide a sorting function to the sortFunction property. The following example displays the segments in descending order:

component.tsx
import { VisSingleContainer, VisDonut } from '@unovis/react'

function Component(props) {
const data: number[] = props.data
const value = (d: number) => d
const sortFunction = (a, b) => a - b

return (
<VisSingleContainer data={data}>
<VisDonut value={value} sortFunction={sortFunction}/>
</VisSingleContainer>
)
}
Loading...

Size

You can change the size of your Donut with the following properties:

Radius

radius defines the outer/overall radius:

<VisDonut radius={50} value={value}/>
Loading...

Arc Width

arcWidth defines the width of the circle's outer ring in pixels.

<VisDonut arcWidth={50} value={value}/>
Loading...

note

For the appearance of a traditional pie chart, set Donut's arcWidth to 0.

Segment Appearance

Custom Color

Customize the colors for each segment with a colorAccessor function:

component.tsx
function Component(props) {
const data: number[] = props.data
const value = (d: number) => d
const color = (d: number, i: number) => ['red','orange','blue','green'][i]

return (
<VisDonut value={value} color={color}/>
)
}
Loading...

Corner Radius

Providing a value to the cornerRadius property adds rounded corners to your Donut's segments proportional to the Donut's arcWidth.

<VisDonut cornerRadius={5} value={value}/>
Loading...

Pad angle

Pad each segment with the padAngle property.

<VisDonut value={value} padAngle={0.1}/>
Loading...

Empty Segments

When segments are empty (i.e. when their values are 0), you may still want them displayed in your Donut as thin slices. To do this, set showEmptySegments to true:

<VisDonut showEmptySegments={true} value={value} padAngle={0.03}/>
Loading...

Customizing empty segment size

When showEmptySegments is enabled, the default size for empty segments is 0.5 * π / 180 radians. You can tweak this to your liking with the emptySegmentAngle property which accepts a number in radians. For example, setting emptySegmentAngle to Math.PI / 12 looks like:

Loading...

Note that this property will have no effect if showEmptySegments is false.

Background

By default, Donut has a background underneath the segments, which is useful when your chart is empty. You can turn it off by setting showBackground to false.

<VisDonut
showBackground={true}
value={value}
angleRange={[-1.5707963267948966,1.5707963267948966]}
/>
Loading...

Also, you can change the angular range of the background by providing a [number, number] value (in radians) to backgroundAngleRange. By default, the background angular range will be the same as angleRange.

<VisDonut
value={value}
showBackground={true}
angleRange={[0,1.0471975511965976]}
backgroundAngleRange={[0,6.283185307179586]}
/>
Loading...

The color of the background can be changed via the --vis-donut-background-color and --vis-dark-donut-background-color CSS variables.

Events

The following selectors are available for events:

import { Donut } from '@unovis/ts'
...
events = {
[Donut.selectors.segment]: { },
[Donut.selectors.background]: { },
[Donut.selectors.centralLabel]: { },
[Donut.selectors.centralSubLabel]: { },
}
<VisDonut value={value} events={events}/>

CSS Variables

All supported CSS variables and their default values

--vis-donut-central-label-font-size: 16px;
--vis-donut-central-label-text-color: #5b5f6d;
--vis-donut-central-label-font-family
--vis-donut-central-label-font-weight: 600;

--vis-donut-central-sub-label-font-size: 12px;
--vis-donut-central-sub-label-text-color: #5b5f6d;
--vis-donut-central-sub-label-font-family
--vis-donut-central-sub-label-font-weight: 500;

--vis-donut-background-color: #E7E9F3;

--vis-dark-donut-central-label-text-color: #C2BECE;
--vis-dark-donut-central-sub-label-text-color: #C2BECE;
--vis-dark-donut-background-color: #18160C;

Component Props

NameTypeDescription
* required property