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.

Line Chart

A line chart (or line graph) is a data visualization component that displays information as a series of data points connected by straight line segments on an X-Y axis. It is primarily used to show trends, changes, or comparisons in continuous data over time or across ordered categories.

The horizontal (X) axis typically represents time or categories, while the vertical (Y) axis displays quantitative values. Line charts can present single or multiple data series, making them effective for both simple and comparative analyses.

Component Example

About the line chart component

The line chart component visually communicates information through connected points, allowing users to quickly understand performance trends, fluctuations, or relationships between multiple variables.

It supports:

• Single or Multiple Series: Display one or more lines to compare different data sets.
• Customizable Axes: Both X and Y axes can be labeled for clarity.
• Legend: A legend differentiates between multiple series, using distinct colors, shapes, or line styles.
• States: Includes hover and focus states, with tooltips on hover to display precise data values.

When to use a line chart

Use a Line Chart in clinical settings when you need to:

• Track Patient Vital Signs Over Time: Visualize trends in heart rate, blood pressure, respiratory rate, or temperature to monitor patient stability or response to treatment.
• Monitor Lab Results or Biomarkers: Show fluctuations in blood glucose, cholesterol, or other lab values, making it easier to detect patterns or anomalies.
• Compare Pre- and Post-Treatment Outcomes: Illustrate changes in test results, such as improvement in kidney function or reduction in inflammation markers, before and after an intervention.
• Display Disease Progression or Recovery: Track the course of chronic conditions (e.g., Crohn’s disease, diabetes) and communicate expected outcomes or risks.

Avoid line charts when:

• Display Categorical or Static Data: Presenting categorical or one-time data like diagnosis types, patient gender distribution, or insurance types (use a different type of chart).
• Visualize Infrequent or Irregular Data Points: The data is infrequent or not continuous, making trends misleading or hard to interpret.
• Show a Snapshot or Single-Point Data: You need to show a snapshot of current patient data rather than progress or history (use cards, tables, or bar charts instead).

Best practices

• Keep it Simple: Limit to 4 lines per chart to avoid clutter and ensure readability.
• Consistent Scales: Use the same scale for axes when comparing multiple charts or series.
• Label Clearly: Ensure axes, series, and data points are well-labeled.
• Appropriate Intervals: Choose time or category intervals that make trends clear but do not introduce unnecessary noise.
• Legend Use: Always provide a clear legend when displaying multiple series, and differentiate lines and shape with more than just color (e.g., square or circles).
• Start Axes at Zero: Where possible, start the Y-axis at zero to avoid misleading trends.

Bar Chart

A bar chart is a data visualization component that displays information using rectangular bars to represent values across discrete categories. It is primarily used to compare quantities or frequencies between different groups, making it ideal for categorical data or snapshot comparisons.

In a bar chart, the X-axis typically represents categories (e.g., appointments, medication names, risk types), while the Y-axis represents quantitative values. Bars can be displayed vertically and may show a single series or multiple grouped values for side-by-side comparison. Bar charts are useful for surfacing differences between categories in a way that is easy to scan and interpret, especially in clinical dashboards or reporting contexts.

Component Example

About the bar chart component

The bar chart component visually represents values using vertical rectangular bars, making it ideal for comparing quantities across discrete categories. It enables users to quickly spot differences or trends in values across groups or classifications.

It supports:

• Single or two series: Each category can display one bar or two grouped bars side-by-side for comparison.
• Categorical X-axis: The X-axis represents categories (e.g., departments, metrics, or appointments).
• Quantitative Y-axis: The Y-axis shows numerical values for each bar.
• Legend: legend differentiates between multiple series, using distinct colors or pattern styles.
• States: Includes hover and focus states, with tooltips on hover to display precise data values.

When to use a bar chart

Use a Bar Chart in clinical or operational settings when you need to:

• Compare values across categories: Visualize how data points differ by group (e.g., risk types, site locations, medications).
• Show snapshots of data: Display values at a single point in time or over defined intervals (e.g., patient counts per department).
• Highlight relative differences: Emphasize the magnitude between categories in a format that’s scannable and easy to interpret.
• Display disease progression or recovery: Track the course of chronic conditions (e.g., Crohn’s disease, diabetes) and communicate expected outcomes or risks.

Avoid bar charts when:

• Showing trends over time: Use a line chart instead if you need to visualize change over a continuous time range.
• Needing stacked comparisons: This bar chart does not support stacked bars. Use a different chart type if visualizing part-to-whole relationships.

Best practices

• Keep it simple: Limit to one or two bars per category for clarity and readability.
• Group bars clearly: When comparing two data sets, there should be color distinctions between the data sets.
• Label clearly: Ensure both axes and categories are well-labeled.
• Consistent scales: Use consistent Y-axis scales across multiple bar charts for accurate visual comparisons.
• Avoid overcrowding: Use bar charts with a manageable number of categories to prevent visual noise.
• Use color intentionally: Differentiate groups using design system-approved colors and always pair with labels for accessibility.
• Start axes at zero: Always begin the Y-axis at zero to avoid misrepresenting differences between bars.

