Chart

The Chart component is a foundational visualization container used to render various types of data charts, such as Line Charts and Bar Charts. It provides a flexible and accessible framework for presenting structured numerical data in a graphical format, enabling users to identify patterns, trends, and comparisons at a glance.

The Chart component handles shared structural elements, like axis rendering, legends, labels, tooltips, and responsive behavior, while delegating specific visual behavior to the selected chart type (e.g., line or bar). This modular approach allows for consistency in layout and accessibility while supporting multiple data visualization formats.

You can find more information on the Clinical Design System documentation site

Installation instructions

yarn add @department-of-veterans-affairs/clinical-design-system-chart npm install @department-of-veterans-affairs/clinical-design-system-chart

Technical Documentation

Props

title*
string
	-
Sample Line Chart
width
Any valid CSS width value like "100%", "400px", "auto", or "fit-content". Note: setting a pixel value here will disable the responsiveness of the chart.
string


height
The number of pixels that the SVG should render as. Default is 400.
number


id*
string
	-
example
xAxisLabel*
string
	-
X Axis
yAxisLabel*
string
	-
Y Axis
type*
"line""bar"
	-
line
bar
datasets*
An array of datasets to plot. Each dataset includes a name and an array of { x, y } points. Only the first four datasets will be rendered for line charts and for bar chart, only 2 datasets are valid. Datasets are displayed in the order they appear in the array, which is also reflected in the visually hidden accessibility table. Currently, only dates and numbers are valid for line chart x values and dates are strings are valid for bar chart x values. Only numbers are valid for y values for both line and bar charts. Line and bar charts have extra configurations to change the styling. If patterns are desired for bar charts, both the pattern and patternColor dataset property must be set. Click on the "Show code" button in the Stories below to view more property details. This information is subject to change as more types of Charts are added.
LineChartDataset[] | BarChartDataset[]
	-
[
{...} 5 keys{...} 5 keys]
description*
A chart description provides assistive technology users with a brief, meaningful summary of what the chart represents and how to interpret it. This description is read aloud by screen readers and serves as an alternative to visually scanning the chart or tooltip interactions. The description will render below the chart title in the DOM and cannot be set to an empty string. Please visit the documentation site for more information: https://department-of-veterans-affairs.github.io/clinical-design/components/chart#accessibility
string
	-
A sample line chart that visualizes data.
referenceLines
An array of reference lines to plot. Each reference line includes a value and a label. The value should be a number and the label should be a string.
ReferenceLine[]
	[]
margin
Partial<{ top: number; right: number; bottom: number; left: number; }>