import { V1Charts } from '@uhg-abyss/web/ui/Charts';

Donut chart

Simple Donut chart with two data sets having title and subtitle props passed. xAxisLabel and yAxisLabel are required props for chart.

Donut options

Pass cutout, rotation, circumference values to options of the Donut chart to set the thickness of the arc, the start angle to draw the arc from, and the sweep to allow the arcs to cover. The default values are 50%, 0, 360, respectively.

Limitation

Limiting the number of data points to 6. If the data set is larger than 6 items or the donut segments are small in size , we recommend using a different chart type for better readability, such as Bar Chart.

Data structure

Data in the datasets can be different structures and can be found in the Data Structures docs. When using the Donut chart type, the parsing object should have a key item that points to the value to look at. In this example, the Donut chart will show two items with values 1500 and 500.

Options

Use options prop to customize the chart level and dataset level. Configuration for the options can be found in the Options docs.

Chart description

Use chartDescription prop to describe the chart, which will be shown in the chart description accordion below the view data table accordion. The default value of chartDescription is null. Whether displayed or not, the chart description accordion, including its content, are announced as the “long description” for the chart.

Chart type

Use chartType prop to describe the type of Donut chart. The default value is Donut Chart.

Pattern donut chart

Use V1Charts.pattern prop in dataset to make patterns in the Donut chart, which helps viewers with vision deficiencies. Refer to the Patternomaly library to generate patterns to fill datasets.

Title offset

Use titleOffset prop to change the heading level of graph title in a page. The default value is 1. You can use titleOffset=7.

Data labels

Use datalabels plugins option to add custom labels to the Donut chart.datalabels can also be configured in dataset level, as shown below. More details for customizing datalabels can found here Datalabels

Hiding dropdowns

Use the hideDataTable prop to remove the "View Data Table" accordion dropdown below the chart. Use the hideDownloadDropdown prop to remove the download options dropdown in the upper right corner of the chart. The default setting for both options is false.

Showing dropdowns

Use the openDataTable prop to expand the "View Data Table" accordion dropdown below the chart by default. The default is false. Setting to true expands the accordion by default, while setting it to 'always' prevents the accordion from being collapsible, and is thus always open.

Custom Download

Use the customDownload prop to provide your own download handler. Return false to fall back to the default download for specific formats. This example creates a custom PDF with header, footer, and centered chart.

Note: Use doughnut for chart config overrides of chart.js defaults instead of donut

V1Charts.Donut Props

Prop Name	Type	Default	Description
chartDescription	string	-	Description of the chart
chartType	string	Donut Chart	Describes type of the chart
customDownload	function	-	Custom download handler function. Receives (format, chartRef, headingContainerId, type) as parameters. Return false to use the default download for specific formats.
data	object	-	Data input object for chart
hideDataTable	bool	false	hides the "View Data Table" accordion dropdown
hideDownloadDropdown	bool	false	hides the download options dropdown
openDataTable	bool | "always"	false	opens the "View Data Table" accordion dropdown by default
options	object	-	Custom chart options object
subtitle	string	-	Subtitle for the chart
title	string	-	Title for the chart
titleOffset	number	-	Heading level of chart title
xAxisLabel	string	-	Label for the X-axis
yAxisLabel	string	-	Label for the Y-axis

Chart Classes

Class Name	Description
.abyss-chart-canvas	Chart canvas element
.abyss-chart-canvas-container	Chart canvas container
.abyss-chart-canvas-header-wrapper	Chart canvas header wrapper element
.abyss-chart-canvas-music	Chart canvas keyboard navigation element
.abyss-chart-canvas-wrapper	Chart canvas wrapper element
.abyss-chart-container	Chart container
.abyss-chart-download-dropdown	Chart download options dropdown
.abyss-chart-heading-container	Chart heading container
.abyss-chart-heading-wrapper	Chart heading wrapper
.abyss-chart-subtitle	Chart subtitle
.abyss-chart-title	Chart title

Chart accessibility requirements

• Text contrast must be 4.5:1 or greater
• Single chart bar color contrast must be 3:1 or greater
• Donut segments must be more than a difference in color
  • For donut charts: use patterns

Chart “long description”

• Whether displayed or not, the chart description accordion, including its content, are announced as the “long description” for the chart.

Reduced Motion

Animations and transitions that have been changed when a user has prefers-reduced-motion set to reduced for all Data Visualizations:

• No inflation of bars, sections or lines upon initial data rendering
• Data point tooltip navigation has animation removed
• View Data Table Accordion has transitions removed

Keyboard Interactions

Key	Description
Tab	Moves focus to the next focusable element; focuses the canvas chart
Space	When focus is on the canvas, pressing Space will focus the first data point of the first dataset in the chart
Arrow Right	Moves focus to the next data point
Arrow Left	Moves focus to the previous data point
Home	Moves focus to first data point of current dataset
End	Moves focus to last data point of current dataset

Known screen reader issues

NVDA and JAWS

Datapoint navigation announce tooltip content twice

• The second time includes chart name