Reference lines and tooltip

Reference lines

Reference lines are visual markers used to communicate thresholds, targets, or normal ranges within the line chart. These lines are not part of the data series but provide helpful contextual guidance that helps users interpret values against meaningful clinical or operational benchmarks.

• Displayed as dashed light gray lines to visually distinguish them from the data series.
• They are independent of the dataset count; reference lines are not tied to any specific data series.
• Typically used to indicate upper or lower bounds (e.g., “Systolic High”, “Diastolic High”).
• Labeling for reference lines should be concise and clear, and aligned near the Y-axis value they represent.

These lines serve as visual anchors on the chart, helping clinicians and analysts quickly assess whether a data point is within, above, or below the expected range.

To support accessibility, a visually hidden list of reference lines and their values is included in the accessibility tree. This ensures that screen reader users have access to the same interpretive context, allowing them to understand which thresholds exist and how they relate to the presented data.

Tooltip

The Line and Bar Chart includes an interactive tooltip that appears when users hover over any data point. This tooltip improves readability and comprehension of exact data values and supports dense clinical data exploration.

Tooltip content and structure:

• Displays the X-axis value at the top (e.g., a full date: “January 13, 2025”).
• Below the date, the tooltip displays one or more rows, each showing:
  • The Y-axis label (e.g., “Systolic” or “Diastolic”)
  • The value associated with that point

When multiple datasets share the same X value:

• Tooltip shows the X-axis value once at the top.
• Then, includes a separate row for each dataset, each with its corresponding label and value.

Behavioral expectations:

• The tooltip should remain visible while the cursor is over a data point.
• The positioning should dynamically adjust to avoid clipping or overlapping important chart elements.
• Tooltip content should never obstruct the user from seeing the chart lines or data markers beneath.

Accessibility

Line and marker styles for accessibility

To ensure accessibility and visual clarity, each line in the graph must be distinct and easily identifiable using a combination of color, line style, and marker shape.

Use only colors from the approved graph palette:

All colors in this palette meet WCAG AA contrast requirements for graphical objects on a white background and are tested to be distinguishable for users with common types of color vision deficiencies.

In addition to color:

• Lines may be styled as solid or dashed to support further differentiation.

  Line	Style
  	solid
  	dashed

• Data points should be marked with unique shapes such as circles or squares the same color as the line.

  Marker	Style
  	circle
  	square

• For accessibility, each line in the chart must use a unique combination of color, line style, and marker shape. Do not rely on color alone to convey meaning.

Responsive design

The Line Chart and Bar Chart components are fully responsive and adapts its layout supporting all screen sizes.

• Axes, lines, legends, and labels resize and reposition automatically based on the screen width.
• On small screens, X- and Y-axis tick labels use a smaller font size to improve legibility and allow sufficient space for the chart to render without overlapping elements.
• This responsiveness ensures that users can view and interpret data clearly, regardless of the screen size or device they are using.

At screen widths of 480px and below, the chart’s container is capped at a maximum width of 480px, and a horizontal scrollbar appears below the chart. This scrollbar allows users to:

• Scroll to access all data points, ensuring that no content is hidden off-screen.
• Maintain a consistent scale and legibility of data labels rather than shrinking them to fit the container.

Chart description

A chart description provides assistive technology (AT) 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.

What it is:

• A text-based summary that describes the purpose of the chart, what kind of data is presented, and how to interpret it (e.g., “A line chart that tracks changes in systolic and diastolic blood pressure over time”).
• It is separate from the data table or chart title.

Best practices for writing chart descriptions:

• Be concise but informative: 1–2 sentences is ideal.
• State the chart’s purpose or trend (e.g., “This chart shows how the patient’s heart rate has changed over the past 30 days.”).
• Mention key metrics or ranges, especially if reference lines or thresholds are present.
• Be Objective: The description should only state the facts presented in the chart. Avoid making interpretations, conclusions, or judgments about the data.
• Final Copy Review: It’s highly recommended that the implementing teams have an accessibility (a11y) specialist review the final copy. This step is crucial for ensuring the descriptions are clear, accurate, and meet accessibility standards. The a11y specialist can provide an objective perspective and catch potential issues that might be overlooked.

Support for assistive technology (AT)

To ensure the Line Chart component is accessible to screen reader users:

• A visually hidden data table is included alongside the chart and is only available to screen reader (SR) users.
• The chart itself is hidden from screen readers, allowing SR users to navigate the underlying data through the accessible table instead.
• This approach ensures that screen reader users receive a clear, structured, and navigable representation of the chart’s content without unnecessary repetition or confusion.
• It is recommended that table header cells are meaningful and provide clear context for the data (e.g., using headers like “Date”, “Systolic Pressure (mmHg)”, or “Glucose Level (mg/dL)” rather than generic terms like “Value 1”, “Value 2”).

This structure helps ensure that all users, regardless of device or ability, can access and interpret the chart data in a way that is inclusive, efficient, and aligned with accessibility best practices.