Skip to main content

V1Bar

A graphical representation of data in a bar-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';

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 Jsopens in a new window 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 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 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 Patternomalyopens in a new window 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​

Name
Type
DefaultRequiredA11yDescription
chartDescription
string | undefined
Description read by screen readers, since the chart itself conveys no information to assistive technology.
chartType
string | undefined
'Bar 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 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​

KeyDescription
TabMoves focus to the next focusable element; focuses the canvas chart
SpaceWhen focus is on the canvas, pressing Space will focus the first data point 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 UpMoves focus to previous dataset, or "all datasets" for stacked bar at current position (if not currently on first or all datasets)
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