ba-chart-price

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

Figma GitHub Storybook

<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>

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.

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.

Code

Properties & 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

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
  ];

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
  ];

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
  ];

Providing a fallback for missing prices

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

Note: If the price and noPriceText properties are provided the 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
  ];