Skip to main content

Doughnut Chart

This visual node adds a doughnut chart to the visual tree.

Here is an example how to use used the node.

Inputs

General Options

DataDescription
Index Axis
ResponsiveResizes the chart canvas when its parent node changes size.
Maintain Aspect RatioMaintain the original canvas aspect ratio (width / height) when resizing.
Aspect RatioCanvas aspect ratio (i.e. width / height, a value of 1 representing a square canvas). Default: 1

Animation

DataDescription
On Data UpdateWhen false, it wont animate when you update the data object. (Preventing Animations)

Title

DataDescription
Show TitleIs the title shown?
TextTitle text to display.
AlignAlignment of the title.
PositionPosition of title.
ColorColor of text.

Title Font

DataDescription
Font FamilyThe font family.
Font SizeThe font size.
Font StyleThe font style.
WeightThe font weight (boldness).
Line HeightThe height of an individual line of text.

Tooltips

DataDescription
Show TooltipsAre on-canvas tooltips enabled?
ModeSets which elements appear in the tooltip.
PositionThe mode for positioning the tooltip.
Background ColorBackground color of the tooltip.
Body ColorColor of body text.
SpacingSpacing to add to top and bottom of each tooltip item.
Corner RadiusRadius of tooltip corner curves.
Display ColorsIf true, color boxes are shown in the tooltip.

Tooltips Font

DataDescription
Font FamilyThe font family.
Font SizeThe font size.
Font StyleThe font style.
WeightThe font weight (boldness).
Line HeightThe height of an individual line of text.

Legend Labels

DataDescription
Text Color
Text Align
Use Point Style
Point Style

Legend Label Font

DataDescription
Font FamilyThe font family.
Font SizeThe font size.
Font StyleThe font style.
WeightThe font weight (boldness).
Line HeightThe height of an individual line of text.

Data Decimation

DataDescription
EnabledIs decimation enabled?
AlgorithmDecimation algorithm to use. See the more...
SamplesIf the lttb algorithm is used, this is the number of samples in the output dataset. Defaults to the canvas width to pick 1 sample per pixel.
ThresholdIf the number of samples in the current axis range is above this value, the decimation will be triggered. Defaults to 4 times the canvas width. The number of point after decimation can be higher than the threshold value.

Interaction

DataDescription
IntersectIf true, the interaction mode only applies when the mouse position intersects an item on the chart.
ModeSets which elements appear in the interaction.
Axis
Include InvisibleIf true, the invisible points that are outside of the chart area will also be included when evaluating interactions.

Outputs

Click Event

DataDescription
Data
SignalDescription
Click

Before Event

DataDescription
Chart
Args
SignalDescription
Before

Debug

DataDescription
Chart.js Options