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

Bar chart

Simple bar chart with title and subtitle props passed. xAxisLabel and yAxisLabel are required props for chart.

Border radius

Bar chart example showing different border radius by passing borderRadius property to each dataset.

Floating bar chart

Using [number, number][] as the type for data to define the beginning and end value for each bar. This is instead of having every bar start at 0.

Horizontal bar chart

Pass indexAxis property as y to chart options to show chart horizontal. Configuration for the options can be found in the Chart Js docs.

Stacked bar chart

Pass stacked property as true in scales for both x and y axises.

Stacked bar with groups

Pass stacked property as true in scales for both x and y axises and pass stack property to each dataset to group the stacks.

Data structure

Data in the datasets can be different structures and can be found in the Data Structures docs.

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 and will be shown in 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 Bar chart. The default value is Bar Chart.

Pattern bar chart

Use V1Charts.pattern prop in dataset to make patterns in the bar chart which helps viewers with vision deficiencies. Refer 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.

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.

V1Charts.Bar Props

Prop Name	Type	Default	Description
chartDescription	string	-	Description of the chart
chartType	string	Bar 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
• Multiple dataset must be more than a difference in color
  • For bar 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
Page Down	Moves focus to next dataset at current position (if not currently on last dataset)
Page Up	Moves focus to previous dataset, or “all datasets” for stacked bar at current position (if not currently on first or all datasets)
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