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

Line chart

Simple line chart with two dataSets having title and subtitle props passed. xAxisLabel and yAxisLabel are required props for chart.

Multi axis line chart

Pass yAxisID to each dataSet and define the axis in the scales of the chart options passing in options prop to the chart. Configuration for the options can be found in the Chart Js docs.

Point styling

Use pointStyle prop in dataset to change the representation of the point on the chart and also can adjust the radius and background colors of the point by passing point properties like pointRadius,pointHoverRadius, pointHoverBackgroundColor.

Line segment styling

Using helper functions to style each segment. Gaps in the data ('skipped') are set to dashed lines and segments with values going 'down' are set to a different color.

Stepped line charts

Pass stepped prop in dataset as true to make line chart styled as stepped.

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 line chart. The default value is Line Chart.

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.Line Props

Prop Name	Type	Default	Description
chartDescription	string	-	Description of the chart
chartType	string	Line Chart	Describes type of the chart
customDownload	function	-	Custom download handler function. Receives (format, chartRef, headingContainerId) 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 line color contrast must be 3:1 or greater
• Multiple dataset must be more than a difference in color
  • For Line charts: Use change line type (dots, dashes) and icons for data points

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 cnavas chart
Space	When focus is on the canvas, pressing Space will focus the first datapoint 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 at current position (if not currently on first dataset)
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