Skip to main content

V1Line

A graphical representation of data in a line-shaped graph.

github
View source code
figma
View design
V1 components are not compatible with the flattenTokens hook or the DefaultPropsProvider, nor can they be themed using component-level design tokens.
A future redesign will deliver V2 versions of these components and make them compatible with these features.
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 Jsopens in a new window 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 Structuresopens in a new window docs.

Options​

Use options prop to customize the chart level and dataset level. Configuration for the options can be found in the Optionsopens in a new window 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​

Name
Type
DefaultRequiredA11yDescription
chartDescription
string | undefined
Description read by screen readers, since the chart itself conveys no information to assistive technology.
chartType
string | undefined
'Line Chart'
Describes type of chart
className
string | undefined
CSS class name to apply to each element within the component
css
CSSProperties | Partial<Record<"abyss-chart-container" | "abyss-chart-canvas-wrapper" | "abyss-chart-canvas-header-wrapper" | "abyss-chart-heading-container" | ... 6 more ... | "abyss-chart-canvas-music", CSSProperties>> | undefined
Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation
See CSS Prop Styling for more information
customDownload
((format: string, chartRef: any, headingContainerId: string) => false | void) | undefined
Custom download handler function. Receives (format, chartRef, headingContainerId) as parameters.
Return false to use the default download for specific formats.
data
ChartData<keyof ChartTypeRegistry, (number | Point | BubbleDataPoint | [number, number] | null)[], unknown>
Data input object for the chart; also powers the rows of the accessible "View data table" alternative so screen reader users can access the same data.
data-testid
string | undefined
Suffix used to create a unique ID used for automated testing
See Component Testing for more information
hiddenFrom
Breakpoint | undefined
When defined, the component is hidden once the screen width reaches the specified breakpoint.
hideDataTable
boolean | undefined
hides the "View Data Table" accordion dropdown
hideDownloadDropdown
boolean | undefined
hides the download options dropdown
openDataTable
boolean | "always" | undefined
false
sets the "View Data Table" accordion dropdown open on default
options
any
{}
Custom chart options object
slotProps
Partial<Record<string, SlotPropsValue<string>>> | undefined
Props to pass to individual internal slots of the component, keyed by the slot name
(e.g. 'button-root'). Supports className, css, style, aria-*, data-*,
data-testid, and nested slotProps for child Abyss components.
See slotProps for more information
subtitle
string | undefined
Subtitle for the chart
title
string | undefined
Title for the chart; also used as the accessible caption for its data-table alternative.
titleOffset
number | undefined
1
Heading level of chart title
visibleFrom
Breakpoint | undefined
When defined, the component is hidden until the screen width reaches the specified breakpoint.
xAxisLabel
string
Label for the X-axis; also used as a column header in the accessible data-table alternative.
yAxisLabel
string
Label for the Y-axis; also used as a column header in the accessible data-table alternative.

Chart Classes​

Class NameDescription
.abyss-chart-canvasChart canvas element
.abyss-chart-canvas-containerChart canvas container
.abyss-chart-canvas-header-wrapperChart canvas header wrapper element
.abyss-chart-canvas-musicChart canvas keyboard navigation element
.abyss-chart-canvas-wrapperChart canvas wrapper element
.abyss-chart-containerChart container
.abyss-chart-download-dropdownChart download options dropdown
.abyss-chart-heading-containerChart heading container
.abyss-chart-heading-wrapperChart heading wrapper
.abyss-chart-subtitleChart subtitle
.abyss-chart-titleChart 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​

KeyDescription
TabMoves focus to the next focusable element; focuses the canvas chart
SpaceWhen focus is on the canvas, pressing Space will focus the first datapoint of the first dataset in the chart
Arrow RightMoves focus to the next data point
Arrow LeftMoves 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)
HomeMoves focus to first data point of current dataset
EndMoves 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
Table of Contents