Visually presents data in portions.
The chart data is an array of objects that are set on the data property of the q2-chart-donut component. Each object must have an id, name, and value property.
You may also set an icon property to be displayed when selected, and a color property to override the default color.
Data Structure
type Data = {
id: string;
value: number;
name: string;
icon?: string;
color?: string;
};Example
const chart = document.querySelector("q2-chart-donut");
chart.data = [
{
value: 1048,
name: 'Groceries',
id: 'groceries',
icon: 'cart'
}, {
value: 735,
name: 'Pets',
id: 'pets',
icon: 'paw'
}, {
value: 580,
name: 'Rent',
id: 'rent',
icon: 'home',
color: 'var(--const-stoplight-info)'
}
]By default, the q2-chart-donut uses the theme's accent colors as a color scheme. You can override any of these colors by setting the color property on the data object.
You may either reference a CSS variable from the theme's palette or use a traditional color value.
Example
const chart = document.querySelector("q2-chart-donut");
chart.data = [
{
value: 200,
name: 'Food',
id: 'food',
color: 'var(--const-stoplight-info)'
}, {
value: 735,
name: 'Pets',
id: 'pets',
color: 'rebeccapurple'
}, {
value: 580,
name: 'Rent',
id: 'rent',
color: '#990000'
}
]The q2-chart-donut element has one or more properties that support text localization. Those properties are indicated by the localizable badge in the description.
chartNamechart-nameThe title of the chart. We recommend always including this for accessibility purposes.
It is hidden by default, but can be made visible with the showChartName variable.
dataAn array of objects that contain the data to be displayed.
formatControls whether values on the value axis are shown as numbers or as currency.
hoverScaleSizehover-scale-sizeThe amount which the slice will scale when hovered.
innerRadiusinner-radiusThe inner radius of the chart slices which is represeted by a percentage of the radius.
If you update this property to be greater than or equal to the outerRadius,
we automatically set it to be 15% less than the current outerRadius to prevent display issues.
isClickableis-clickableDetermine whether the data in the center renders inside a button element.
This also enables extra keyboard controls when the button is focused.
minSliceSizemin-slice-sizeThe minimum size of the chart slizes which is represented as a percentage of the circumferences.
outerRadiusouter-radiusThe outer radius of the chart slices which is represented by a percentage of the radius.
If you update this property to be less than or equal to the innerRadius,
we automatically set it to be 15% greater than the current innerRadius to prevent display issues.
selectedIdselected-idThe id of the data point that is currently selected in the chart. You may set this to pre-select a data point on render, or force a selection change.
selectedOffsetselected-offsetThe amount which the slice will separate from the chart when selected.
showLegendshow-legendDetermines whether the legend is displayed.
The legend is a list of the data points in the chart and their colors.
summaryIconsummary-iconThe icon that displays by default when no slices are selected.
summaryNamesummary-nameThe name that displays by default when no slices are selected.
The q2-chart-donut element exposes events that can be used to send and receive data from the component based on user interaction.
Emitted when a slice is selected.
IDonutChartDataEmitted when the center button is clicked.
Requires the isClickable prop to be set to true.
IDonutChartDataThe q2-chart-donut element exposes methods that can be used to perform various actions on the component.
Clears any selected slice.
clearSelection() => Promise<void>Returns the chart instance for e2e testing.
getChartOptions() => Promise<any>Selects a slice by its provided id in the provided data.
selectById(id: string) => Promise<void>Selects a slice by its index in the provided data.
selectByIndex(index: number) => Promise<void>A method to select a slice with index.
selectDataPoint(index: number) => Promise<void>Initial Release
The following CSS variables are available to override the default theme styles of the q2-chart-donutcomponent.
Many Tecton components consume other components to maintain visual and functional consistency. If you are looking for a CSS variable you think should exist but are not seeing it, it may be defined in one of the dependent components below. Either way, if you think it's something we should expose more conveniently, let us know!