Component

ba-chart-price

Provides customers with a visual representation of prices, allowing them to easily identify and select their preferred option

Airframe

Active

Figma

Web Components

Active

Storybook

GitHub

React

Planned

React Native

Planned

Design

Code

Accessibility

Anatomy

Label

Describes what the price row represents, for example a day or month

Price row

Shows the price as a bar, sized relative to the other prices in the chart. Rows with a price are links; rows without a price show the noPriceText fallback instead

Expand button

Shown when showFirst is set, this reveals the remaining rows that are hidden by default

Design Documentation

Ensure the chart has enough horizontal space to render effectively, ideally spanning the full width of the container or screen. When the chart is restricted to a smaller width, it becomes challenging for users to perceive the difference between the widths of bars, especially when prices are close in value.

This is particularly important for users who increase font sizes for accessibility, as it can compress the available space and reduce the visual distinction between items. It also affects clarity in cases of international prices and multilingual text, where labels may be longer or more complex, crowding the display

If your price list is long, enable the "show first" functionality to automatically limit the number of initially visible prices. This keeps the chart concise and prevents overwhelming users with too much data

Customise the button text to offer users more specific information about what they will see when they expand the list. For example, instead of a generic "Show more," use contextual text like "Show next 6 months" or "Show top 10 prices".

Ensure the price range is balanced by avoiding setting a price significantly higher than the rest of the prices in the list. This will cause the other bars to appear too narrow, making it difficult for users to discern the differences between the smaller values.

Live Demo

<ba-chart-price show-first="6"></ba-chart-price>

<script>
(() => {
    const el = document.querySelector('ba-chart-price');
    el.data = [
      {
        label: 'Text',
        pricePrefix: 'From',
        price: '£623',
        href: "#url"
      },
      {
        label: 'Text',
        pricePrefix: 'From',
        price: '£850',
        href: "#url"
      },
      {
        label: 'Text',
        noPriceText: 'No flights available',
      },
      {
        label: 'Text',
        pricePrefix: 'From',
        price: '£915',
        href: "#url"
      },
      {
        label: 'Text',
        pricePrefix: 'From',
        price: '£321',
        href: "#url"
      },
      {
        label: 'Text',
        pricePrefix: 'From',
        price: '£468',
        href: "#url"
      },
      {
        label: 'Text',
        pricePrefix: 'From',
        price: '£812',
        href: "#url"
      },
      {
        label: 'Text',
        pricePrefix: 'From',
        price: '£743',
        href: "#url"
      },
      {
        label: 'Text',
        pricePrefix: 'From',
        price: '£425',
        href: "#url"
      },
      {
        label: 'Text',
        pricePrefix: 'From',
        price: '£356',
        href: "#url"
      },
      {
        label: 'Text',
        pricePrefix: 'From',
        price: '£459',
        href: "#url"
      },
      {
        label: 'Text',
        pricePrefix: 'From',
        price: '£621',
        href: "#url"
      }
    ];
})();
</script>

Properties and attributes

Property	Attribute	Description	Type	Default
`collapseButtonText`	`collapse-button-text`	Text to show on the button in open state	`string \| undefined`	`undefined`
`data`(required)	`data`	Data to display in the chart	`{ label: string; price?: string \| undefined; pricePrefix?: string \| undefined; href?: string \| undefined; noPriceText?: string \| undefined; convertedPrice: number; percentage: number; }[]`	`undefined`
`expandButtonText`	`expand-button-text`	Text to show on the button in closed state	`string \| undefined`	`undefined`
`showFirst`	`show-first`	How many rows to show before the expand button is shown	`string \| undefined`	`undefined`

Permitted ARIA roles

None

Slots

No slotted content available for this component.

Parent components

ba-chart-price can be slotted into:

Usage

Basic usage

The list of data to be displayed in the chart is passed to the data property.

A chart that shows prices for January, February, March, and April.

<ba-chart-price></ba-chart-price>

<script>
  const chartPrice = document.querySelector('ba-chart-price');
  chartPrice.data = [
    { label: 'January', price: '£100', href: '/january' },
    { label: 'February', price: '£200', href: '/february' },
    { label: 'March', price: '£300', href: '/march' },
    { label: 'April', price: '£400', href: '/april' }
    // etc
  ];
</script>

Showing a shortened list, with the option to expand

The showFirst property can be used to show a shortened list of items, with the option to expand the list to show all items.

A chart that shows prices for the first 6 months of the year and hides the rest behind an expandable section

<ba-chart-price show-first="6"></ba-chart-price>

<script>
  const chartPrice = document.querySelector('ba-chart-price');
  chartPrice.data = [
    { label: 'January', price: '£100', href: '/january' },
    { label: 'February', price: '£200', href: '/february' },
    { label: 'March', price: '£300', href: '/march' },
    { label: 'April', price: '£400', href: '/april' }
    // etc
  ];
</script>

Customising the expand and collapse buttons

The expandButtonText and collapseButtonText properties can be used to set the text on the expand and collapse buttons.

A modification to the previous example that adds extra context to describe what will happen when clicked

<ba-chart-price show-first="6" expand-button-text="Show next 6 months" collapse-button-text="Hide next 6 months"></ba-chart-price>

<script>
  const chartPrice = document.querySelector('ba-chart-price');
  chartPrice.data = [
    { label: 'January', price: '£100', href: '/january' },
    { label: 'February', price: '£200', href: '/february' },
    { label: 'March', price: '£300', href: '/march' },
    { label: 'April', price: '£400', href: '/april' }
    // etc
  ];
</script>

Providing a fallback for missing prices

The noPriceText property can be used to show a value for items that do not have a price.

Note: If the price and noPriceText properties are both provided, noPriceText will take precedence.

Showing a "No flights available" message in February using noPriceText

<ba-chart-price></ba-chart-price>

<script>
  const chartPrice = document.querySelector('ba-chart-price');
  chartPrice.data = [
    { label: 'January', price: '£100', href: '/january' },
    { label: 'February', noPriceText: 'No flights available' },
    { label: 'March', price: '£300', href: '/march' },
    { label: 'April', price: '£400', href: '/april' }
    // etc
  ];
</script>

Guidelines

Including a heading before a chart helps users understand the context of the data they are viewing. Even if the context is clear for sighted users from the surrounding content, a heading is still beneficial for screen readers, as they often navigate a page by using headings alone. If necessary, the heading can be visually hidden from sighted users using the ba-u-visually-hidden-text class, while remaining accessible to screen readers.

State: Previous element in DOM has focus

⇥ Tab

First ba-chart-price row with a price receives focus

State: A ba-chart-price row link has focus