Charts Line charts

Overview

A line chart uses lines of different colours connecting data points to display data.

Important information:

The code to build the chart examples are provided in this page. For further guidance on how to use and implement the line charts, please see the Line chart page in the Data visualisation section.

Line chart

Example Line Chart contents

Nunjucksfor Example Line Chart
Nunjucks macro optionsfor Example Line Chart
HTMLfor Example Line Chart

Nunjucks

{% from "components/chart/_macro.njk" import onsChart %}

{{
    onsChart({
        "chartType": "line",
        "description": "Line chart showing the annual rate of inflation for the Consumer Prices Index including owner occupiers’ housing costs (CPIH) and its components.",
        "theme": "primary",
        "title": "Sales volumes and values saw moderate growth in July 2024",
        "subtitle": "Figure 6: Upward contribution from housing and household services (including energy) saw the annual CPIH inflation rate rise",
        "id": "id",
        "headingLevel": 4,
        "caption": "Source: Monthly Business Survey, Retails Sales Inquiry from the Office for National Statistics",
        "download": {
            'title': 'Download Figure 1 data',
            'itemsList': [
            {
                "text": "Excel spreadsheet (XLSX format, 18KB)",
                "url": "#"
            },
            {
                "text": "Simple text file (CSV format, 25KB)",
                "url": "#"
            },
            {

                "text": "Image (PNG format, 25KB)",
                "url": "#"
            }
        ]},
        "footnotes": {
            "title": "Footnotes",
            "content": "<ol><li>Non-store retailing refers to retailers that do not have a store presence. While the majority is made up of online retailers, it also includes other retailers, such as stalls and markets.</li><li>More data are available in our Retail Sales Index datasets.</li></ol>"
        },
        "legend": true,
        "xAxis": {
            "title": "Year",
            "type": "linear",
            "labelFormat": "{value:,.f}",
            "categories": [
                'Oct 2014',
                'Nov 2014',
                'Dec 2014',
                'Jan 2015',
                'Feb 2015',
                'Mar 2015',
                'Apr 2015',
                'May 2015',
                'Jun 2015',
                'Jul 2015',
                'Aug 2015',
                'Sep 2015',
                'Oct 2015',
                'Nov 2015',
                'Dec 2015',
                'Jan 2016',
                'Feb 2016',
                'Mar 2016',
                'Apr 2016',
                'May 2016',
                'Jun 2016',
                'Jul 2016',
                'Aug 2016',
                'Sep 2016',
                'Oct 2016',
                'Nov 2016',
                'Dec 2016',
                'Jan 2017',
                'Feb 2017',
                'Mar 2017',
                'Apr 2017',
                'May 2017',
                'Jun 2017',
                'Jul 2017',
                'Aug 2017',
                'Sep 2017',
                'Oct 2017',
                'Nov 2017',
                'Dec 2017',
                'Jan 2018',
                'Feb 2018',
                'Mar 2018',
                'Apr 2018',
                'May 2018',
                'Jun 2018',
                'Jul 2018',
                'Aug 2018',
                'Sep 2018',
                'Oct 2018',
                'Nov 2018',
                'Dec 2018',
                'Jan 2019',
                'Feb 2019',
                'Mar 2019',
                'Apr 2019',
                'May 2019',
                'Jun 2019',
                'Jul 2019',
                'Aug 2019',
                'Sep 2019',
                'Oct 2019',
                'Nov 2019',
                'Dec 2019',
                'Jan 2020',
                'Feb 2020',
                'Mar 2020',
                'Apr 2020',
                'May 2020',
                'Jun 2020',
                'Jul 2020',
                'Aug 2020',
                'Sep 2020',
                'Oct 2020',
                'Nov 2020',
                'Dec 2020',
                'Jan 2021',
                'Feb 2021',
                'Mar 2021',
                'Apr 2021',
                'May 2021',
                'Jun 2021',
                'Jul 2021',
                'Aug 2021',
                'Sep 2021',
                'Oct 2021',
                'Nov 2021',
                'Dec 2021',
                'Jan 2022',
                'Feb 2022',
                'Mar 2022',
                'Apr 2022',
                'May 2022',
                'Jun 2022',
                'Jul 2022',
                'Aug 2022',
                'Sep 2022',
                'Oct 2022',
                'Nov 2022',
                'Dec 2022',
                'Jan 2023',
                'Feb 2023',
                'Mar 2023',
                'Apr 2023',
                'May 2023',
                'Jun 2023',
                'Jul 2023',
                'Aug 2023',
                'Sep 2023',
                'Oct 2023',
                'Nov 2023',
                'Dec 2023',
                'Jan 2024',
                'Feb 2024',
                'Mar 2024',
                'Apr 2024',
                'May 2024',
                'Jun 2024',
                'Jul 2024',
                'Aug 2024',
                'Sep 2024',
                'Oct 2024'
            ],
            "tickIntervalDesktop": 15,
            "tickIntervalMobile": 30
        },
        "yAxis": {
            "title": "Sales",
            "labelFormat": "{value:,.f}"
        },
        "series": [
            {
                "name": 'CPIH',
                "data": [
                    1.3, 1.1, 0.7, 0.5, 0.4, 0.3, 0.3, 0.4, 0.3, 0.5, 0.4, 0.2, 0.2, 0.4, 0.5, 0.6,
                    0.6, 0.8, 0.7, 0.7, 0.8, 0.9, 1.0, 1.3, 1.3, 1.5, 1.8, 1.9, 2.3, 2.3, 2.6, 2.7,
                    2.6, 2.6, 2.7, 2.8, 2.8, 2.8, 2.7, 2.7, 2.5, 2.3, 2.2, 2.3, 2.3, 2.3, 2.4, 2.2,
                    2.2, 2.2, 2.0, 1.8, 1.8, 1.8, 2.0, 1.9, 1.9, 2.0, 1.7, 1.7, 1.5, 1.5, 1.4, 1.8,
                    1.7, 1.5, 0.9, 0.7, 0.8, 1.1, 0.5, 0.7, 0.9, 0.6, 0.8, 0.9, 0.7, 1.0, 1.6, 2.1,
                    2.4, 2.1, 3.0, 2.9, 3.8, 4.6, 4.8, 4.9, 5.5, 6.2, 7.8, 7.9, 8.2, 8.8, 8.6, 8.8,
                    9.6, 9.3, 9.2, 8.8, 9.2, 8.9, 7.8, 7.9, 7.3, 6.4, 6.3, 6.3, 4.7, 4.2, 4.2, 4.2,
                    3.8, 3.8, 3.0, 2.8, 2.8, 3.1, 3.1, 2.6, 3.2
                ]
            },
            {
                "name": 'Goods',
                "data": [
                    0.3, -0.2, -1.0, -1.5, -2.0, -2.1, -1.9, -1.8, -2.0, -1.8, -2.0, -2.4, -2.1,
                    -1.9, -2.1, -1.5, -1.6, -1.7, -1.6, -1.8, -1.7, -1.5, -1.4, -0.5, -0.4, 0.2,
                    0.7, 1.1, 1.9, 2.5, 2.4, 3.0, 2.6, 2.7, 3.1, 3.2, 3.3, 3.3, 3.4, 3.2, 3.0, 2.4,
                    2.6, 2.5, 2.5, 2.6, 2.7, 2.5, 2.3, 2.1, 1.8, 1.2, 1.3, 1.3, 1.4, 1.5, 1.5, 1.7,
                    1.2, 0.9, 0.4, 0.5, 0.6, 1.3, 1.0, 0.6, -0.4, -0.9, -0.5, 0.0, -0.2, -0.3, 0.1,
                    -0.7, -0.2, -0.2, -0.5, 0.1, 1.6, 2.3, 2.9, 2.5, 3.3, 3.5, 4.9, 6.5, 6.9, 7.2,
                    8.3, 9.4, 12.4, 12.4, 12.7, 13.6, 13.0, 13.2, 14.8, 14.1, 13.4, 13.3, 13.4,
                    12.7, 10.0, 9.7, 8.5, 6.1, 6.3, 6.2, 2.9, 2.0, 1.9, 1.8, 1.1, 0.9, -0.8, -1.3,
                    -1.4, -0.5, -0.9, -1.4, -0.3
                ]
            },
            {
                "name": 'Services',
                "data": [
                    2.2, 2.1, 2.1, 2.1, 2.2, 2.2, 2.0, 2.1, 2.1, 2.2, 2.2, 2.2, 2.1, 2.2, 2.5, 2.2,
                    2.3, 2.6, 2.4, 2.6, 2.7, 2.6, 2.7, 2.6, 2.5, 2.4, 2.5, 2.5, 2.6, 2.2, 2.8, 2.6,
                    2.5, 2.4, 2.5, 2.5, 2.4, 2.4, 2.2, 2.3, 2.1, 2.1, 1.9, 2.1, 2.0, 2.0, 2.2, 2.0,
                    2.1, 2.2, 2.1, 2.2, 2.2, 2.2, 2.5, 2.3, 2.2, 2.2, 2.0, 2.2, 2.2, 2.2, 1.9, 2.1,
                    2.2, 2.2, 1.9, 1.8, 1.7, 2.0, 1.0, 1.5, 1.5, 1.5, 1.6, 1.7, 1.6, 1.6, 1.7, 1.9,
                    2.1, 1.8, 2.7, 2.5, 2.9, 3.0, 3.1, 3.1, 3.2, 3.7, 4.1, 4.3, 4.5, 4.9, 5.1, 5.3,
                    5.3, 5.4, 5.8, 5.2, 5.6, 5.7, 6.0, 6.3, 6.3, 6.5, 6.1, 6.3, 6.2, 6.0, 6.0, 6.1,
                    6.0, 6.0, 6.0, 5.9, 6.0, 5.7, 5.9, 5.6, 5.6
                ]
            },
            {
                "name": 'CPIH excl energy, food, alcohol & tobacco',
                "data": [
                    1.5, 1.3, 1.4, 1.5, 1.4, 1.2, 1.1, 1.2, 1.0, 1.3, 1.2, 1.2, 1.3, 1.4, 1.5, 1.4,
                    1.4, 1.6, 1.5, 1.5, 1.6, 1.6, 1.5, 1.7, 1.6, 1.7, 1.8, 1.8, 2.1, 1.9, 2.4, 2.5,
                    2.4, 2.4, 2.6, 2.5, 2.5, 2.5, 2.3, 2.4, 2.2, 2.1, 2.0, 2.0, 1.8, 1.8, 1.9, 1.8,
                    1.8, 1.8, 1.8, 1.8, 1.8, 1.8, 1.7, 1.7, 1.7, 1.9, 1.5, 1.6, 1.7, 1.7, 1.4, 1.6,
                    1.7, 1.6, 1.5, 1.3, 1.5, 1.8, 1.0, 1.4, 1.5, 1.2, 1.5, 1.5, 1.1, 1.3, 1.5, 2.0,
                    2.3, 1.9, 2.9, 2.7, 3.1, 3.6, 3.8, 4.0, 4.6, 5.1, 5.4, 5.2, 5.2, 5.5, 5.6, 5.8,
                    5.8, 5.7, 5.8, 5.3, 5.7, 5.7, 6.2, 6.5, 6.4, 6.4, 5.9, 5.9, 5.6, 5.2, 5.2, 5.1,
                    4.8, 4.7, 4.4, 4.2, 4.2, 4.1, 4.3, 4.0, 4.1
                ]
            }
        ],
        "percentageHeightDesktop": 35,
        "percentageHeightMobile": 90,
        "fallbackImageUrl": '/img/small/line-chart-screenshot.png'
    })
}}

Nunjucks macro options

Name	Type	Required	Description
chartType	string	true if iframe not set	The type of chart to render. Supported types include: 'line', 'bar', 'column', 'scatter', 'columnrange', 'boxplot' and 'area'. Will be ignored if an iframe url is set.
unsupportedChartText	string	false	Optional text override to display after the chart type when it's not supported. Defaults to "chart type - chart type is not supported"
instructions	string	false	Instructions for keyboard users on how to interact with the chart. This text will be read aloud by screen readers to guide navigation and interaction.
theme	string	false	The theme to apply to the chart. Either `primary` or `alternate`. Defaults to `primary`. Will be ignored if an iframe url is set.
headingLevel	number	false	Number used to determine the heading level of the title. Use to ensure the title has a correct semantic order on the page. Accepts a value between 1 and 4, defaulting to 2 if not provided.
title	string	true	The main title of the chart.
subtitle	string	false	A subtitle that appears under the main title.
id	string	true	A unique identifier for the chart instance or iframe.
caption	string	false	A caption providing additional context for the chart.
description	string	true	A textual description of the chart for screen readers.
download	object	false	Object for (download)[#download] options.
legend	boolean	false	Whether the legend is displayed. Defaults to `true`. Note that legends are automatically hidden for single series charts. Will be ignored if an iframe url is set.
yAxis	object	true if iframe not set	Defines the vertical axis y-axis configuration parameters. Will be ignored if an iframe url is set.
xAxis	object	true if iframe not set	Defines the horizontal axis x-axis configuration parameters. Will be ignored if an iframe url is set.
series	array	true if iframe not set	The data series to be plotted, including labels and values. Will be ignored if an iframe url is set. Note: The number of series is limited by the selected theme - up to 6 series for the primary theme and 5 series for the alternate theme. Any additional series beyond these limits will be ignored and not displayed.
useStackedLayout	boolean	false	Determines whether the chart should use a stacked layout. It is useful only for bar and column charts. Will be ignored if an iframe url is set.
percentageHeightDesktop	integer	false	Sets the percentage plot height at desktop, relative to the width. If undefined the chart will fall back to the default height of 400px at desktop. Does not apply to bar charts. Will be ignored if an iframe url is set.
percentageHeightMobile	integer	false	Sets the percentage plot height at mobile, relative to the width. If undefined the chart will fall back to the default height of 400px at mobile. Does not apply to bar charts. Will be ignored if an iframe url is set.

annotations	array	false	An array of point annotations. Will be ignored if an iframe url is set.
rangeAnnotations	array	false	An array of range annotations. Will be ignored if an iframe url is set.
referenceLineAnnotations	array	false	An array of reference line annotations. Will be ignored if an iframe url is set.
estimateLineLabel	string	false	Label for the estimate line in the legend. Used in column charts with confidence intervals. Will be ignored if an iframe url is set.
uncertaintyRangeLabel	string	false	Label for the confidence interval in the legend. Used in column charts showing uncertainty ranges. Will be ignored if an iframe url is set.
iframeUrl	string	false	A url for a visualisation to display in an iframe instead of displaying a Highcharts chart.
footnotes	`Object<Footnotes>`	false	Footnotes to appear below the chart in a 'details' element
fallbackImageUrl	string	false	A url for a fallback image to display instead of the chart or iframe visualisation if JavaScript is disabled. If a fallback image is passed with an iframeUrl parameter, the iframe will be hidden for non-JavaScript users. If it is not passed, it is assumed the iframe content will provide a fallback image to be displayed inside the iframe.
fallbackImageAlt	string	false	Alt text for the fallback image - a short description only, as the description field describes the chart for screen readers. Defaults to "Fallback image for the chart as JavaScript is disabled"
iframeAspectRatio	string	false	Sets the aspect ratio for iframe charts. Only applicable when using an iframe chart. Acceptable values are 16-9, 4-3, 21-9, 1-1, 3-2, and 9-16. The value must be provided in the x-y format (e.g. 16-9). If an unsupported value is provided or a value is not provided, the aspect ratio will default to 16-9.

Download
Property	Type	Required	Description
title	string	false	The title displayed above the download options.
itemsList	array	false	An array of items available for download, each described by a (DownloadItem)[#DownloadItem].

DownloadItem
Property	Type	Required	Description
text	string	true	The label or description of the downloadable item.
url	string	true	The URL to the downloadable resource.

Y_Axis
Name	Type	Required	Description
title	string	true	The title text displayed on the y-axis. Note that for any chart type apart from bar charts, a maximum character limit of 50 characters is recommended to avoid the axis title being cut off at mobile.
labelFormat	string	false	A format string for the axis label. Examples of string formats can be found in these docs (opens in a new tab) .
tickIntervalMobile	number	false	The interval of the tick marks in axis units at mobile. Useful when you want to space out the labels (e.g. show every 2nd or 5th label).
tickIntervalDesktop	number	false	The interval of the tick marks in axis units at desktop. Useful when you want to space out the labels (e.g. show every 2nd or 5th label).
customReferenceLineValue	float or int	false	A custom value to display a darker reference line. If not supplied, the darker will appear at zero. The custom value is only used for column charts and line charts - for other chart types it will be ignored, and the darker line will appear at zero.
min	number	false	Sets the minimum value for the Y-axis. Relevant for Line, bar, area, column chart, column-range, boxplot and scatter charts.
max	number	false	Sets the maximum value for the Y-axis. Relevant for Line, bar, area, column chart, column-range, boxplot and scatter charts.
startOnTick	boolean	false	Align the axis to start on a tick. Relevant for Line, bar, area, column chart, column-range, boxplot and scatter charts.
endOnTick	boolean	false	Align the axis to end on a tick. Relevant for Line, bar, area, column chart, column-range, boxplot and scatter charts.

X_Axis
Name	Type	Required	Description
title	string	false	The title text displayed on the x-axis. Note: x-axis titles are not supported for bar chart types.
labelFormat	string	false	A format string for the x-axis label. Examples of string formats can be found in these docs (opens in a new tab) .
categories	array	false	Labels for each tick mark along the x-axis.
type	string	false	The type of axis. Can be one of `linear`, `logarithmic`, `datetime` or `category`. Defaults to linear.
tickIntervalMobile	number	false	The interval of the tick marks in axis units at mobile. Useful when you want to space out the labels (e.g. show every 2nd or 5th label).
tickIntervalDesktop	number	false	The interval of the tick marks in axis units at desktop. Useful when you want to space out the labels (e.g. show every 2nd or 5th label).
min	number	false	Sets the minimum value for the X-axis. Relevant only for scatter charts.
max	number	false	Sets the maximum value for the X-axis. Relevant only for scatter charts.
startOnTick	boolean	false	Align the axis to start on a tick. Relevant only for scatter charts.
endOnTick	boolean	false	Align the axis to end on a tick. Relevant only for scatter charts.

Series
Name	Type	Required	Description
name	string	true	The name of the series.
data	array	true	The data values for the series. Each value corresponds to a category on the x-axis.
dataLabels	boolean	false	Options for whether the DataLabel is displayed. Defaults to `false`. This option is only available for bar chart and clustered bar charts with two or fewer series, and 20 or fewer data points in any series.
marker	boolean	false	Options for whether the Marker is displayed on the data points. Defaults to `false`. This option is only available for line charts.
type	string	false	Specifies the configuration type to apply to the series. Supported types include 'line' and 'scatter'. By default, it aligns with the chart type. This is used when combining multiple chart types within a single chart. Note: Only the following chart type combinations are supported: "column with line" and "columnrange with scatter". For column with line, only one line series is supported. Additional line series will be ignored.
connectNulls	boolean	false	Whether to connect lines that have a data point missing. Only relevant for line charts.

Point annotations
Name	Type	Required	Description
text	string	true	The annotation text.
point	object	false	The x and y coordinates for the annotation
labelOffsetX (px)	int	true	The x offset in px of the label from the annotation point
labelOffsetY (px)	int	true	The y offset in px of the label from the annotation point

Point
Name	Type	Required	Description
xValue	float or int	true	The x axis value of the annotation. For category axes this is the zero based index of the x axis categories array. It must be an integer in this scenario.
yValue	float	true	The y axis value of the annotation

Range annotations
Name	Type	Required	Description
text	string	true	The annotation text.
range	Object	true	The xValue or yValue coordinates for the annotation
axis	string	true	The axis the range annotation should be applied to. Should be one of 'x' or 'y'. Note that for bar charts 'x' will be the vertical axis, and 'y' will be the horizontal axis.
labelInside	boolean	true	Whether the label for the range sits inside or outside the shaded area
labelOffsetX (px)	int	false	The horizontal offset in px of the label from it's default position. Ignored if labelInside is true.
labelOffsetY (px)	int	false	The vertical offset in px of the label from it's default position. Ignored if labelInside is true.
labelWidth (px)	int	false	The width of the label in pixels - the label text will wrap if it is wider than this value. If undefined, the label will be set to 150px wide.

Range
Name	Type	Required	Description
axisValue1	float or int	true	The starting point on the axis for the annotation. For category axes this is the zero based index of the categories array. It must be an integer in this scenario.
axisValue2	float or int	true	The ending pont on the axis for the annotation. For category axes this is the zero based index of the axis categories array. It must be an integer in this scenario.

Reference line annotations
Name	Type	Required	Description
text	string	true	The annotation text.
value	float or int	true	The x axis or y axis value for the annotation. For category axes this is the zero based index of the categories array. It must be an integer in this scenario.
axis	string	true	The axis the range annotation should be applied to. Should be one of 'x' or 'y'. Note that for bar charts 'x' will be the vertical axis, and 'y' will be the horizontal axis.
labelWidth (px)	int	false	The width of the label in pixels - the label text will wrap if it is wider than this value. If undefined, the label will be set to 150px wide.
labelOffsetX (px)	int	false	The horizontal offset in px of the label from it's default position.
labelOffsetY (px)	int	false	The vertical offset in px of the label from it's default position.

Footnotes
Name	Type	Required	Description
title	string	true	The title text for the footnotes heading
content	string	true	HTML content for the footnotes

HTML

<div data-highcharts-base-chart data-highcharts-type="line" data-highcharts-theme="primary"
  data-highcharts-title="Sales volumes and values saw moderate growth in July 2024" data-highcharts-id="id"
  data-highcharts-percentage-height-desktop="35" data-highcharts-percentage-height-mobile="90"
  data-highcharts-x-axis-tick-interval-mobile="30" data-highcharts-x-axis-tick-interval-desktop="15">
  <figure class="ons-chart" aria-describedby="chart-audio-description-id">
    <h4 class="ons-chart__title">Sales volumes and values saw moderate growth in July 2024</h4>
    <h5 class="ons-chart__subtitle">Figure 6: Upward contribution from housing and household services (including energy)
      saw the annual CPIH inflation rate rise</h5>
    <p class="ons-u-vh" id="chart-audio-description-id">Line chart showing the annual rate of inflation for the Consumer
      Prices Index including owner occupiers’ housing costs (CPIH) and its components.</p>
    <div data-highcharts-chart-container class="ons-chart__container" tabindex="0" role="region"
      aria-label="chart container" aria-describedby="chart-instructions-id">
      <div id="chart-instructions-id" class="ons-u-vh">Use the Tab key to move focus into the chart. Once inside, use
        the arrow keys to navigate between data points. As you move, tooltips will be announced to describe each point.
        Touch device users, explore by touch or with swipe gestures.</div>
      <div data-highcharts-chart class="ons-chart__chart"></div>
    </div>
    <noscript id="fallback-image--id">
      <img src="/img/small/line-chart-screenshot.png" alt="Fallback image for the chart as JavaScript is disabled"
        class="ons-chart__fallback-image" />
    </noscript>
    <figcaption class="ons-chart__caption">Source: Monthly Business Survey, Retails Sales Inquiry from the Office for
      National Statistics</figcaption>
  </figure>
  <h6 class="ons-chart__download-title">Download Figure 1 data</h6>
  <ol class="ons-list">
    <li class="ons-list__item">
      <a href="#" class="ons-list__link">Excel spreadsheet (XLSX format, 18KB)</a>
    </li>
    <li class="ons-list__item">
      <a href="#" class="ons-list__link">Simple text file (CSV format, 25KB)</a>
    </li>
    <li class="ons-list__item">
      <a href="#" class="ons-list__link">Image (PNG format, 25KB)</a>
    </li>
  </ol>
  <div id="footnotes--id" class="ons-details ons-js-details ons-u-mt-xl">
    <div class="ons-details__heading ons-js-details-heading" role="button">
      <h6 class="ons-details__title ons-u-fs-r--b">Footnotes</h6>
      <span class="ons-details__icon">
        <svg class="ons-icon" viewBox="0 0 8 13" xmlns="http://www.w3.org/2000/svg" focusable="false"
          fill="currentColor" role="img" aria-hidden="true">
          <path
            d="M5.74,14.28l-.57-.56a.5.5,0,0,1,0-.71h0l5-5-5-5a.5.5,0,0,1,0-.71h0l.57-.56a.5.5,0,0,1,.71,0h0l5.93,5.93a.5.5,0,0,1,0,.7L6.45,14.28a.5.5,0,0,1-.71,0Z"
            transform="translate(-5.02 -1.59)" />
        </svg></span>
    </div>
    <div id="footnotes--id-content" class="ons-details__content ons-js-details-content">
      <ol>
        <li>Non-store retailing refers to retailers that do not have a store presence. While the majority is made up of
          online retailers, it also includes other retailers, such as stalls and markets.</li>
        <li>More data are available in our Retail Sales Index datasets.</li>
      </ol>
    </div>
  </div>
  <!-- Set scripts to pass the config values as json to the JavaScript -->
  <!-- prettier-ignore-start -->
  <script type="application/json" data-highcharts-config--id>
    {
      "chart": {
        "type": "line"
      },
      "legend": {
        "enabled": true
      },
      "yAxis": {
        "title": {
          "text": "Sales"
        },
        "labels": {
          "format": "{value:,.f}"
        }
      },
      "xAxis": {
        "title": {
          "text": "Year"
        },
        "categories": ["Oct 2014", "Nov 2014", "Dec 2014", "Jan 2015", "Feb 2015", "Mar 2015", "Apr 2015", "May 2015",
          "Jun 2015", "Jul 2015", "Aug 2015", "Sep 2015", "Oct 2015", "Nov 2015", "Dec 2015", "Jan 2016", "Feb 2016",
          "Mar 2016", "Apr 2016", "May 2016", "Jun 2016", "Jul 2016", "Aug 2016", "Sep 2016", "Oct 2016", "Nov 2016",
          "Dec 2016", "Jan 2017", "Feb 2017", "Mar 2017", "Apr 2017", "May 2017", "Jun 2017", "Jul 2017", "Aug 2017",
          "Sep 2017", "Oct 2017", "Nov 2017", "Dec 2017", "Jan 2018", "Feb 2018", "Mar 2018", "Apr 2018", "May 2018",
          "Jun 2018", "Jul 2018", "Aug 2018", "Sep 2018", "Oct 2018", "Nov 2018", "Dec 2018", "Jan 2019", "Feb 2019",
          "Mar 2019", "Apr 2019", "May 2019", "Jun 2019", "Jul 2019", "Aug 2019", "Sep 2019", "Oct 2019", "Nov 2019",
          "Dec 2019", "Jan 2020", "Feb 2020", "Mar 2020", "Apr 2020", "May 2020", "Jun 2020", "Jul 2020", "Aug 2020",
          "Sep 2020", "Oct 2020", "Nov 2020", "Dec 2020", "Jan 2021", "Feb 2021", "Mar 2021", "Apr 2021", "May 2021",
          "Jun 2021", "Jul 2021", "Aug 2021", "Sep 2021", "Oct 2021", "Nov 2021", "Dec 2021", "Jan 2022", "Feb 2022",
          "Mar 2022", "Apr 2022", "May 2022", "Jun 2022", "Jul 2022", "Aug 2022", "Sep 2022", "Oct 2022", "Nov 2022",
          "Dec 2022", "Jan 2023", "Feb 2023", "Mar 2023", "Apr 2023", "May 2023", "Jun 2023", "Jul 2023", "Aug 2023",
          "Sep 2023", "Oct 2023", "Nov 2023", "Dec 2023", "Jan 2024", "Feb 2024", "Mar 2024", "Apr 2024", "May 2024",
          "Jun 2024", "Jul 2024", "Aug 2024", "Sep 2024", "Oct 2024"
        ],
        "type": "linear",
        "labels": {
          "format": "{value:,.f}"
        }
      },
      "series": [{
        "name": "CPIH",
        "data": [1.3, 1.1, 0.7, 0.5, 0.4, 0.3, 0.3, 0.4, 0.3, 0.5, 0.4, 0.2, 0.2, 0.4, 0.5, 0.6, 0.6, 0.8, 0.7, 0.7,
          0.8, 0.9, 1, 1.3, 1.3, 1.5, 1.8, 1.9, 2.3, 2.3, 2.6, 2.7, 2.6, 2.6, 2.7, 2.8, 2.8, 2.8, 2.7, 2.7, 2.5,
          2.3, 2.2, 2.3, 2.3, 2.3, 2.4, 2.2, 2.2, 2.2, 2, 1.8, 1.8, 1.8, 2, 1.9, 1.9, 2, 1.7, 1.7, 1.5, 1.5, 1.4,
          1.8, 1.7, 1.5, 0.9, 0.7, 0.8, 1.1, 0.5, 0.7, 0.9, 0.6, 0.8, 0.9, 0.7, 1, 1.6, 2.1, 2.4, 2.1, 3, 2.9,
          3.8, 4.6, 4.8, 4.9, 5.5, 6.2, 7.8, 7.9, 8.2, 8.8, 8.6, 8.8, 9.6, 9.3, 9.2, 8.8, 9.2, 8.9, 7.8, 7.9, 7.3,
          6.4, 6.3, 6.3, 4.7, 4.2, 4.2, 4.2, 3.8, 3.8, 3, 2.8, 2.8, 3.1, 3.1, 2.6, 3.2
        ],
        "marker": {
          "enabled": false
        },
        "dataLabels": {
          "enabled": false
        },
        "connectNulls": false,
        "type": "line"
      }, {
        "name": "Goods",
        "data": [0.3, -0.2, -1, -1.5, -2, -2.1, -1.9, -1.8, -2, -1.8, -2, -2.4, -2.1, -1.9, -2.1, -1.5, -1.6, -1.7,
          -1.6, -1.8, -1.7, -1.5, -1.4, -0.5, -0.4, 0.2, 0.7, 1.1, 1.9, 2.5, 2.4, 3, 2.6, 2.7, 3.1, 3.2, 3.3, 3.3,
          3.4, 3.2, 3, 2.4, 2.6, 2.5, 2.5, 2.6, 2.7, 2.5, 2.3, 2.1, 1.8, 1.2, 1.3, 1.3, 1.4, 1.5, 1.5, 1.7, 1.2,
          0.9, 0.4, 0.5, 0.6, 1.3, 1, 0.6, -0.4, -0.9, -0.5, 0, -0.2, -0.3, 0.1, -0.7, -0.2, -0.2, -0.5, 0.1, 1.6,
          2.3, 2.9, 2.5, 3.3, 3.5, 4.9, 6.5, 6.9, 7.2, 8.3, 9.4, 12.4, 12.4, 12.7, 13.6, 13, 13.2, 14.8, 14.1,
          13.4, 13.3, 13.4, 12.7, 10, 9.7, 8.5, 6.1, 6.3, 6.2, 2.9, 2, 1.9, 1.8, 1.1, 0.9, -0.8, -1.3, -1.4, -0.5,
          -0.9, -1.4, -0.3
        ],
        "marker": {
          "enabled": false
        },
        "dataLabels": {
          "enabled": false
        },
        "connectNulls": false,
        "type": "line"
      }, {
        "name": "Services",
        "data": [2.2, 2.1, 2.1, 2.1, 2.2, 2.2, 2, 2.1, 2.1, 2.2, 2.2, 2.2, 2.1, 2.2, 2.5, 2.2, 2.3, 2.6, 2.4, 2.6,
          2.7, 2.6, 2.7, 2.6, 2.5, 2.4, 2.5, 2.5, 2.6, 2.2, 2.8, 2.6, 2.5, 2.4, 2.5, 2.5, 2.4, 2.4, 2.2, 2.3, 2.1,
          2.1, 1.9, 2.1, 2, 2, 2.2, 2, 2.1, 2.2, 2.1, 2.2, 2.2, 2.2, 2.5, 2.3, 2.2, 2.2, 2, 2.2, 2.2, 2.2, 1.9,
          2.1, 2.2, 2.2, 1.9, 1.8, 1.7, 2, 1, 1.5, 1.5, 1.5, 1.6, 1.7, 1.6, 1.6, 1.7, 1.9, 2.1, 1.8, 2.7, 2.5,
          2.9, 3, 3.1, 3.1, 3.2, 3.7, 4.1, 4.3, 4.5, 4.9, 5.1, 5.3, 5.3, 5.4, 5.8, 5.2, 5.6, 5.7, 6, 6.3, 6.3,
          6.5, 6.1, 6.3, 6.2, 6, 6, 6.1, 6, 6, 6, 5.9, 6, 5.7, 5.9, 5.6, 5.6
        ],
        "marker": {
          "enabled": false
        },
        "dataLabels": {
          "enabled": false
        },
        "connectNulls": false,
        "type": "line"
      }, {
        "name": "CPIH excl energy, food, alcohol \u0026 tobacco",
        "data": [1.5, 1.3, 1.4, 1.5, 1.4, 1.2, 1.1, 1.2, 1, 1.3, 1.2, 1.2, 1.3, 1.4, 1.5, 1.4, 1.4, 1.6, 1.5, 1.5,
          1.6, 1.6, 1.5, 1.7, 1.6, 1.7, 1.8, 1.8, 2.1, 1.9, 2.4, 2.5, 2.4, 2.4, 2.6, 2.5, 2.5, 2.5, 2.3, 2.4, 2.2,
          2.1, 2, 2, 1.8, 1.8, 1.9, 1.8, 1.8, 1.8, 1.8, 1.8, 1.8, 1.8, 1.7, 1.7, 1.7, 1.9, 1.5, 1.6, 1.7, 1.7,
          1.4, 1.6, 1.7, 1.6, 1.5, 1.3, 1.5, 1.8, 1, 1.4, 1.5, 1.2, 1.5, 1.5, 1.1, 1.3, 1.5, 2, 2.3, 1.9, 2.9,
          2.7, 3.1, 3.6, 3.8, 4, 4.6, 5.1, 5.4, 5.2, 5.2, 5.5, 5.6, 5.8, 5.8, 5.7, 5.8, 5.3, 5.7, 5.7, 6.2, 6.5,
          6.4, 6.4, 5.9, 5.9, 5.6, 5.2, 5.2, 5.1, 4.8, 4.7, 4.4, 4.2, 4.2, 4.1, 4.3, 4, 4.1
        ],
        "marker": {
          "enabled": false
        },
        "dataLabels": {
          "enabled": false
        },
        "connectNulls": false,
        "type": "line"
      }]
    }
  </script>
  <!-- prettier-ignore-end -->
</div>

Annotations

If you need to add annotations to your line charts, there are various different annotations you can add. If you require guidance on using the annotations, please see Annotations in the Data Visualisation section.

Line chart with annotations
Line chart with reference line annotations
Line chart with range annotations inside
Line chart with range annotations outside left right
Line chart with range annotations outside top bottom

Line chart with annotations

Use this when you require annotations on your line charts.

Example Line Chart With Annotations contents

Nunjucksfor Example Line Chart With Annotations
Nunjucks macro optionsfor Example Line Chart With Annotations
HTMLfor Example Line Chart With Annotations

Nunjucks

{% from "components/chart/_macro.njk" import onsChart %}

{{
    onsChart({
        "chartType": "line",
        "description": "Line chart showing the annual rate of inflation for the Consumer Prices Index including owner occupiers’ housing costs (CPIH) and its components.",
        "theme": "primary",
        "title": "Sales volumes and values saw moderate growth in July 2024",
        "subtitle": "Figure 6: Upward contribution from housing and household services (including energy) saw the annual CPIH inflation rate rise",
        "id": "id",
        "headingLevel": 4,
        "caption": "Source: Monthly Business Survey, Retails Sales Inquiry from the Office for National Statistics",
        "download": {
            'title': 'Download Figure 1 data',
            'itemsList': [
            {
                "text": "Excel spreadsheet (XLSX format, 18KB)",
                "url": "#"
            },
            {
                "text": "Simple text file (CSV format, 25KB)",
                "url": "#"
            },
            {

                "text": "Image (PNG format, 25KB)",
                "url": "#"
            }
        ]},
        "legend": true,
        "xAxis": {
            "title": "Year",
            "type": "linear",
            "labelFormat": "{value:,.f}",
            "categories": [
                'Oct 2014',
                'Nov 2014',
                'Dec 2014',
                'Jan 2015',
                'Feb 2015',
                'Mar 2015',
                'Apr 2015',
                'May 2015',
                'Jun 2015',
                'Jul 2015',
                'Aug 2015',
                'Sep 2015',
                'Oct 2015',
                'Nov 2015',
                'Dec 2015',
                'Jan 2016',
                'Feb 2016',
                'Mar 2016',
                'Apr 2016',
                'May 2016',
                'Jun 2016',
                'Jul 2016',
                'Aug 2016',
                'Sep 2016',
                'Oct 2016',
                'Nov 2016',
                'Dec 2016',
                'Jan 2017',
                'Feb 2017',
                'Mar 2017',
                'Apr 2017',
                'May 2017',
                'Jun 2017',
                'Jul 2017',
                'Aug 2017',
                'Sep 2017',
                'Oct 2017',
                'Nov 2017',
                'Dec 2017',
                'Jan 2018',
                'Feb 2018',
                'Mar 2018',
                'Apr 2018',
                'May 2018',
                'Jun 2018',
                'Jul 2018',
                'Aug 2018',
                'Sep 2018',
                'Oct 2018',
                'Nov 2018',
                'Dec 2018',
                'Jan 2019',
                'Feb 2019',
                'Mar 2019',
                'Apr 2019',
                'May 2019',
                'Jun 2019',
                'Jul 2019',
                'Aug 2019',
                'Sep 2019',
                'Oct 2019',
                'Nov 2019',
                'Dec 2019',
                'Jan 2020',
                'Feb 2020',
                'Mar 2020',
                'Apr 2020',
                'May 2020',
                'Jun 2020',
                'Jul 2020',
                'Aug 2020',
                'Sep 2020',
                'Oct 2020',
                'Nov 2020',
                'Dec 2020',
                'Jan 2021',
                'Feb 2021',
                'Mar 2021',
                'Apr 2021',
                'May 2021',
                'Jun 2021',
                'Jul 2021',
                'Aug 2021',
                'Sep 2021',
                'Oct 2021',
                'Nov 2021',
                'Dec 2021',
                'Jan 2022',
                'Feb 2022',
                'Mar 2022',
                'Apr 2022',
                'May 2022',
                'Jun 2022',
                'Jul 2022',
                'Aug 2022',
                'Sep 2022',
                'Oct 2022',
                'Nov 2022',
                'Dec 2022',
                'Jan 2023',
                'Feb 2023',
                'Mar 2023',
                'Apr 2023',
                'May 2023',
                'Jun 2023',
                'Jul 2023',
                'Aug 2023',
                'Sep 2023',
                'Oct 2023',
                'Nov 2023',
                'Dec 2023',
                'Jan 2024',
                'Feb 2024',
                'Mar 2024',
                'Apr 2024',
                'May 2024',
                'Jun 2024',
                'Jul 2024',
                'Aug 2024',
                'Sep 2024',
                'Oct 2024'
            ],
            "tickIntervalDesktop": 10,
            "tickIntervalMobile": 30
        },
        "yAxis": {
            "title": "Sales",
            "labelFormat": "{value:,.f}"
        },
        "percentageHeightDesktop": 35,
        "percentageHeightMobile": 90,
        "series": [
            {
                "name": 'CPIH',
                "data": [
                    1.3, 1.1, 0.7, 0.5, 0.4, 0.3, 0.3, 0.4, 0.3, 0.5, 0.4, 0.2, 0.2, 0.4, 0.5, 0.6,
                    0.6, 0.8, 0.7, 0.7, 0.8, 0.9, 1.0, 1.3, 1.3, 1.5, 1.8, 1.9, 2.3, 2.3, 2.6, 2.7,
                    2.6, 2.6, 2.7, 2.8, 2.8, 2.8, 2.7, 2.7, 2.5, 2.3, 2.2, 2.3, 2.3, 2.3, 2.4, 2.2,
                    2.2, 2.2, 2.0, 1.8, 1.8, 1.8, 2.0, 1.9, 1.9, 2.0, 1.7, 1.7, 1.5, 1.5, 1.4, 1.8,
                    1.7, 1.5, 0.9, 0.7, 0.8, 1.1, 0.5, 0.7, 0.9, 0.6, 0.8, 0.9, 0.7, 1.0, 1.6, 2.1,
                    2.4, 2.1, 3.0, 2.9, 3.8, 4.6, 4.8, 4.9, 5.5, 6.2, 7.8, 7.9, 8.2, 8.8, 8.6, 8.8,
                    9.6, 9.3, 9.2, 8.8, 9.2, 8.9, 7.8, 7.9, 7.3, 6.4, 6.3, 6.3, 4.7, 4.2, 4.2, 4.2,
                    3.8, 3.8, 3.0, 2.8, 2.8, 3.1, 3.1, 2.6, 3.2
                ]
            },
            {
                "name": 'Goods',
                "data": [
                    0.3, -0.2, -1.0, -1.5, -2.0, -2.1, -1.9, -1.8, -2.0, -1.8, -2.0, -2.4, -2.1,
                    -1.9, -2.1, -1.5, -1.6, -1.7, -1.6, -1.8, -1.7, -1.5, -1.4, -0.5, -0.4, 0.2,
                    0.7, 1.1, 1.9, 2.5, 2.4, 3.0, 2.6, 2.7, 3.1, 3.2, 3.3, 3.3, 3.4, 3.2, 3.0, 2.4,
                    2.6, 2.5, 2.5, 2.6, 2.7, 2.5, 2.3, 2.1, 1.8, 1.2, 1.3, 1.3, 1.4, 1.5, 1.5, 1.7,
                    1.2, 0.9, 0.4, 0.5, 0.6, 1.3, 1.0, 0.6, -0.4, -0.9, -0.5, 0.0, -0.2, -0.3, 0.1,
                    -0.7, -0.2, -0.2, -0.5, 0.1, 1.6, 2.3, 2.9, 2.5, 3.3, 3.5, 4.9, 6.5, 6.9, 7.2,
                    8.3, 9.4, 12.4, 12.4, 12.7, 13.6, 13.0, 13.2, 14.8, 14.1, 13.4, 13.3, 13.4,
                    12.7, 10.0, 9.7, 8.5, 6.1, 6.3, 6.2, 2.9, 2.0, 1.9, 1.8, 1.1, 0.9, -0.8, -1.3,
                    -1.4, -0.5, -0.9, -1.4, -0.3
                ]
            },
            {
                "name": 'Services',
                "data": [
                    2.2, 2.1, 2.1, 2.1, 2.2, 2.2, 2.0, 2.1, 2.1, 2.2, 2.2, 2.2, 2.1, 2.2, 2.5, 2.2,
                    2.3, 2.6, 2.4, 2.6, 2.7, 2.6, 2.7, 2.6, 2.5, 2.4, 2.5, 2.5, 2.6, 2.2, 2.8, 2.6,
                    2.5, 2.4, 2.5, 2.5, 2.4, 2.4, 2.2, 2.3, 2.1, 2.1, 1.9, 2.1, 2.0, 2.0, 2.2, 2.0,
                    2.1, 2.2, 2.1, 2.2, 2.2, 2.2, 2.5, 2.3, 2.2, 2.2, 2.0, 2.2, 2.2, 2.2, 1.9, 2.1,
                    2.2, 2.2, 1.9, 1.8, 1.7, 2.0, 1.0, 1.5, 1.5, 1.5, 1.6, 1.7, 1.6, 1.6, 1.7, 1.9,
                    2.1, 1.8, 2.7, 2.5, 2.9, 3.0, 3.1, 3.1, 3.2, 3.7, 4.1, 4.3, 4.5, 4.9, 5.1, 5.3,
                    5.3, 5.4, 5.8, 5.2, 5.6, 5.7, 6.0, 6.3, 6.3, 6.5, 6.1, 6.3, 6.2, 6.0, 6.0, 6.1,
                    6.0, 6.0, 6.0, 5.9, 6.0, 5.7, 5.9, 5.6, 5.6
                ]
            },
            {
                "name": 'CPIH excl energy, food, alcohol & tobacco',
                "data": [
                    1.5, 1.3, 1.4, 1.5, 1.4, 1.2, 1.1, 1.2, 1.0, 1.3, 1.2, 1.2, 1.3, 1.4, 1.5, 1.4,
                    1.4, 1.6, 1.5, 1.5, 1.6, 1.6, 1.5, 1.7, 1.6, 1.7, 1.8, 1.8, 2.1, 1.9, 2.4, 2.5,
                    2.4, 2.4, 2.6, 2.5, 2.5, 2.5, 2.3, 2.4, 2.2, 2.1, 2.0, 2.0, 1.8, 1.8, 1.9, 1.8,
                    1.8, 1.8, 1.8, 1.8, 1.8, 1.8, 1.7, 1.7, 1.7, 1.9, 1.5, 1.6, 1.7, 1.7, 1.4, 1.6,
                    1.7, 1.6, 1.5, 1.3, 1.5, 1.8, 1.0, 1.4, 1.5, 1.2, 1.5, 1.5, 1.1, 1.3, 1.5, 2.0,
                    2.3, 1.9, 2.9, 2.7, 3.1, 3.6, 3.8, 4.0, 4.6, 5.1, 5.4, 5.2, 5.2, 5.5, 5.6, 5.8,
                    5.8, 5.7, 5.8, 5.3, 5.7, 5.7, 6.2, 6.5, 6.4, 6.4, 5.9, 5.9, 5.6, 5.2, 5.2, 5.1,
                    4.8, 4.7, 4.4, 4.2, 4.2, 4.1, 4.3, 4.0, 4.1
                ]
            }
        ],
        "annotations": [
            {
                "text": "A test point annotation",
                "point": {"x": 10, "y": 1.3},
                "labelOffsetX": 10,
                "labelOffsetY": -50
            },
            {
                "text": "Another test point annotation",
                "point": {"x": 48, "y": 1.8},
                "labelOffsetX": 30,
                "labelOffsetY": -70
            }
        ]
    })
}}

Nunjucks macro options

Name	Type	Required	Description
chartType	string	true if iframe not set	The type of chart to render. Supported types include: 'line', 'bar', 'column', 'scatter', 'columnrange', 'boxplot' and 'area'. Will be ignored if an iframe url is set.
unsupportedChartText	string	false	Optional text override to display after the chart type when it's not supported. Defaults to "chart type - chart type is not supported"
instructions	string	false	Instructions for keyboard users on how to interact with the chart. This text will be read aloud by screen readers to guide navigation and interaction.
theme	string	false	The theme to apply to the chart. Either `primary` or `alternate`. Defaults to `primary`. Will be ignored if an iframe url is set.
headingLevel	number	false	Number used to determine the heading level of the title. Use to ensure the title has a correct semantic order on the page. Accepts a value between 1 and 4, defaulting to 2 if not provided.
title	string	true	The main title of the chart.
subtitle	string	false	A subtitle that appears under the main title.
id	string	true	A unique identifier for the chart instance or iframe.
caption	string	false	A caption providing additional context for the chart.
description	string	true	A textual description of the chart for screen readers.
download	object	false	Object for (download)[#download] options.
legend	boolean	false	Whether the legend is displayed. Defaults to `true`. Note that legends are automatically hidden for single series charts. Will be ignored if an iframe url is set.
yAxis	object	true if iframe not set	Defines the vertical axis y-axis configuration parameters. Will be ignored if an iframe url is set.
xAxis	object	true if iframe not set	Defines the horizontal axis x-axis configuration parameters. Will be ignored if an iframe url is set.
series	array	true if iframe not set	The data series to be plotted, including labels and values. Will be ignored if an iframe url is set. Note: The number of series is limited by the selected theme - up to 6 series for the primary theme and 5 series for the alternate theme. Any additional series beyond these limits will be ignored and not displayed.
useStackedLayout	boolean	false	Determines whether the chart should use a stacked layout. It is useful only for bar and column charts. Will be ignored if an iframe url is set.
percentageHeightDesktop	integer	false	Sets the percentage plot height at desktop, relative to the width. If undefined the chart will fall back to the default height of 400px at desktop. Does not apply to bar charts. Will be ignored if an iframe url is set.
percentageHeightMobile	integer	false	Sets the percentage plot height at mobile, relative to the width. If undefined the chart will fall back to the default height of 400px at mobile. Does not apply to bar charts. Will be ignored if an iframe url is set.

annotations	array	false	An array of point annotations. Will be ignored if an iframe url is set.
rangeAnnotations	array	false	An array of range annotations. Will be ignored if an iframe url is set.
referenceLineAnnotations	array	false	An array of reference line annotations. Will be ignored if an iframe url is set.
estimateLineLabel	string	false	Label for the estimate line in the legend. Used in column charts with confidence intervals. Will be ignored if an iframe url is set.
uncertaintyRangeLabel	string	false	Label for the confidence interval in the legend. Used in column charts showing uncertainty ranges. Will be ignored if an iframe url is set.
iframeUrl	string	false	A url for a visualisation to display in an iframe instead of displaying a Highcharts chart.
footnotes	`Object<Footnotes>`	false	Footnotes to appear below the chart in a 'details' element
fallbackImageUrl	string	false	A url for a fallback image to display instead of the chart or iframe visualisation if JavaScript is disabled. If a fallback image is passed with an iframeUrl parameter, the iframe will be hidden for non-JavaScript users. If it is not passed, it is assumed the iframe content will provide a fallback image to be displayed inside the iframe.
fallbackImageAlt	string	false	Alt text for the fallback image - a short description only, as the description field describes the chart for screen readers. Defaults to "Fallback image for the chart as JavaScript is disabled"
iframeAspectRatio	string	false	Sets the aspect ratio for iframe charts. Only applicable when using an iframe chart. Acceptable values are 16-9, 4-3, 21-9, 1-1, 3-2, and 9-16. The value must be provided in the x-y format (e.g. 16-9). If an unsupported value is provided or a value is not provided, the aspect ratio will default to 16-9.

Download
Property	Type	Required	Description
title	string	false	The title displayed above the download options.
itemsList	array	false	An array of items available for download, each described by a (DownloadItem)[#DownloadItem].

DownloadItem
Property	Type	Required	Description
text	string	true	The label or description of the downloadable item.
url	string	true	The URL to the downloadable resource.

Y_Axis
Name	Type	Required	Description
title	string	true	The title text displayed on the y-axis. Note that for any chart type apart from bar charts, a maximum character limit of 50 characters is recommended to avoid the axis title being cut off at mobile.
labelFormat	string	false	A format string for the axis label. Examples of string formats can be found in these docs (opens in a new tab) .
tickIntervalMobile	number	false	The interval of the tick marks in axis units at mobile. Useful when you want to space out the labels (e.g. show every 2nd or 5th label).
tickIntervalDesktop	number	false	The interval of the tick marks in axis units at desktop. Useful when you want to space out the labels (e.g. show every 2nd or 5th label).
customReferenceLineValue	float or int	false	A custom value to display a darker reference line. If not supplied, the darker will appear at zero. The custom value is only used for column charts and line charts - for other chart types it will be ignored, and the darker line will appear at zero.
min	number	false	Sets the minimum value for the Y-axis. Relevant for Line, bar, area, column chart, column-range, boxplot and scatter charts.
max	number	false	Sets the maximum value for the Y-axis. Relevant for Line, bar, area, column chart, column-range, boxplot and scatter charts.
startOnTick	boolean	false	Align the axis to start on a tick. Relevant for Line, bar, area, column chart, column-range, boxplot and scatter charts.
endOnTick	boolean	false	Align the axis to end on a tick. Relevant for Line, bar, area, column chart, column-range, boxplot and scatter charts.

X_Axis
Name	Type	Required	Description
title	string	false	The title text displayed on the x-axis. Note: x-axis titles are not supported for bar chart types.
labelFormat	string	false	A format string for the x-axis label. Examples of string formats can be found in these docs (opens in a new tab) .
categories	array	false	Labels for each tick mark along the x-axis.
type	string	false	The type of axis. Can be one of `linear`, `logarithmic`, `datetime` or `category`. Defaults to linear.
tickIntervalMobile	number	false	The interval of the tick marks in axis units at mobile. Useful when you want to space out the labels (e.g. show every 2nd or 5th label).
tickIntervalDesktop	number	false	The interval of the tick marks in axis units at desktop. Useful when you want to space out the labels (e.g. show every 2nd or 5th label).
min	number	false	Sets the minimum value for the X-axis. Relevant only for scatter charts.
max	number	false	Sets the maximum value for the X-axis. Relevant only for scatter charts.
startOnTick	boolean	false	Align the axis to start on a tick. Relevant only for scatter charts.
endOnTick	boolean	false	Align the axis to end on a tick. Relevant only for scatter charts.

Series
Name	Type	Required	Description
name	string	true	The name of the series.
data	array	true	The data values for the series. Each value corresponds to a category on the x-axis.
dataLabels	boolean	false	Options for whether the DataLabel is displayed. Defaults to `false`. This option is only available for bar chart and clustered bar charts with two or fewer series, and 20 or fewer data points in any series.
marker	boolean	false	Options for whether the Marker is displayed on the data points. Defaults to `false`. This option is only available for line charts.
type	string	false	Specifies the configuration type to apply to the series. Supported types include 'line' and 'scatter'. By default, it aligns with the chart type. This is used when combining multiple chart types within a single chart. Note: Only the following chart type combinations are supported: "column with line" and "columnrange with scatter". For column with line, only one line series is supported. Additional line series will be ignored.
connectNulls	boolean	false	Whether to connect lines that have a data point missing. Only relevant for line charts.

Point annotations
Name	Type	Required	Description
text	string	true	The annotation text.
point	object	false	The x and y coordinates for the annotation
labelOffsetX (px)	int	true	The x offset in px of the label from the annotation point
labelOffsetY (px)	int	true	The y offset in px of the label from the annotation point

Point
Name	Type	Required	Description
xValue	float or int	true	The x axis value of the annotation. For category axes this is the zero based index of the x axis categories array. It must be an integer in this scenario.
yValue	float	true	The y axis value of the annotation

Range annotations
Name	Type	Required	Description
text	string	true	The annotation text.
range	Object	true	The xValue or yValue coordinates for the annotation
axis	string	true	The axis the range annotation should be applied to. Should be one of 'x' or 'y'. Note that for bar charts 'x' will be the vertical axis, and 'y' will be the horizontal axis.
labelInside	boolean	true	Whether the label for the range sits inside or outside the shaded area
labelOffsetX (px)	int	false	The horizontal offset in px of the label from it's default position. Ignored if labelInside is true.
labelOffsetY (px)	int	false	The vertical offset in px of the label from it's default position. Ignored if labelInside is true.
labelWidth (px)	int	false	The width of the label in pixels - the label text will wrap if it is wider than this value. If undefined, the label will be set to 150px wide.

Range
Name	Type	Required	Description
axisValue1	float or int	true	The starting point on the axis for the annotation. For category axes this is the zero based index of the categories array. It must be an integer in this scenario.
axisValue2	float or int	true	The ending pont on the axis for the annotation. For category axes this is the zero based index of the axis categories array. It must be an integer in this scenario.

Reference line annotations
Name	Type	Required	Description
text	string	true	The annotation text.
value	float or int	true	The x axis or y axis value for the annotation. For category axes this is the zero based index of the categories array. It must be an integer in this scenario.
axis	string	true	The axis the range annotation should be applied to. Should be one of 'x' or 'y'. Note that for bar charts 'x' will be the vertical axis, and 'y' will be the horizontal axis.
labelWidth (px)	int	false	The width of the label in pixels - the label text will wrap if it is wider than this value. If undefined, the label will be set to 150px wide.
labelOffsetX (px)	int	false	The horizontal offset in px of the label from it's default position.
labelOffsetY (px)	int	false	The vertical offset in px of the label from it's default position.

Footnotes
Name	Type	Required	Description
title	string	true	The title text for the footnotes heading
content	string	true	HTML content for the footnotes

HTML

<div data-highcharts-base-chart data-highcharts-type="line" data-highcharts-theme="primary"
  data-highcharts-title="Sales volumes and values saw moderate growth in July 2024" data-highcharts-id="id"
  data-highcharts-percentage-height-desktop="35" data-highcharts-percentage-height-mobile="90"
  data-highcharts-x-axis-tick-interval-mobile="30" data-highcharts-x-axis-tick-interval-desktop="10">
  <figure class="ons-chart" aria-describedby="chart-audio-description-id">
    <h4 class="ons-chart__title">Sales volumes and values saw moderate growth in July 2024</h4>
    <h5 class="ons-chart__subtitle">Figure 6: Upward contribution from housing and household services (including energy)
      saw the annual CPIH inflation rate rise</h5>
    <p class="ons-u-vh" id="chart-audio-description-id">Line chart showing the annual rate of inflation for the Consumer
      Prices Index including owner occupiers’ housing costs (CPIH) and its components.</p>
    <div data-highcharts-chart-container class="ons-chart__container" tabindex="0" role="region"
      aria-label="chart container" aria-describedby="chart-instructions-id">
      <div id="chart-instructions-id" class="ons-u-vh">Use the Tab key to move focus into the chart. Once inside, use
        the arrow keys to navigate between data points. As you move, tooltips will be announced to describe each point.
        Touch device users, explore by touch or with swipe gestures.</div>
      <div data-highcharts-chart class="ons-chart__chart"></div>
    </div>
    <ul class="ons-chart__annotations-footnotes" aria-hidden="true" data-annotations-footnotes>
      <li class="ons-chart__annotations-footnotes_item">
        <span class="ons-chart__annotations-footnotes-number">1</span> A test point annotation
      </li>
      <li class="ons-chart__annotations-footnotes_item">
        <span class="ons-chart__annotations-footnotes-number">2</span> Another test point annotation
      </li>
    </ul>
    <figcaption class="ons-chart__caption">Source: Monthly Business Survey, Retails Sales Inquiry from the Office for
      National Statistics</figcaption>
  </figure>
  <h6 class="ons-chart__download-title">Download Figure 1 data</h6>
  <ol class="ons-list">
    <li class="ons-list__item">
      <a href="#" class="ons-list__link">Excel spreadsheet (XLSX format, 18KB)</a>
    </li>
    <li class="ons-list__item">
      <a href="#" class="ons-list__link">Simple text file (CSV format, 25KB)</a>
    </li>
    <li class="ons-list__item">
      <a href="#" class="ons-list__link">Image (PNG format, 25KB)</a>
    </li>
  </ol>
  <!-- Set scripts to pass the config values as json to the JavaScript -->
  <!-- prettier-ignore-start -->
  <script type="application/json" data-highcharts-config--id>
    {
      "chart": {
        "type": "line"
      },
      "legend": {
        "enabled": true
      },
      "yAxis": {
        "title": {
          "text": "Sales"
        },
        "labels": {
          "format": "{value:,.f}"
        }
      },
      "xAxis": {
        "title": {
          "text": "Year"
        },
        "categories": ["Oct 2014", "Nov 2014", "Dec 2014", "Jan 2015", "Feb 2015", "Mar 2015", "Apr 2015", "May 2015",
          "Jun 2015", "Jul 2015", "Aug 2015", "Sep 2015", "Oct 2015", "Nov 2015", "Dec 2015", "Jan 2016", "Feb 2016",
          "Mar 2016", "Apr 2016", "May 2016", "Jun 2016", "Jul 2016", "Aug 2016", "Sep 2016", "Oct 2016", "Nov 2016",
          "Dec 2016", "Jan 2017", "Feb 2017", "Mar 2017", "Apr 2017", "May 2017", "Jun 2017", "Jul 2017", "Aug 2017",
          "Sep 2017", "Oct 2017", "Nov 2017", "Dec 2017", "Jan 2018", "Feb 2018", "Mar 2018", "Apr 2018", "May 2018",
          "Jun 2018", "Jul 2018", "Aug 2018", "Sep 2018", "Oct 2018", "Nov 2018", "Dec 2018", "Jan 2019", "Feb 2019",
          "Mar 2019", "Apr 2019", "May 2019", "Jun 2019", "Jul 2019", "Aug 2019", "Sep 2019", "Oct 2019", "Nov 2019",
          "Dec 2019", "Jan 2020", "Feb 2020", "Mar 2020", "Apr 2020", "May 2020", "Jun 2020", "Jul 2020", "Aug 2020",
          "Sep 2020", "Oct 2020", "Nov 2020", "Dec 2020", "Jan 2021", "Feb 2021", "Mar 2021", "Apr 2021", "May 2021",
          "Jun 2021", "Jul 2021", "Aug 2021", "Sep 2021", "Oct 2021", "Nov 2021", "Dec 2021", "Jan 2022", "Feb 2022",
          "Mar 2022", "Apr 2022", "May 2022", "Jun 2022", "Jul 2022", "Aug 2022", "Sep 2022", "Oct 2022", "Nov 2022",
          "Dec 2022", "Jan 2023", "Feb 2023", "Mar 2023", "Apr 2023", "May 2023", "Jun 2023", "Jul 2023", "Aug 2023",
          "Sep 2023", "Oct 2023", "Nov 2023", "Dec 2023", "Jan 2024", "Feb 2024", "Mar 2024", "Apr 2024", "May 2024",
          "Jun 2024", "Jul 2024", "Aug 2024", "Sep 2024", "Oct 2024"
        ],
        "type": "linear",
        "labels": {
          "format": "{value:,.f}"
        }
      },
      "series": [{
        "name": "CPIH",
        "data": [1.3, 1.1, 0.7, 0.5, 0.4, 0.3, 0.3, 0.4, 0.3, 0.5, 0.4, 0.2, 0.2, 0.4, 0.5, 0.6, 0.6, 0.8, 0.7, 0.7,
          0.8, 0.9, 1, 1.3, 1.3, 1.5, 1.8, 1.9, 2.3, 2.3, 2.6, 2.7, 2.6, 2.6, 2.7, 2.8, 2.8, 2.8, 2.7, 2.7, 2.5,
          2.3, 2.2, 2.3, 2.3, 2.3, 2.4, 2.2, 2.2, 2.2, 2, 1.8, 1.8, 1.8, 2, 1.9, 1.9, 2, 1.7, 1.7, 1.5, 1.5, 1.4,
          1.8, 1.7, 1.5, 0.9, 0.7, 0.8, 1.1, 0.5, 0.7, 0.9, 0.6, 0.8, 0.9, 0.7, 1, 1.6, 2.1, 2.4, 2.1, 3, 2.9,
          3.8, 4.6, 4.8, 4.9, 5.5, 6.2, 7.8, 7.9, 8.2, 8.8, 8.6, 8.8, 9.6, 9.3, 9.2, 8.8, 9.2, 8.9, 7.8, 7.9, 7.3,
          6.4, 6.3, 6.3, 4.7, 4.2, 4.2, 4.2, 3.8, 3.8, 3, 2.8, 2.8, 3.1, 3.1, 2.6, 3.2
        ],
        "marker": {
          "enabled": false
        },
        "dataLabels": {
          "enabled": false
        },
        "connectNulls": false,
        "type": "line"
      }, {
        "name": "Goods",
        "data": [0.3, -0.2, -1, -1.5, -2, -2.1, -1.9, -1.8, -2, -1.8, -2, -2.4, -2.1, -1.9, -2.1, -1.5, -1.6, -1.7,
          -1.6, -1.8, -1.7, -1.5, -1.4, -0.5, -0.4, 0.2, 0.7, 1.1, 1.9, 2.5, 2.4, 3, 2.6, 2.7, 3.1, 3.2, 3.3, 3.3,
          3.4, 3.2, 3, 2.4, 2.6, 2.5, 2.5, 2.6, 2.7, 2.5, 2.3, 2.1, 1.8, 1.2, 1.3, 1.3, 1.4, 1.5, 1.5, 1.7, 1.2,
          0.9, 0.4, 0.5, 0.6, 1.3, 1, 0.6, -0.4, -0.9, -0.5, 0, -0.2, -0.3, 0.1, -0.7, -0.2, -0.2, -0.5, 0.1, 1.6,
          2.3, 2.9, 2.5, 3.3, 3.5, 4.9, 6.5, 6.9, 7.2, 8.3, 9.4, 12.4, 12.4, 12.7, 13.6, 13, 13.2, 14.8, 14.1,
          13.4, 13.3, 13.4, 12.7, 10, 9.7, 8.5, 6.1, 6.3, 6.2, 2.9, 2, 1.9, 1.8, 1.1, 0.9, -0.8, -1.3, -1.4, -0.5,
          -0.9, -1.4, -0.3
        ],
        "marker": {
          "enabled": false
        },
        "dataLabels": {
          "enabled": false
        },
        "connectNulls": false,
        "type": "line"
      }, {
        "name": "Services",
        "data": [2.2, 2.1, 2.1, 2.1, 2.2, 2.2, 2, 2.1, 2.1, 2.2, 2.2, 2.2, 2.1, 2.2, 2.5, 2.2, 2.3, 2.6, 2.4, 2.6,
          2.7, 2.6, 2.7, 2.6, 2.5, 2.4, 2.5, 2.5, 2.6, 2.2, 2.8, 2.6, 2.5, 2.4, 2.5, 2.5, 2.4, 2.4, 2.2, 2.3, 2.1,
          2.1, 1.9, 2.1, 2, 2, 2.2, 2, 2.1, 2.2, 2.1, 2.2, 2.2, 2.2, 2.5, 2.3, 2.2, 2.2, 2, 2.2, 2.2, 2.2, 1.9,
          2.1, 2.2, 2.2, 1.9, 1.8, 1.7, 2, 1, 1.5, 1.5, 1.5, 1.6, 1.7, 1.6, 1.6, 1.7, 1.9, 2.1, 1.8, 2.7, 2.5,
          2.9, 3, 3.1, 3.1, 3.2, 3.7, 4.1, 4.3, 4.5, 4.9, 5.1, 5.3, 5.3, 5.4, 5.8, 5.2, 5.6, 5.7, 6, 6.3, 6.3,
          6.5, 6.1, 6.3, 6.2, 6, 6, 6.1, 6, 6, 6, 5.9, 6, 5.7, 5.9, 5.6, 5.6
        ],
        "marker": {
          "enabled": false
        },
        "dataLabels": {
          "enabled": false
        },
        "connectNulls": false,
        "type": "line"
      }, {
        "name": "CPIH excl energy, food, alcohol \u0026 tobacco",
        "data": [1.5, 1.3, 1.4, 1.5, 1.4, 1.2, 1.1, 1.2, 1, 1.3, 1.2, 1.2, 1.3, 1.4, 1.5, 1.4, 1.4, 1.6, 1.5, 1.5,
          1.6, 1.6, 1.5, 1.7, 1.6, 1.7, 1.8, 1.8, 2.1, 1.9, 2.4, 2.5, 2.4, 2.4, 2.6, 2.5, 2.5, 2.5, 2.3, 2.4, 2.2,
          2.1, 2, 2, 1.8, 1.8, 1.9, 1.8, 1.8, 1.8, 1.8, 1.8, 1.8, 1.8, 1.7, 1.7, 1.7, 1.9, 1.5, 1.6, 1.7, 1.7,
          1.4, 1.6, 1.7, 1.6, 1.5, 1.3, 1.5, 1.8, 1, 1.4, 1.5, 1.2, 1.5, 1.5, 1.1, 1.3, 1.5, 2, 2.3, 1.9, 2.9,
          2.7, 3.1, 3.6, 3.8, 4, 4.6, 5.1, 5.4, 5.2, 5.2, 5.5, 5.6, 5.8, 5.8, 5.7, 5.8, 5.3, 5.7, 5.7, 6.2, 6.5,
          6.4, 6.4, 5.9, 5.9, 5.6, 5.2, 5.2, 5.1, 4.8, 4.7, 4.4, 4.2, 4.2, 4.1, 4.3, 4, 4.1
        ],
        "marker": {
          "enabled": false
        },
        "dataLabels": {
          "enabled": false
        },
        "connectNulls": false,
        "type": "line"
      }]
    }
  </script>
  <script type="application/json" data-highcharts-annotations--id>
    [{
      "text": "A test point annotation",
      "point": {
        "x": 10,
        "y": 1.3
      },
      "labelOffsetX": 10,
      "labelOffsetY": -50
    }, {
      "text": "Another test point annotation",
      "point": {
        "x": 48,
        "y": 1.8
      },
      "labelOffsetX": 30,
      "labelOffsetY": -70
    }]
  </script>
  <!-- prettier-ignore-end -->
</div>

Line chart with reference line annotations

Use this when you require reference line annotations on your line charts.

Open this example in a new tab(Example Line Chart With Reference Line Annotations)

Example Line Chart With Reference Line Annotations contents

Nunjucksfor Example Line Chart With Reference Line Annotations
Nunjucks macro optionsfor Example Line Chart With Reference Line Annotations
HTMLfor Example Line Chart With Reference Line Annotations

Nunjucks

{% from "components/chart/_macro.njk" import onsChart %}

{{
    onsChart({
        "chartType": "line",
        "description": "Line chart showing the annual rate of inflation for the Consumer Prices Index including owner occupiers’ housing costs (CPIH) and its components.",
        "theme": "primary",
        "title": "Sales volumes and values saw moderate growth in July 2024",
        "subtitle": "Figure 6: Upward contribution from housing and household services (including energy) saw the annual CPIH inflation rate rise",
        "id": "id",
        "headingLevel": 4,
        "caption": "Source: Monthly Business Survey, Retails Sales Inquiry from the Office for National Statistics",
        "download": {
            'title': 'Download Figure 1 data',
            'itemsList': [
            {
                "text": "Excel spreadsheet (XLSX format, 18KB)",
                "url": "#"
            },
            {
                "text": "Simple text file (CSV format, 25KB)",
                "url": "#"
            },
            {

                "text": "Image (PNG format, 25KB)",
                "url": "#"
            }
        ]},
        "legend": true,
        "xAxis": {
            "title": "Year",
            "type": "linear",
            "labelFormat": "{value:,.f}",
            "categories": [
                'Oct 2014',
                'Nov 2014',
                'Dec 2014',
                'Jan 2015',
                'Feb 2015',
                'Mar 2015',
                'Apr 2015',
                'May 2015',
                'Jun 2015',
                'Jul 2015',
                'Aug 2015',
                'Sep 2015',
                'Oct 2015',
                'Nov 2015',
                'Dec 2015',
                'Jan 2016',
                'Feb 2016',
                'Mar 2016',
                'Apr 2016',
                'May 2016',
                'Jun 2016',
                'Jul 2016',
                'Aug 2016',
                'Sep 2016',
                'Oct 2016',
                'Nov 2016',
                'Dec 2016',
                'Jan 2017',
                'Feb 2017',
                'Mar 2017',
                'Apr 2017',
                'May 2017',
                'Jun 2017',
                'Jul 2017',
                'Aug 2017',
                'Sep 2017',
                'Oct 2017',
                'Nov 2017',
                'Dec 2017',
                'Jan 2018',
                'Feb 2018',
                'Mar 2018',
                'Apr 2018',
                'May 2018',
                'Jun 2018',
                'Jul 2018',
                'Aug 2018',
                'Sep 2018',
                'Oct 2018',
                'Nov 2018',
                'Dec 2018',
                'Jan 2019',
                'Feb 2019',
                'Mar 2019',
                'Apr 2019',
                'May 2019',
                'Jun 2019',
                'Jul 2019',
                'Aug 2019',
                'Sep 2019',
                'Oct 2019',
                'Nov 2019',
                'Dec 2019',
                'Jan 2020',
                'Feb 2020',
                'Mar 2020',
                'Apr 2020',
                'May 2020',
                'Jun 2020',
                'Jul 2020',
                'Aug 2020',
                'Sep 2020',
                'Oct 2020',
                'Nov 2020',
                'Dec 2020',
                'Jan 2021',
                'Feb 2021',
                'Mar 2021',
                'Apr 2021',
                'May 2021',
                'Jun 2021',
                'Jul 2021',
                'Aug 2021',
                'Sep 2021',
                'Oct 2021',
                'Nov 2021',
                'Dec 2021',
                'Jan 2022',
                'Feb 2022',
                'Mar 2022',
                'Apr 2022',
                'May 2022',
                'Jun 2022',
                'Jul 2022',
                'Aug 2022',
                'Sep 2022',
                'Oct 2022',
                'Nov 2022',
                'Dec 2022',
                'Jan 2023',
                'Feb 2023',
                'Mar 2023',
                'Apr 2023',
                'May 2023',
                'Jun 2023',
                'Jul 2023',
                'Aug 2023',
                'Sep 2023',
                'Oct 2023',
                'Nov 2023',
                'Dec 2023',
                'Jan 2024',
                'Feb 2024',
                'Mar 2024',
                'Apr 2024',
                'May 2024',
                'Jun 2024',
                'Jul 2024',
                'Aug 2024',
                'Sep 2024',
                'Oct 2024'
            ],
            "tickIntervalDesktop": 15,
            "tickIntervalMobile": 30
        },
        "yAxis": {
            "title": "Sales",
            "labelFormat": "{value:,.f}"
        },
        "percentageHeightDesktop": 35,
        "percentageHeightMobile": 90,
        "series": [
            {
                "name": 'CPIH',
                "data": [
                    1.3, 1.1, 0.7, 0.5, 0.4, 0.3, 0.3, 0.4, 0.3, 0.5, 0.4, 0.2, 0.2, 0.4, 0.5, 0.6,
                    0.6, 0.8, 0.7, 0.7, 0.8, 0.9, 1.0, 1.3, 1.3, 1.5, 1.8, 1.9, 2.3, 2.3, 2.6, 2.7,
                    2.6, 2.6, 2.7, 2.8, 2.8, 2.8, 2.7, 2.7, 2.5, 2.3, 2.2, 2.3, 2.3, 2.3, 2.4, 2.2,
                    2.2, 2.2, 2.0, 1.8, 1.8, 1.8, 2.0, 1.9, 1.9, 2.0, 1.7, 1.7, 1.5, 1.5, 1.4, 1.8,
                    1.7, 1.5, 0.9, 0.7, 0.8, 1.1, 0.5, 0.7, 0.9, 0.6, 0.8, 0.9, 0.7, 1.0, 1.6, 2.1,
                    2.4, 2.1, 3.0, 2.9, 3.8, 4.6, 4.8, 4.9, 5.5, 6.2, 7.8, 7.9, 8.2, 8.8, 8.6, 8.8,
                    9.6, 9.3, 9.2, 8.8, 9.2, 8.9, 7.8, 7.9, 7.3, 6.4, 6.3, 6.3, 4.7, 4.2, 4.2, 4.2,
                    3.8, 3.8, 3.0, 2.8, 2.8, 3.1, 3.1, 2.6, 3.2
                ]
            },
            {
                "name": 'Goods',
                "data": [
                    0.3, -0.2, -1.0, -1.5, -2.0, -2.1, -1.9, -1.8, -2.0, -1.8, -2.0, -2.4, -2.1,
                    -1.9, -2.1, -1.5, -1.6, -1.7, -1.6, -1.8, -1.7, -1.5, -1.4, -0.5, -0.4, 0.2,
                    0.7, 1.1, 1.9, 2.5, 2.4, 3.0, 2.6, 2.7, 3.1, 3.2, 3.3, 3.3, 3.4, 3.2, 3.0, 2.4,
                    2.6, 2.5, 2.5, 2.6, 2.7, 2.5, 2.3, 2.1, 1.8, 1.2, 1.3, 1.3, 1.4, 1.5, 1.5, 1.7,
                    1.2, 0.9, 0.4, 0.5, 0.6, 1.3, 1.0, 0.6, -0.4, -0.9, -0.5, 0.0, -0.2, -0.3, 0.1,
                    -0.7, -0.2, -0.2, -0.5, 0.1, 1.6, 2.3, 2.9, 2.5, 3.3, 3.5, 4.9, 6.5, 6.9, 7.2,
                    8.3, 9.4, 12.4, 12.4, 12.7, 13.6, 13.0, 13.2, 14.8, 14.1, 13.4, 13.3, 13.4,
                    12.7, 10.0, 9.7, 8.5, 6.1, 6.3, 6.2, 2.9, 2.0, 1.9, 1.8, 1.1, 0.9, -0.8, -1.3,
                    -1.4, -0.5, -0.9, -1.4, -0.3
                ]
            },
            {
                "name": 'Services',
                "data": [
                    2.2, 2.1, 2.1, 2.1, 2.2, 2.2, 2.0, 2.1, 2.1, 2.2, 2.2, 2.2, 2.1, 2.2, 2.5, 2.2,
                    2.3, 2.6, 2.4, 2.6, 2.7, 2.6, 2.7, 2.6, 2.5, 2.4, 2.5, 2.5, 2.6, 2.2, 2.8, 2.6,
                    2.5, 2.4, 2.5, 2.5, 2.4, 2.4, 2.2, 2.3, 2.1, 2.1, 1.9, 2.1, 2.0, 2.0, 2.2, 2.0,
                    2.1, 2.2, 2.1, 2.2, 2.2, 2.2, 2.5, 2.3, 2.2, 2.2, 2.0, 2.2, 2.2, 2.2, 1.9, 2.1,
                    2.2, 2.2, 1.9, 1.8, 1.7, 2.0, 1.0, 1.5, 1.5, 1.5, 1.6, 1.7, 1.6, 1.6, 1.7, 1.9,
                    2.1, 1.8, 2.7, 2.5, 2.9, 3.0, 3.1, 3.1, 3.2, 3.7, 4.1, 4.3, 4.5, 4.9, 5.1, 5.3,
                    5.3, 5.4, 5.8, 5.2, 5.6, 5.7, 6.0, 6.3, 6.3, 6.5, 6.1, 6.3, 6.2, 6.0, 6.0, 6.1,
                    6.0, 6.0, 6.0, 5.9, 6.0, 5.7, 5.9, 5.6, 5.6
                ]
            },
            {
                "name": 'CPIH excl energy, food, alcohol & tobacco',
                "data": [
                    1.5, 1.3, 1.4, 1.5, 1.4, 1.2, 1.1, 1.2, 1.0, 1.3, 1.2, 1.2, 1.3, 1.4, 1.5, 1.4,
                    1.4, 1.6, 1.5, 1.5, 1.6, 1.6, 1.5, 1.7, 1.6, 1.7, 1.8, 1.8, 2.1, 1.9, 2.4, 2.5,
                    2.4, 2.4, 2.6, 2.5, 2.5, 2.5, 2.3, 2.4, 2.2, 2.1, 2.0, 2.0, 1.8, 1.8, 1.9, 1.8,
                    1.8, 1.8, 1.8, 1.8, 1.8, 1.8, 1.7, 1.7, 1.7, 1.9, 1.5, 1.6, 1.7, 1.7, 1.4, 1.6,
                    1.7, 1.6, 1.5, 1.3, 1.5, 1.8, 1.0, 1.4, 1.5, 1.2, 1.5, 1.5, 1.1, 1.3, 1.5, 2.0,
                    2.3, 1.9, 2.9, 2.7, 3.1, 3.6, 3.8, 4.0, 4.6, 5.1, 5.4, 5.2, 5.2, 5.5, 5.6, 5.8,
                    5.8, 5.7, 5.8, 5.3, 5.7, 5.7, 6.2, 6.5, 6.4, 6.4, 5.9, 5.9, 5.6, 5.2, 5.2, 5.1,
                    4.8, 4.7, 4.4, 4.2, 4.2, 4.1, 4.3, 4.0, 4.1
                ]
            }
        ],
        "referenceLineAnnotations": [
            {
                "text": "A test x axis reference line annotation",
                "value": 34,
                "axis": "x"
            },
            {
                "text": "A test y axis reference line annotation",
                "value": 12,
                "axis": "y",
                "labelWidth": 100
            }
        ]
    })
}}

Nunjucks macro options

Name	Type	Required	Description
chartType	string	true if iframe not set	The type of chart to render. Supported types include: 'line', 'bar', 'column', 'scatter', 'columnrange', 'boxplot' and 'area'. Will be ignored if an iframe url is set.
unsupportedChartText	string	false	Optional text override to display after the chart type when it's not supported. Defaults to "chart type - chart type is not supported"
instructions	string	false	Instructions for keyboard users on how to interact with the chart. This text will be read aloud by screen readers to guide navigation and interaction.
theme	string	false	The theme to apply to the chart. Either `primary` or `alternate`. Defaults to `primary`. Will be ignored if an iframe url is set.
headingLevel	number	false	Number used to determine the heading level of the title. Use to ensure the title has a correct semantic order on the page. Accepts a value between 1 and 4, defaulting to 2 if not provided.
title	string	true	The main title of the chart.
subtitle	string	false	A subtitle that appears under the main title.
id	string	true	A unique identifier for the chart instance or iframe.
caption	string	false	A caption providing additional context for the chart.
description	string	true	A textual description of the chart for screen readers.
download	object	false	Object for (download)[#download] options.
legend	boolean	false	Whether the legend is displayed. Defaults to `true`. Note that legends are automatically hidden for single series charts. Will be ignored if an iframe url is set.
yAxis	object	true if iframe not set	Defines the vertical axis y-axis configuration parameters. Will be ignored if an iframe url is set.
xAxis	object	true if iframe not set	Defines the horizontal axis x-axis configuration parameters. Will be ignored if an iframe url is set.
series	array	true if iframe not set	The data series to be plotted, including labels and values. Will be ignored if an iframe url is set. Note: The number of series is limited by the selected theme - up to 6 series for the primary theme and 5 series for the alternate theme. Any additional series beyond these limits will be ignored and not displayed.
useStackedLayout	boolean	false	Determines whether the chart should use a stacked layout. It is useful only for bar and column charts. Will be ignored if an iframe url is set.
percentageHeightDesktop	integer	false	Sets the percentage plot height at desktop, relative to the width. If undefined the chart will fall back to the default height of 400px at desktop. Does not apply to bar charts. Will be ignored if an iframe url is set.
percentageHeightMobile	integer	false	Sets the percentage plot height at mobile, relative to the width. If undefined the chart will fall back to the default height of 400px at mobile. Does not apply to bar charts. Will be ignored if an iframe url is set.

annotations	array	false	An array of point annotations. Will be ignored if an iframe url is set.
rangeAnnotations	array	false	An array of range annotations. Will be ignored if an iframe url is set.
referenceLineAnnotations	array	false	An array of reference line annotations. Will be ignored if an iframe url is set.
estimateLineLabel	string	false	Label for the estimate line in the legend. Used in column charts with confidence intervals. Will be ignored if an iframe url is set.
uncertaintyRangeLabel	string	false	Label for the confidence interval in the legend. Used in column charts showing uncertainty ranges. Will be ignored if an iframe url is set.
iframeUrl	string	false	A url for a visualisation to display in an iframe instead of displaying a Highcharts chart.
footnotes	`Object<Footnotes>`	false	Footnotes to appear below the chart in a 'details' element
fallbackImageUrl	string	false	A url for a fallback image to display instead of the chart or iframe visualisation if JavaScript is disabled. If a fallback image is passed with an iframeUrl parameter, the iframe will be hidden for non-JavaScript users. If it is not passed, it is assumed the iframe content will provide a fallback image to be displayed inside the iframe.
fallbackImageAlt	string	false	Alt text for the fallback image - a short description only, as the description field describes the chart for screen readers. Defaults to "Fallback image for the chart as JavaScript is disabled"
iframeAspectRatio	string	false	Sets the aspect ratio for iframe charts. Only applicable when using an iframe chart. Acceptable values are 16-9, 4-3, 21-9, 1-1, 3-2, and 9-16. The value must be provided in the x-y format (e.g. 16-9). If an unsupported value is provided or a value is not provided, the aspect ratio will default to 16-9.

Download
Property	Type	Required	Description
title	string	false	The title displayed above the download options.
itemsList	array	false	An array of items available for download, each described by a (DownloadItem)[#DownloadItem].

DownloadItem
Property	Type	Required	Description
text	string	true	The label or description of the downloadable item.
url	string	true	The URL to the downloadable resource.

Y_Axis
Name	Type	Required	Description
title	string	true	The title text displayed on the y-axis. Note that for any chart type apart from bar charts, a maximum character limit of 50 characters is recommended to avoid the axis title being cut off at mobile.
labelFormat	string	false	A format string for the axis label. Examples of string formats can be found in these docs (opens in a new tab) .
tickIntervalMobile	number	false	The interval of the tick marks in axis units at mobile. Useful when you want to space out the labels (e.g. show every 2nd or 5th label).
tickIntervalDesktop	number	false	The interval of the tick marks in axis units at desktop. Useful when you want to space out the labels (e.g. show every 2nd or 5th label).
customReferenceLineValue	float or int	false	A custom value to display a darker reference line. If not supplied, the darker will appear at zero. The custom value is only used for column charts and line charts - for other chart types it will be ignored, and the darker line will appear at zero.
min	number	false	Sets the minimum value for the Y-axis. Relevant for Line, bar, area, column chart, column-range, boxplot and scatter charts.
max	number	false	Sets the maximum value for the Y-axis. Relevant for Line, bar, area, column chart, column-range, boxplot and scatter charts.
startOnTick	boolean	false	Align the axis to start on a tick. Relevant for Line, bar, area, column chart, column-range, boxplot and scatter charts.
endOnTick	boolean	false	Align the axis to end on a tick. Relevant for Line, bar, area, column chart, column-range, boxplot and scatter charts.

X_Axis
Name	Type	Required	Description
title	string	false	The title text displayed on the x-axis. Note: x-axis titles are not supported for bar chart types.
labelFormat	string	false	A format string for the x-axis label. Examples of string formats can be found in these docs (opens in a new tab) .
categories	array	false	Labels for each tick mark along the x-axis.
type	string	false	The type of axis. Can be one of `linear`, `logarithmic`, `datetime` or `category`. Defaults to linear.
tickIntervalMobile	number	false	The interval of the tick marks in axis units at mobile. Useful when you want to space out the labels (e.g. show every 2nd or 5th label).
tickIntervalDesktop	number	false	The interval of the tick marks in axis units at desktop. Useful when you want to space out the labels (e.g. show every 2nd or 5th label).
min	number	false	Sets the minimum value for the X-axis. Relevant only for scatter charts.
max	number	false	Sets the maximum value for the X-axis. Relevant only for scatter charts.
startOnTick	boolean	false	Align the axis to start on a tick. Relevant only for scatter charts.
endOnTick	boolean	false	Align the axis to end on a tick. Relevant only for scatter charts.

Series
Name	Type	Required	Description
name	string	true	The name of the series.
data	array	true	The data values for the series. Each value corresponds to a category on the x-axis.
dataLabels	boolean	false	Options for whether the DataLabel is displayed. Defaults to `false`. This option is only available for bar chart and clustered bar charts with two or fewer series, and 20 or fewer data points in any series.
marker	boolean	false	Options for whether the Marker is displayed on the data points. Defaults to `false`. This option is only available for line charts.
type	string	false	Specifies the configuration type to apply to the series. Supported types include 'line' and 'scatter'. By default, it aligns with the chart type. This is used when combining multiple chart types within a single chart. Note: Only the following chart type combinations are supported: "column with line" and "columnrange with scatter". For column with line, only one line series is supported. Additional line series will be ignored.
connectNulls	boolean	false	Whether to connect lines that have a data point missing. Only relevant for line charts.

Point annotations
Name	Type	Required	Description
text	string	true	The annotation text.
point	object	false	The x and y coordinates for the annotation
labelOffsetX (px)	int	true	The x offset in px of the label from the annotation point
labelOffsetY (px)	int	true	The y offset in px of the label from the annotation point

Point
Name	Type	Required	Description
xValue	float or int	true	The x axis value of the annotation. For category axes this is the zero based index of the x axis categories array. It must be an integer in this scenario.
yValue	float	true	The y axis value of the annotation

Range annotations
Name	Type	Required	Description
text	string	true	The annotation text.
range	Object	true	The xValue or yValue coordinates for the annotation
axis	string	true	The axis the range annotation should be applied to. Should be one of 'x' or 'y'. Note that for bar charts 'x' will be the vertical axis, and 'y' will be the horizontal axis.
labelInside	boolean	true	Whether the label for the range sits inside or outside the shaded area
labelOffsetX (px)	int	false	The horizontal offset in px of the label from it's default position. Ignored if labelInside is true.
labelOffsetY (px)	int	false	The vertical offset in px of the label from it's default position. Ignored if labelInside is true.
labelWidth (px)	int	false	The width of the label in pixels - the label text will wrap if it is wider than this value. If undefined, the label will be set to 150px wide.

Range
Name	Type	Required	Description
axisValue1	float or int	true	The starting point on the axis for the annotation. For category axes this is the zero based index of the categories array. It must be an integer in this scenario.
axisValue2	float or int	true	The ending pont on the axis for the annotation. For category axes this is the zero based index of the axis categories array. It must be an integer in this scenario.

Reference line annotations
Name	Type	Required	Description
text	string	true	The annotation text.
value	float or int	true	The x axis or y axis value for the annotation. For category axes this is the zero based index of the categories array. It must be an integer in this scenario.
axis	string	true	The axis the range annotation should be applied to. Should be one of 'x' or 'y'. Note that for bar charts 'x' will be the vertical axis, and 'y' will be the horizontal axis.
labelWidth (px)	int	false	The width of the label in pixels - the label text will wrap if it is wider than this value. If undefined, the label will be set to 150px wide.
labelOffsetX (px)	int	false	The horizontal offset in px of the label from it's default position.
labelOffsetY (px)	int	false	The vertical offset in px of the label from it's default position.

Footnotes
Name	Type	Required	Description
title	string	true	The title text for the footnotes heading
content	string	true	HTML content for the footnotes

HTML

<div data-highcharts-base-chart data-highcharts-type="line" data-highcharts-theme="primary"
  data-highcharts-title="Sales volumes and values saw moderate growth in July 2024" data-highcharts-id="id"
  data-highcharts-percentage-height-desktop="35" data-highcharts-percentage-height-mobile="90"
  data-highcharts-x-axis-tick-interval-mobile="30" data-highcharts-x-axis-tick-interval-desktop="15">
  <figure class="ons-chart" aria-describedby="chart-audio-description-id">
    <h4 class="ons-chart__title">Sales volumes and values saw moderate growth in July 2024</h4>
    <h5 class="ons-chart__subtitle">Figure 6: Upward contribution from housing and household services (including energy)
      saw the annual CPIH inflation rate rise</h5>
    <p class="ons-u-vh" id="chart-audio-description-id">Line chart showing the annual rate of inflation for the Consumer
      Prices Index including owner occupiers’ housing costs (CPIH) and its components.</p>
    <div data-highcharts-chart-container class="ons-chart__container" tabindex="0" role="region"
      aria-label="chart container" aria-describedby="chart-instructions-id">
      <div id="chart-instructions-id" class="ons-u-vh">Use the Tab key to move focus into the chart. Once inside, use
        the arrow keys to navigate between data points. As you move, tooltips will be announced to describe each point.
        Touch device users, explore by touch or with swipe gestures.</div>
      <div data-highcharts-chart class="ons-chart__chart"></div>
    </div>
    <ul class="ons-chart__annotations-footnotes" aria-hidden="true" data-annotations-footnotes>
      <li class="ons-chart__annotations-footnotes_item">
        <span class="ons-chart__annotations-footnotes-number">1</span> A test x axis reference line annotation
      </li>
      <li class="ons-chart__annotations-footnotes_item">
        <span class="ons-chart__annotations-footnotes-number">2</span> A test y axis reference line annotation
      </li>
    </ul>
    <figcaption class="ons-chart__caption">Source: Monthly Business Survey, Retails Sales Inquiry from the Office for
      National Statistics</figcaption>
  </figure>
  <h6 class="ons-chart__download-title">Download Figure 1 data</h6>
  <ol class="ons-list">
    <li class="ons-list__item">
      <a href="#" class="ons-list__link">Excel spreadsheet (XLSX format, 18KB)</a>
    </li>
    <li class="ons-list__item">
      <a href="#" class="ons-list__link">Simple text file (CSV format, 25KB)</a>
    </li>
    <li class="ons-list__item">
      <a href="#" class="ons-list__link">Image (PNG format, 25KB)</a>
    </li>
  </ol>
  <!-- Set scripts to pass the config values as json to the JavaScript -->
  <!-- prettier-ignore-start -->
  <script type="application/json" data-highcharts-config--id>
    {
      "chart": {
        "type": "line"
      },
      "legend": {
        "enabled": true
      },
      "yAxis": {
        "title": {
          "text": "Sales"
        },
        "labels": {
          "format": "{value:,.f}"
        }
      },
      "xAxis": {
        "title": {
          "text": "Year"
        },
        "categories": ["Oct 2014", "Nov 2014", "Dec 2014", "Jan 2015", "Feb 2015", "Mar 2015", "Apr 2015", "May 2015",
          "Jun 2015", "Jul 2015", "Aug 2015", "Sep 2015", "Oct 2015", "Nov 2015", "Dec 2015", "Jan 2016", "Feb 2016",
          "Mar 2016", "Apr 2016", "May 2016", "Jun 2016", "Jul 2016", "Aug 2016", "Sep 2016", "Oct 2016", "Nov 2016",
          "Dec 2016", "Jan 2017", "Feb 2017", "Mar 2017", "Apr 2017", "May 2017", "Jun 2017", "Jul 2017", "Aug 2017",
          "Sep 2017", "Oct 2017", "Nov 2017", "Dec 2017", "Jan 2018", "Feb 2018", "Mar 2018", "Apr 2018", "May 2018",
          "Jun 2018", "Jul 2018", "Aug 2018", "Sep 2018", "Oct 2018", "Nov 2018", "Dec 2018", "Jan 2019", "Feb 2019",
          "Mar 2019", "Apr 2019", "May 2019", "Jun 2019", "Jul 2019", "Aug 2019", "Sep 2019", "Oct 2019", "Nov 2019",
          "Dec 2019", "Jan 2020", "Feb 2020", "Mar 2020", "Apr 2020", "May 2020", "Jun 2020", "Jul 2020", "Aug 2020",
          "Sep 2020", "Oct 2020", "Nov 2020", "Dec 2020", "Jan 2021", "Feb 2021", "Mar 2021", "Apr 2021", "May 2021",
          "Jun 2021", "Jul 2021", "Aug 2021", "Sep 2021", "Oct 2021", "Nov 2021", "Dec 2021", "Jan 2022", "Feb 2022",
          "Mar 2022", "Apr 2022", "May 2022", "Jun 2022", "Jul 2022", "Aug 2022", "Sep 2022", "Oct 2022", "Nov 2022",
          "Dec 2022", "Jan 2023", "Feb 2023", "Mar 2023", "Apr 2023", "May 2023", "Jun 2023", "Jul 2023", "Aug 2023",
          "Sep 2023", "Oct 2023", "Nov 2023", "Dec 2023", "Jan 2024", "Feb 2024", "Mar 2024", "Apr 2024", "May 2024",
          "Jun 2024", "Jul 2024", "Aug 2024", "Sep 2024", "Oct 2024"
        ],
        "type": "linear",
        "labels": {
          "format": "{value:,.f}"
        }
      },
      "series": [{
        "name": "CPIH",
        "data": [1.3, 1.1, 0.7, 0.5, 0.4, 0.3, 0.3, 0.4, 0.3, 0.5, 0.4, 0.2, 0.2, 0.4, 0.5, 0.6, 0.6, 0.8, 0.7, 0.7,
          0.8, 0.9, 1, 1.3, 1.3, 1.5, 1.8, 1.9, 2.3, 2.3, 2.6, 2.7, 2.6, 2.6, 2.7, 2.8, 2.8, 2.8, 2.7, 2.7, 2.5,
          2.3, 2.2, 2.3, 2.3, 2.3, 2.4, 2.2, 2.2, 2.2, 2, 1.8, 1.8, 1.8, 2, 1.9, 1.9, 2, 1.7, 1.7, 1.5, 1.5, 1.4,
          1.8, 1.7, 1.5, 0.9, 0.7, 0.8, 1.1, 0.5, 0.7, 0.9, 0.6, 0.8, 0.9, 0.7, 1, 1.6, 2.1, 2.4, 2.1, 3, 2.9,
          3.8, 4.6, 4.8, 4.9, 5.5, 6.2, 7.8, 7.9, 8.2, 8.8, 8.6, 8.8, 9.6, 9.3, 9.2, 8.8, 9.2, 8.9, 7.8, 7.9, 7.3,
          6.4, 6.3, 6.3, 4.7, 4.2, 4.2, 4.2, 3.8, 3.8, 3, 2.8, 2.8, 3.1, 3.1, 2.6, 3.2
        ],
        "marker": {
          "enabled": false
        },
        "dataLabels": {
          "enabled": false
        },
        "connectNulls": false,
        "type": "line"
      }, {
        "name": "Goods",
        "data": [0.3, -0.2, -1, -1.5, -2, -2.1, -1.9, -1.8, -2, -1.8, -2, -2.4, -2.1, -1.9, -2.1, -1.5, -1.6, -1.7,
          -1.6, -1.8, -1.7, -1.5, -1.4, -0.5, -0.4, 0.2, 0.7, 1.1, 1.9, 2.5, 2.4, 3, 2.6, 2.7, 3.1, 3.2, 3.3, 3.3,
          3.4, 3.2, 3, 2.4, 2.6, 2.5, 2.5, 2.6, 2.7, 2.5, 2.3, 2.1, 1.8, 1.2, 1.3, 1.3, 1.4, 1.5, 1.5, 1.7, 1.2,
          0.9, 0.4, 0.5, 0.6, 1.3, 1, 0.6, -0.4, -0.9, -0.5, 0, -0.2, -0.3, 0.1, -0.7, -0.2, -0.2, -0.5, 0.1, 1.6,
          2.3, 2.9, 2.5, 3.3, 3.5, 4.9, 6.5, 6.9, 7.2, 8.3, 9.4, 12.4, 12.4, 12.7, 13.6, 13, 13.2, 14.8, 14.1,
          13.4, 13.3, 13.4, 12.7, 10, 9.7, 8.5, 6.1, 6.3, 6.2, 2.9, 2, 1.9, 1.8, 1.1, 0.9, -0.8, -1.3, -1.4, -0.5,
          -0.9, -1.4, -0.3
        ],
        "marker": {
          "enabled": false
        },
        "dataLabels": {
          "enabled": false
        },
        "connectNulls": false,
        "type": "line"
      }, {
        "name": "Services",
        "data": [2.2, 2.1, 2.1, 2.1, 2.2, 2.2, 2, 2.1, 2.1, 2.2, 2.2, 2.2, 2.1, 2.2, 2.5, 2.2, 2.3, 2.6, 2.4, 2.6,
          2.7, 2.6, 2.7, 2.6, 2.5, 2.4, 2.5, 2.5, 2.6, 2.2, 2.8, 2.6, 2.5, 2.4, 2.5, 2.5, 2.4, 2.4, 2.2, 2.3, 2.1,
          2.1, 1.9, 2.1, 2, 2, 2.2, 2, 2.1, 2.2, 2.1, 2.2, 2.2, 2.2, 2.5, 2.3, 2.2, 2.2, 2, 2.2, 2.2, 2.2, 1.9,
          2.1, 2.2, 2.2, 1.9, 1.8, 1.7, 2, 1, 1.5, 1.5, 1.5, 1.6, 1.7, 1.6, 1.6, 1.7, 1.9, 2.1, 1.8, 2.7, 2.5,
          2.9, 3, 3.1, 3.1, 3.2, 3.7, 4.1, 4.3, 4.5, 4.9, 5.1, 5.3, 5.3, 5.4, 5.8, 5.2, 5.6, 5.7, 6, 6.3, 6.3,
          6.5, 6.1, 6.3, 6.2, 6, 6, 6.1, 6, 6, 6, 5.9, 6, 5.7, 5.9, 5.6, 5.6
        ],
        "marker": {
          "enabled": false
        },
        "dataLabels": {
          "enabled": false
        },
        "connectNulls": false,
        "type": "line"
      }, {
        "name": "CPIH excl energy, food, alcohol \u0026 tobacco",
        "data": [1.5, 1.3, 1.4, 1.5, 1.4, 1.2, 1.1, 1.2, 1, 1.3, 1.2, 1.2, 1.3, 1.4, 1.5, 1.4, 1.4, 1.6, 1.5, 1.5,
          1.6, 1.6, 1.5, 1.7, 1.6, 1.7, 1.8, 1.8, 2.1, 1.9, 2.4, 2.5, 2.4, 2.4, 2.6, 2.5, 2.5, 2.5, 2.3, 2.4, 2.2,
          2.1, 2, 2, 1.8, 1.8, 1.9, 1.8, 1.8, 1.8, 1.8, 1.8, 1.8, 1.8, 1.7, 1.7, 1.7, 1.9, 1.5, 1.6, 1.7, 1.7,
          1.4, 1.6, 1.7, 1.6, 1.5, 1.3, 1.5, 1.8, 1, 1.4, 1.5, 1.2, 1.5, 1.5, 1.1, 1.3, 1.5, 2, 2.3, 1.9, 2.9,
          2.7, 3.1, 3.6, 3.8, 4, 4.6, 5.1, 5.4, 5.2, 5.2, 5.5, 5.6, 5.8, 5.8, 5.7, 5.8, 5.3, 5.7, 5.7, 6.2, 6.5,
          6.4, 6.4, 5.9, 5.9, 5.6, 5.2, 5.2, 5.1, 4.8, 4.7, 4.4, 4.2, 4.2, 4.1, 4.3, 4, 4.1
        ],
        "marker": {
          "enabled": false
        },
        "dataLabels": {
          "enabled": false
        },
        "connectNulls": false,
        "type": "line"
      }]
    }
  </script>
  <script type="application/json" data-highcharts-reference-line-annotations--id>
    [{
      "text": "A test x axis reference line annotation",
      "value": 34,
      "axis": "x"
    }, {
      "text": "A test y axis reference line annotation",
      "value": 12,
      "axis": "y",
      "labelWidth": 100
    }]
  </script>
  <!-- prettier-ignore-end -->
</div>

Line chart with range annotations inside

Use this when you require range annotations inside your line charts.

Open this example in a new tab(Example Line Chart With Range Annotations Inside)

Example Line Chart With Range Annotations Inside contents

Nunjucksfor Example Line Chart With Range Annotations Inside
Nunjucks macro optionsfor Example Line Chart With Range Annotations Inside
HTMLfor Example Line Chart With Range Annotations Inside

Nunjucks

{% from "components/chart/_macro.njk" import onsChart %}

{{
    onsChart({
        "chartType": "line",
        "description": "Line chart showing the annual rate of inflation for the Consumer Prices Index including owner occupiers’ housing costs (CPIH) and its components.",
        "theme": "primary",
        "title": "Sales volumes and values saw moderate growth in July 2024",
        "subtitle": "Figure 6: Upward contribution from housing and household services (including energy) saw the annual CPIH inflation rate rise",
        "id": "id",
        "headingLevel": 4,
        "caption": "Source: Monthly Business Survey, Retails Sales Inquiry from the Office for National Statistics",
        "download": {
            'title': 'Download Figure 1 data',
            'itemsList': [
            {
                "text": "Excel spreadsheet (XLSX format, 18KB)",
                "url": "#"
            },
            {
                "text": "Simple text file (CSV format, 25KB)",
                "url": "#"
            },
            {

                "text": "Image (PNG format, 25KB)",
                "url": "#"
            }
        ]},
        "legend": true,
        "xAxis": {
            "title": "Year",
            "type": "linear",
            "labelFormat": "{value:,.f}",
            "categories": [
                'Oct 2014',
                'Nov 2014',
                'Dec 2014',
                'Jan 2015',
                'Feb 2015',
                'Mar 2015',
                'Apr 2015',
                'May 2015',
                'Jun 2015',
                'Jul 2015',
                'Aug 2015',
                'Sep 2015',
                'Oct 2015',
                'Nov 2015',
                'Dec 2015',
                'Jan 2016',
                'Feb 2016',
                'Mar 2016',
                'Apr 2016',
                'May 2016',
                'Jun 2016',
                'Jul 2016',
                'Aug 2016',
                'Sep 2016',
                'Oct 2016',
                'Nov 2016',
                'Dec 2016',
                'Jan 2017',
                'Feb 2017',
                'Mar 2017',
                'Apr 2017',
                'May 2017',
                'Jun 2017',
                'Jul 2017',
                'Aug 2017',
                'Sep 2017',
                'Oct 2017',
                'Nov 2017',
                'Dec 2017',
                'Jan 2018',
                'Feb 2018',
                'Mar 2018',
                'Apr 2018',
                'May 2018',
                'Jun 2018',
                'Jul 2018',
                'Aug 2018',
                'Sep 2018',
                'Oct 2018',
                'Nov 2018',
                'Dec 2018',
                'Jan 2019',
                'Feb 2019',
                'Mar 2019',
                'Apr 2019',
                'May 2019',
                'Jun 2019',
                'Jul 2019',
                'Aug 2019',
                'Sep 2019',
                'Oct 2019',
                'Nov 2019',
                'Dec 2019',
                'Jan 2020',
                'Feb 2020',
                'Mar 2020',
                'Apr 2020',
                'May 2020',
                'Jun 2020',
                'Jul 2020',
                'Aug 2020',
                'Sep 2020',
                'Oct 2020',
                'Nov 2020',
                'Dec 2020',
                'Jan 2021',
                'Feb 2021',
                'Mar 2021',
                'Apr 2021',
                'May 2021',
                'Jun 2021',
                'Jul 2021',
                'Aug 2021',
                'Sep 2021',
                'Oct 2021',
                'Nov 2021',
                'Dec 2021',
                'Jan 2022',
                'Feb 2022',
                'Mar 2022',
                'Apr 2022',
                'May 2022',
                'Jun 2022',
                'Jul 2022',
                'Aug 2022',
                'Sep 2022',
                'Oct 2022',
                'Nov 2022',
                'Dec 2022',
                'Jan 2023',
                'Feb 2023',
                'Mar 2023',
                'Apr 2023',
                'May 2023',
                'Jun 2023',
                'Jul 2023',
                'Aug 2023',
                'Sep 2023',
                'Oct 2023',
                'Nov 2023',
                'Dec 2023',
                'Jan 2024',
                'Feb 2024',
                'Mar 2024',
                'Apr 2024',
                'May 2024',
                'Jun 2024',
                'Jul 2024',
                'Aug 2024',
                'Sep 2024',
                'Oct 2024'
            ],
            "tickIntervalDesktop": 15,
            "tickIntervalMobile": 30
        },
        "yAxis": {
            "title": "Sales",
            "labelFormat": "{value:,.f}"
        },
        "percentageHeightDesktop": 35,
        "percentageHeightMobile": 90,
        "series": [
            {
                "name": 'CPIH',
                "data": [
                    1.3, 1.1, 0.7, 0.5, 0.4, 0.3, 0.3, 0.4, 0.3, 0.5, 0.4, 0.2, 0.2, 0.4, 0.5, 0.6,
                    0.6, 0.8, 0.7, 0.7, 0.8, 0.9, 1.0, 1.3, 1.3, 1.5, 1.8, 1.9, 2.3, 2.3, 2.6, 2.7,
                    2.6, 2.6, 2.7, 2.8, 2.8, 2.8, 2.7, 2.7, 2.5, 2.3, 2.2, 2.3, 2.3, 2.3, 2.4, 2.2,
                    2.2, 2.2, 2.0, 1.8, 1.8, 1.8, 2.0, 1.9, 1.9, 2.0, 1.7, 1.7, 1.5, 1.5, 1.4, 1.8,
                    1.7, 1.5, 0.9, 0.7, 0.8, 1.1, 0.5, 0.7, 0.9, 0.6, 0.8, 0.9, 0.7, 1.0, 1.6, 2.1,
                    2.4, 2.1, 3.0, 2.9, 3.8, 4.6, 4.8, 4.9, 5.5, 6.2, 7.8, 7.9, 8.2, 8.8, 8.6, 8.8,
                    9.6, 9.3, 9.2, 8.8, 9.2, 8.9, 7.8, 7.9, 7.3, 6.4, 6.3, 6.3, 4.7, 4.2, 4.2, 4.2,
                    3.8, 3.8, 3.0, 2.8, 2.8, 3.1, 3.1, 2.6, 3.2
                ]
            },
            {
                "name": 'Goods',
                "data": [
                    0.3, -0.2, -1.0, -1.5, -2.0, -2.1, -1.9, -1.8, -2.0, -1.8, -2.0, -2.4, -2.1,
                    -1.9, -2.1, -1.5, -1.6, -1.7, -1.6, -1.8, -1.7, -1.5, -1.4, -0.5, -0.4, 0.2,
                    0.7, 1.1, 1.9, 2.5, 2.4, 3.0, 2.6, 2.7, 3.1, 3.2, 3.3, 3.3, 3.4, 3.2, 3.0, 2.4,
                    2.6, 2.5, 2.5, 2.6, 2.7, 2.5, 2.3, 2.1, 1.8, 1.2, 1.3, 1.3, 1.4, 1.5, 1.5, 1.7,
                    1.2, 0.9, 0.4, 0.5, 0.6, 1.3, 1.0, 0.6, -0.4, -0.9, -0.5, 0.0, -0.2, -0.3, 0.1,
                    -0.7, -0.2, -0.2, -0.5, 0.1, 1.6, 2.3, 2.9, 2.5, 3.3, 3.5, 4.9, 6.5, 6.9, 7.2,
                    8.3, 9.4, 12.4, 12.4, 12.7, 13.6, 13.0, 13.2, 14.8, 14.1, 13.4, 13.3, 13.4,
                    12.7, 10.0, 9.7, 8.5, 6.1, 6.3, 6.2, 2.9, 2.0, 1.9, 1.8, 1.1, 0.9, -0.8, -1.3,
                    -1.4, -0.5, -0.9, -1.4, -0.3
                ]
            },
            {
                "name": 'Services',
                "data": [
                    2.2, 2.1, 2.1, 2.1, 2.2, 2.2, 2.0, 2.1, 2.1, 2.2, 2.2, 2.2, 2.1, 2.2, 2.5, 2.2,
                    2.3, 2.6, 2.4, 2.6, 2.7, 2.6, 2.7, 2.6, 2.5, 2.4, 2.5, 2.5, 2.6, 2.2, 2.8, 2.6,
                    2.5, 2.4, 2.5, 2.5, 2.4, 2.4, 2.2, 2.3, 2.1, 2.1, 1.9, 2.1, 2.0, 2.0, 2.2, 2.0,
                    2.1, 2.2, 2.1, 2.2, 2.2, 2.2, 2.5, 2.3, 2.2, 2.2, 2.0, 2.2, 2.2, 2.2, 1.9, 2.1,
                    2.2, 2.2, 1.9, 1.8, 1.7, 2.0, 1.0, 1.5, 1.5, 1.5, 1.6, 1.7, 1.6, 1.6, 1.7, 1.9,
                    2.1, 1.8, 2.7, 2.5, 2.9, 3.0, 3.1, 3.1, 3.2, 3.7, 4.1, 4.3, 4.5, 4.9, 5.1, 5.3,
                    5.3, 5.4, 5.8, 5.2, 5.6, 5.7, 6.0, 6.3, 6.3, 6.5, 6.1, 6.3, 6.2, 6.0, 6.0, 6.1,
                    6.0, 6.0, 6.0, 5.9, 6.0, 5.7, 5.9, 5.6, 5.6
                ]
            },
            {
                "name": 'CPIH excl energy, food, alcohol & tobacco',
                "data": [
                    1.5, 1.3, 1.4, 1.5, 1.4, 1.2, 1.1, 1.2, 1.0, 1.3, 1.2, 1.2, 1.3, 1.4, 1.5, 1.4,
                    1.4, 1.6, 1.5, 1.5, 1.6, 1.6, 1.5, 1.7, 1.6, 1.7, 1.8, 1.8, 2.1, 1.9, 2.4, 2.5,
                    2.4, 2.4, 2.6, 2.5, 2.5, 2.5, 2.3, 2.4, 2.2, 2.1, 2.0, 2.0, 1.8, 1.8, 1.9, 1.8,
                    1.8, 1.8, 1.8, 1.8, 1.8, 1.8, 1.7, 1.7, 1.7, 1.9, 1.5, 1.6, 1.7, 1.7, 1.4, 1.6,
                    1.7, 1.6, 1.5, 1.3, 1.5, 1.8, 1.0, 1.4, 1.5, 1.2, 1.5, 1.5, 1.1, 1.3, 1.5, 2.0,
                    2.3, 1.9, 2.9, 2.7, 3.1, 3.6, 3.8, 4.0, 4.6, 5.1, 5.4, 5.2, 5.2, 5.5, 5.6, 5.8,
                    5.8, 5.7, 5.8, 5.3, 5.7, 5.7, 6.2, 6.5, 6.4, 6.4, 5.9, 5.9, 5.6, 5.2, 5.2, 5.1,
                    4.8, 4.7, 4.4, 4.2, 4.2, 4.1, 4.3, 4.0, 4.1
                ]
            }
        ],
        "rangeAnnotations": [
            {
                "text": "A test x axis range annotation with the label inside",
                "range": {"axisValue1": 50, "axisValue2": 80},
                "axis": "x",
                "labelInside": true
            },
            {
                "text": "A test y axis range annotation with the label inside",
                "range": {"axisValue1": 5, "axisValue2": 10},
                "axis": "y",
                "labelInside": true,
                "labelWidth": 250
            }
        ]
    })
}}

Nunjucks macro options

Name	Type	Required	Description
chartType	string	true if iframe not set	The type of chart to render. Supported types include: 'line', 'bar', 'column', 'scatter', 'columnrange', 'boxplot' and 'area'. Will be ignored if an iframe url is set.
unsupportedChartText	string	false	Optional text override to display after the chart type when it's not supported. Defaults to "chart type - chart type is not supported"
instructions	string	false	Instructions for keyboard users on how to interact with the chart. This text will be read aloud by screen readers to guide navigation and interaction.
theme	string	false	The theme to apply to the chart. Either `primary` or `alternate`. Defaults to `primary`. Will be ignored if an iframe url is set.
headingLevel	number	false	Number used to determine the heading level of the title. Use to ensure the title has a correct semantic order on the page. Accepts a value between 1 and 4, defaulting to 2 if not provided.
title	string	true	The main title of the chart.
subtitle	string	false	A subtitle that appears under the main title.
id	string	true	A unique identifier for the chart instance or iframe.
caption	string	false	A caption providing additional context for the chart.
description	string	true	A textual description of the chart for screen readers.
download	object	false	Object for (download)[#download] options.
legend	boolean	false	Whether the legend is displayed. Defaults to `true`. Note that legends are automatically hidden for single series charts. Will be ignored if an iframe url is set.
yAxis	object	true if iframe not set	Defines the vertical axis y-axis configuration parameters. Will be ignored if an iframe url is set.
xAxis	object	true if iframe not set	Defines the horizontal axis x-axis configuration parameters. Will be ignored if an iframe url is set.
series	array	true if iframe not set	The data series to be plotted, including labels and values. Will be ignored if an iframe url is set. Note: The number of series is limited by the selected theme - up to 6 series for the primary theme and 5 series for the alternate theme. Any additional series beyond these limits will be ignored and not displayed.
useStackedLayout	boolean	false	Determines whether the chart should use a stacked layout. It is useful only for bar and column charts. Will be ignored if an iframe url is set.
percentageHeightDesktop	integer	false	Sets the percentage plot height at desktop, relative to the width. If undefined the chart will fall back to the default height of 400px at desktop. Does not apply to bar charts. Will be ignored if an iframe url is set.
percentageHeightMobile	integer	false	Sets the percentage plot height at mobile, relative to the width. If undefined the chart will fall back to the default height of 400px at mobile. Does not apply to bar charts. Will be ignored if an iframe url is set.

annotations	array	false	An array of point annotations. Will be ignored if an iframe url is set.
rangeAnnotations	array	false	An array of range annotations. Will be ignored if an iframe url is set.
referenceLineAnnotations	array	false	An array of reference line annotations. Will be ignored if an iframe url is set.
estimateLineLabel	string	false	Label for the estimate line in the legend. Used in column charts with confidence intervals. Will be ignored if an iframe url is set.
uncertaintyRangeLabel	string	false	Label for the confidence interval in the legend. Used in column charts showing uncertainty ranges. Will be ignored if an iframe url is set.
iframeUrl	string	false	A url for a visualisation to display in an iframe instead of displaying a Highcharts chart.
footnotes	`Object<Footnotes>`	false	Footnotes to appear below the chart in a 'details' element
fallbackImageUrl	string	false	A url for a fallback image to display instead of the chart or iframe visualisation if JavaScript is disabled. If a fallback image is passed with an iframeUrl parameter, the iframe will be hidden for non-JavaScript users. If it is not passed, it is assumed the iframe content will provide a fallback image to be displayed inside the iframe.
fallbackImageAlt	string	false	Alt text for the fallback image - a short description only, as the description field describes the chart for screen readers. Defaults to "Fallback image for the chart as JavaScript is disabled"
iframeAspectRatio	string	false	Sets the aspect ratio for iframe charts. Only applicable when using an iframe chart. Acceptable values are 16-9, 4-3, 21-9, 1-1, 3-2, and 9-16. The value must be provided in the x-y format (e.g. 16-9). If an unsupported value is provided or a value is not provided, the aspect ratio will default to 16-9.

Download
Property	Type	Required	Description
title	string	false	The title displayed above the download options.
itemsList	array	false	An array of items available for download, each described by a (DownloadItem)[#DownloadItem].

DownloadItem
Property	Type	Required	Description
text	string	true	The label or description of the downloadable item.
url	string	true	The URL to the downloadable resource.

Y_Axis
Name	Type	Required	Description
title	string	true	The title text displayed on the y-axis. Note that for any chart type apart from bar charts, a maximum character limit of 50 characters is recommended to avoid the axis title being cut off at mobile.
labelFormat	string	false	A format string for the axis label. Examples of string formats can be found in these docs (opens in a new tab) .
tickIntervalMobile	number	false	The interval of the tick marks in axis units at mobile. Useful when you want to space out the labels (e.g. show every 2nd or 5th label).
tickIntervalDesktop	number	false	The interval of the tick marks in axis units at desktop. Useful when you want to space out the labels (e.g. show every 2nd or 5th label).
customReferenceLineValue	float or int	false	A custom value to display a darker reference line. If not supplied, the darker will appear at zero. The custom value is only used for column charts and line charts - for other chart types it will be ignored, and the darker line will appear at zero.
min	number	false	Sets the minimum value for the Y-axis. Relevant for Line, bar, area, column chart, column-range, boxplot and scatter charts.
max	number	false	Sets the maximum value for the Y-axis. Relevant for Line, bar, area, column chart, column-range, boxplot and scatter charts.
startOnTick	boolean	false	Align the axis to start on a tick. Relevant for Line, bar, area, column chart, column-range, boxplot and scatter charts.
endOnTick	boolean	false	Align the axis to end on a tick. Relevant for Line, bar, area, column chart, column-range, boxplot and scatter charts.

X_Axis
Name	Type	Required	Description
title	string	false	The title text displayed on the x-axis. Note: x-axis titles are not supported for bar chart types.
labelFormat	string	false	A format string for the x-axis label. Examples of string formats can be found in these docs (opens in a new tab) .
categories	array	false	Labels for each tick mark along the x-axis.
type	string	false	The type of axis. Can be one of `linear`, `logarithmic`, `datetime` or `category`. Defaults to linear.
tickIntervalMobile	number	false	The interval of the tick marks in axis units at mobile. Useful when you want to space out the labels (e.g. show every 2nd or 5th label).
tickIntervalDesktop	number	false	The interval of the tick marks in axis units at desktop. Useful when you want to space out the labels (e.g. show every 2nd or 5th label).
min	number	false	Sets the minimum value for the X-axis. Relevant only for scatter charts.
max	number	false	Sets the maximum value for the X-axis. Relevant only for scatter charts.
startOnTick	boolean	false	Align the axis to start on a tick. Relevant only for scatter charts.
endOnTick	boolean	false	Align the axis to end on a tick. Relevant only for scatter charts.

Series
Name	Type	Required	Description
name	string	true	The name of the series.
data	array	true	The data values for the series. Each value corresponds to a category on the x-axis.
dataLabels	boolean	false	Options for whether the DataLabel is displayed. Defaults to `false`. This option is only available for bar chart and clustered bar charts with two or fewer series, and 20 or fewer data points in any series.
marker	boolean	false	Options for whether the Marker is displayed on the data points. Defaults to `false`. This option is only available for line charts.
type	string	false	Specifies the configuration type to apply to the series. Supported types include 'line' and 'scatter'. By default, it aligns with the chart type. This is used when combining multiple chart types within a single chart. Note: Only the following chart type combinations are supported: "column with line" and "columnrange with scatter". For column with line, only one line series is supported. Additional line series will be ignored.
connectNulls	boolean	false	Whether to connect lines that have a data point missing. Only relevant for line charts.

Point annotations
Name	Type	Required	Description
text	string	true	The annotation text.
point	object	false	The x and y coordinates for the annotation
labelOffsetX (px)	int	true	The x offset in px of the label from the annotation point
labelOffsetY (px)	int	true	The y offset in px of the label from the annotation point

Point
Name	Type	Required	Description
xValue	float or int	true	The x axis value of the annotation. For category axes this is the zero based index of the x axis categories array. It must be an integer in this scenario.
yValue	float	true	The y axis value of the annotation

Range annotations
Name	Type	Required	Description
text	string	true	The annotation text.
range	Object	true	The xValue or yValue coordinates for the annotation
axis	string	true	The axis the range annotation should be applied to. Should be one of 'x' or 'y'. Note that for bar charts 'x' will be the vertical axis, and 'y' will be the horizontal axis.
labelInside	boolean	true	Whether the label for the range sits inside or outside the shaded area
labelOffsetX (px)	int	false	The horizontal offset in px of the label from it's default position. Ignored if labelInside is true.
labelOffsetY (px)	int	false	The vertical offset in px of the label from it's default position. Ignored if labelInside is true.
labelWidth (px)	int	false	The width of the label in pixels - the label text will wrap if it is wider than this value. If undefined, the label will be set to 150px wide.

Range
Name	Type	Required	Description
axisValue1	float or int	true	The starting point on the axis for the annotation. For category axes this is the zero based index of the categories array. It must be an integer in this scenario.
axisValue2	float or int	true	The ending pont on the axis for the annotation. For category axes this is the zero based index of the axis categories array. It must be an integer in this scenario.

Reference line annotations
Name	Type	Required	Description
text	string	true	The annotation text.
value	float or int	true	The x axis or y axis value for the annotation. For category axes this is the zero based index of the categories array. It must be an integer in this scenario.
axis	string	true	The axis the range annotation should be applied to. Should be one of 'x' or 'y'. Note that for bar charts 'x' will be the vertical axis, and 'y' will be the horizontal axis.
labelWidth (px)	int	false	The width of the label in pixels - the label text will wrap if it is wider than this value. If undefined, the label will be set to 150px wide.
labelOffsetX (px)	int	false	The horizontal offset in px of the label from it's default position.
labelOffsetY (px)	int	false	The vertical offset in px of the label from it's default position.

Footnotes
Name	Type	Required	Description
title	string	true	The title text for the footnotes heading
content	string	true	HTML content for the footnotes

HTML

<div data-highcharts-base-chart data-highcharts-type="line" data-highcharts-theme="primary"
  data-highcharts-title="Sales volumes and values saw moderate growth in July 2024" data-highcharts-id="id"
  data-highcharts-percentage-height-desktop="35" data-highcharts-percentage-height-mobile="90"
  data-highcharts-x-axis-tick-interval-mobile="30" data-highcharts-x-axis-tick-interval-desktop="15">
  <figure class="ons-chart" aria-describedby="chart-audio-description-id">
    <h4 class="ons-chart__title">Sales volumes and values saw moderate growth in July 2024</h4>
    <h5 class="ons-chart__subtitle">Figure 6: Upward contribution from housing and household services (including energy)
      saw the annual CPIH inflation rate rise</h5>
    <p class="ons-u-vh" id="chart-audio-description-id">Line chart showing the annual rate of inflation for the Consumer
      Prices Index including owner occupiers’ housing costs (CPIH) and its components.</p>
    <div data-highcharts-chart-container class="ons-chart__container" tabindex="0" role="region"
      aria-label="chart container" aria-describedby="chart-instructions-id">
      <div id="chart-instructions-id" class="ons-u-vh">Use the Tab key to move focus into the chart. Once inside, use
        the arrow keys to navigate between data points. As you move, tooltips will be announced to describe each point.
        Touch device users, explore by touch or with swipe gestures.</div>
      <div data-highcharts-chart class="ons-chart__chart"></div>
    </div>
    <ul class="ons-chart__annotations-footnotes" aria-hidden="true" data-annotations-footnotes>
      <li class="ons-chart__annotations-footnotes_item">
        <span class="ons-chart__annotations-footnotes-number">1</span> A test x axis range annotation with the label
        inside
      </li>
      <li class="ons-chart__annotations-footnotes_item">
        <span class="ons-chart__annotations-footnotes-number">2</span> A test y axis range annotation with the label
        inside
      </li>
    </ul>
    <figcaption class="ons-chart__caption">Source: Monthly Business Survey, Retails Sales Inquiry from the Office for
      National Statistics</figcaption>
  </figure>
  <h6 class="ons-chart__download-title">Download Figure 1 data</h6>
  <ol class="ons-list">
    <li class="ons-list__item">
      <a href="#" class="ons-list__link">Excel spreadsheet (XLSX format, 18KB)</a>
    </li>
    <li class="ons-list__item">
      <a href="#" class="ons-list__link">Simple text file (CSV format, 25KB)</a>
    </li>
    <li class="ons-list__item">
      <a href="#" class="ons-list__link">Image (PNG format, 25KB)</a>
    </li>
  </ol>
  <!-- Set scripts to pass the config values as json to the JavaScript -->
  <!-- prettier-ignore-start -->
  <script type="application/json" data-highcharts-config--id>
    {
      "chart": {
        "type": "line"
      },
      "legend": {
        "enabled": true
      },
      "yAxis": {
        "title": {
          "text": "Sales"
        },
        "labels": {
          "format": "{value:,.f}"
        }
      },
      "xAxis": {
        "title": {
          "text": "Year"
        },
        "categories": ["Oct 2014", "Nov 2014", "Dec 2014", "Jan 2015", "Feb 2015", "Mar 2015", "Apr 2015", "May 2015",
          "Jun 2015", "Jul 2015", "Aug 2015", "Sep 2015", "Oct 2015", "Nov 2015", "Dec 2015", "Jan 2016", "Feb 2016",
          "Mar 2016", "Apr 2016", "May 2016", "Jun 2016", "Jul 2016", "Aug 2016", "Sep 2016", "Oct 2016", "Nov 2016",
          "Dec 2016", "Jan 2017", "Feb 2017", "Mar 2017", "Apr 2017", "May 2017", "Jun 2017", "Jul 2017", "Aug 2017",
          "Sep 2017", "Oct 2017", "Nov 2017", "Dec 2017", "Jan 2018", "Feb 2018", "Mar 2018", "Apr 2018", "May 2018",
          "Jun 2018", "Jul 2018", "Aug 2018", "Sep 2018", "Oct 2018", "Nov 2018", "Dec 2018", "Jan 2019", "Feb 2019",
          "Mar 2019", "Apr 2019", "May 2019", "Jun 2019", "Jul 2019", "Aug 2019", "Sep 2019", "Oct 2019", "Nov 2019",
          "Dec 2019", "Jan 2020", "Feb 2020", "Mar 2020", "Apr 2020", "May 2020", "Jun 2020", "Jul 2020", "Aug 2020",
          "Sep 2020", "Oct 2020", "Nov 2020", "Dec 2020", "Jan 2021", "Feb 2021", "Mar 2021", "Apr 2021", "May 2021",
          "Jun 2021", "Jul 2021", "Aug 2021", "Sep 2021", "Oct 2021", "Nov 2021", "Dec 2021", "Jan 2022", "Feb 2022",
          "Mar 2022", "Apr 2022", "May 2022", "Jun 2022", "Jul 2022", "Aug 2022", "Sep 2022", "Oct 2022", "Nov 2022",
          "Dec 2022", "Jan 2023", "Feb 2023", "Mar 2023", "Apr 2023", "May 2023", "Jun 2023", "Jul 2023", "Aug 2023",
          "Sep 2023", "Oct 2023", "Nov 2023", "Dec 2023", "Jan 2024", "Feb 2024", "Mar 2024", "Apr 2024", "May 2024",
          "Jun 2024", "Jul 2024", "Aug 2024", "Sep 2024", "Oct 2024"
        ],
        "type": "linear",
        "labels": {
          "format": "{value:,.f}"
        }
      },
      "series": [{
        "name": "CPIH",
        "data": [1.3, 1.1, 0.7, 0.5, 0.4, 0.3, 0.3, 0.4, 0.3, 0.5, 0.4, 0.2, 0.2, 0.4, 0.5, 0.6, 0.6, 0.8, 0.7, 0.7,
          0.8, 0.9, 1, 1.3, 1.3, 1.5, 1.8, 1.9, 2.3, 2.3, 2.6, 2.7, 2.6, 2.6, 2.7, 2.8, 2.8, 2.8, 2.7, 2.7, 2.5,
          2.3, 2.2, 2.3, 2.3, 2.3, 2.4, 2.2, 2.2, 2.2, 2, 1.8, 1.8, 1.8, 2, 1.9, 1.9, 2, 1.7, 1.7, 1.5, 1.5, 1.4,
          1.8, 1.7, 1.5, 0.9, 0.7, 0.8, 1.1, 0.5, 0.7, 0.9, 0.6, 0.8, 0.9, 0.7, 1, 1.6, 2.1, 2.4, 2.1, 3, 2.9,
          3.8, 4.6, 4.8, 4.9, 5.5, 6.2, 7.8, 7.9, 8.2, 8.8, 8.6, 8.8, 9.6, 9.3, 9.2, 8.8, 9.2, 8.9, 7.8, 7.9, 7.3,
          6.4, 6.3, 6.3, 4.7, 4.2, 4.2, 4.2, 3.8, 3.8, 3, 2.8, 2.8, 3.1, 3.1, 2.6, 3.2
        ],
        "marker": {
          "enabled": false
        },
        "dataLabels": {
          "enabled": false
        },
        "connectNulls": false,
        "type": "line"
      }, {
        "name": "Goods",
        "data": [0.3, -0.2, -1, -1.5, -2, -2.1, -1.9, -1.8, -2, -1.8, -2, -2.4, -2.1, -1.9, -2.1, -1.5, -1.6, -1.7,
          -1.6, -1.8, -1.7, -1.5, -1.4, -0.5, -0.4, 0.2, 0.7, 1.1, 1.9, 2.5, 2.4, 3, 2.6, 2.7, 3.1, 3.2, 3.3, 3.3,
          3.4, 3.2, 3, 2.4, 2.6, 2.5, 2.5, 2.6, 2.7, 2.5, 2.3, 2.1, 1.8, 1.2, 1.3, 1.3, 1.4, 1.5, 1.5, 1.7, 1.2,
          0.9, 0.4, 0.5, 0.6, 1.3, 1, 0.6, -0.4, -0.9, -0.5, 0, -0.2, -0.3, 0.1, -0.7, -0.2, -0.2, -0.5, 0.1, 1.6,
          2.3, 2.9, 2.5, 3.3, 3.5, 4.9, 6.5, 6.9, 7.2, 8.3, 9.4, 12.4, 12.4, 12.7, 13.6, 13, 13.2, 14.8, 14.1,
          13.4, 13.3, 13.4, 12.7, 10, 9.7, 8.5, 6.1, 6.3, 6.2, 2.9, 2, 1.9, 1.8, 1.1, 0.9, -0.8, -1.3, -1.4, -0.5,
          -0.9, -1.4, -0.3
        ],
        "marker": {
          "enabled": false
        },
        "dataLabels": {
          "enabled": false
        },
        "connectNulls": false,
        "type": "line"
      }, {
        "name": "Services",
        "data": [2.2, 2.1, 2.1, 2.1, 2.2, 2.2, 2, 2.1, 2.1, 2.2, 2.2, 2.2, 2.1, 2.2, 2.5, 2.2, 2.3, 2.6, 2.4, 2.6,
          2.7, 2.6, 2.7, 2.6, 2.5, 2.4, 2.5, 2.5, 2.6, 2.2, 2.8, 2.6, 2.5, 2.4, 2.5, 2.5, 2.4, 2.4, 2.2, 2.3, 2.1,
          2.1, 1.9, 2.1, 2, 2, 2.2, 2, 2.1, 2.2, 2.1, 2.2, 2.2, 2.2, 2.5, 2.3, 2.2, 2.2, 2, 2.2, 2.2, 2.2, 1.9,
          2.1, 2.2, 2.2, 1.9, 1.8, 1.7, 2, 1, 1.5, 1.5, 1.5, 1.6, 1.7, 1.6, 1.6, 1.7, 1.9, 2.1, 1.8, 2.7, 2.5,
          2.9, 3, 3.1, 3.1, 3.2, 3.7, 4.1, 4.3, 4.5, 4.9, 5.1, 5.3, 5.3, 5.4, 5.8, 5.2, 5.6, 5.7, 6, 6.3, 6.3,
          6.5, 6.1, 6.3, 6.2, 6, 6, 6.1, 6, 6, 6, 5.9, 6, 5.7, 5.9, 5.6, 5.6
        ],
        "marker": {
          "enabled": false
        },
        "dataLabels": {
          "enabled": false
        },
        "connectNulls": false,
        "type": "line"
      }, {
        "name": "CPIH excl energy, food, alcohol \u0026 tobacco",
        "data": [1.5, 1.3, 1.4, 1.5, 1.4, 1.2, 1.1, 1.2, 1, 1.3, 1.2, 1.2, 1.3, 1.4, 1.5, 1.4, 1.4, 1.6, 1.5, 1.5,
          1.6, 1.6, 1.5, 1.7, 1.6, 1.7, 1.8, 1.8, 2.1, 1.9, 2.4, 2.5, 2.4, 2.4, 2.6, 2.5, 2.5, 2.5, 2.3, 2.4, 2.2,
          2.1, 2, 2, 1.8, 1.8, 1.9, 1.8, 1.8, 1.8, 1.8, 1.8, 1.8, 1.8, 1.7, 1.7, 1.7, 1.9, 1.5, 1.6, 1.7, 1.7,
          1.4, 1.6, 1.7, 1.6, 1.5, 1.3, 1.5, 1.8, 1, 1.4, 1.5, 1.2, 1.5, 1.5, 1.1, 1.3, 1.5, 2, 2.3, 1.9, 2.9,
          2.7, 3.1, 3.6, 3.8, 4, 4.6, 5.1, 5.4, 5.2, 5.2, 5.5, 5.6, 5.8, 5.8, 5.7, 5.8, 5.3, 5.7, 5.7, 6.2, 6.5,
          6.4, 6.4, 5.9, 5.9, 5.6, 5.2, 5.2, 5.1, 4.8, 4.7, 4.4, 4.2, 4.2, 4.1, 4.3, 4, 4.1
        ],
        "marker": {
          "enabled": false
        },
        "dataLabels": {
          "enabled": false
        },
        "connectNulls": false,
        "type": "line"
      }]
    }
  </script>
  <script type="application/json" data-highcharts-range-annotations--id>
    [{
      "text": "A test x axis range annotation with the label inside",
      "range": {
        "axisValue1": 50,
        "axisValue2": 80
      },
      "axis": "x",
      "labelInside": true
    }, {
      "text": "A test y axis range annotation with the label inside",
      "range": {
        "axisValue1": 5,
        "axisValue2": 10
      },
      "axis": "y",
      "labelInside": true,
      "labelWidth": 250
    }]
  </script>
  <!-- prettier-ignore-end -->
</div>

Line chart with range annotations outside left right

Use this when you require range annotations outside left right of your line charts.

Open this example in a new tab(Example Line Chart With Range Annotations Outside Left Right)

Example Line Chart With Range Annotations Outside Left Right contents

Nunjucksfor Example Line Chart With Range Annotations Outside Left Right
Nunjucks macro optionsfor Example Line Chart With Range Annotations Outside Left Right
HTMLfor Example Line Chart With Range Annotations Outside Left Right

Nunjucks

{% from "components/chart/_macro.njk" import onsChart %}

{{
    onsChart({
        "chartType": "line",
        "description": "Line chart showing the annual rate of inflation for the Consumer Prices Index including owner occupiers’ housing costs (CPIH) and its components.",
        "theme": "primary",
        "title": "Sales volumes and values saw moderate growth in July 2024",
        "subtitle": "Figure 6: Upward contribution from housing and household services (including energy) saw the annual CPIH inflation rate rise",
        "id": "id",
        "headingLevel": 4,
        "caption": "Source: Monthly Business Survey, Retails Sales Inquiry from the Office for National Statistics",
        "download": {
            'title': 'Download Figure 1 data',
            'itemsList': [
            {
                "text": "Excel spreadsheet (XLSX format, 18KB)",
                "url": "#"
            },
            {
                "text": "Simple text file (CSV format, 25KB)",
                "url": "#"
            },
            {

                "text": "Image (PNG format, 25KB)",
                "url": "#"
            }
        ]},
        "legend": true,
        "xAxis": {
            "title": "Year",
            "type": "linear",
            "labelFormat": "{value:,.f}",
            "categories": [
                'Oct 2014',
                'Nov 2014',
                'Dec 2014',
                'Jan 2015',
                'Feb 2015',
                'Mar 2015',
                'Apr 2015',
                'May 2015',
                'Jun 2015',
                'Jul 2015',
                'Aug 2015',
                'Sep 2015',
                'Oct 2015',
                'Nov 2015',
                'Dec 2015',
                'Jan 2016',
                'Feb 2016',
                'Mar 2016',
                'Apr 2016',
                'May 2016',
                'Jun 2016',
                'Jul 2016',
                'Aug 2016',
                'Sep 2016',
                'Oct 2016',
                'Nov 2016',
                'Dec 2016',
                'Jan 2017',
                'Feb 2017',
                'Mar 2017',
                'Apr 2017',
                'May 2017',
                'Jun 2017',
                'Jul 2017',
                'Aug 2017',
                'Sep 2017',
                'Oct 2017',
                'Nov 2017',
                'Dec 2017',
                'Jan 2018',
                'Feb 2018',
                'Mar 2018',
                'Apr 2018',
                'May 2018',
                'Jun 2018',
                'Jul 2018',
                'Aug 2018',
                'Sep 2018',
                'Oct 2018',
                'Nov 2018',
                'Dec 2018',
                'Jan 2019',
                'Feb 2019',
                'Mar 2019',
                'Apr 2019',
                'May 2019',
                'Jun 2019',
                'Jul 2019',
                'Aug 2019',
                'Sep 2019',
                'Oct 2019',
                'Nov 2019',
                'Dec 2019',
                'Jan 2020',
                'Feb 2020',
                'Mar 2020',
                'Apr 2020',
                'May 2020',
                'Jun 2020',
                'Jul 2020',
                'Aug 2020',
                'Sep 2020',
                'Oct 2020',
                'Nov 2020',
                'Dec 2020',
                'Jan 2021',
                'Feb 2021',
                'Mar 2021',
                'Apr 2021',
                'May 2021',
                'Jun 2021',
                'Jul 2021',
                'Aug 2021',
                'Sep 2021',
                'Oct 2021',
                'Nov 2021',
                'Dec 2021',
                'Jan 2022',
                'Feb 2022',
                'Mar 2022',
                'Apr 2022',
                'May 2022',
                'Jun 2022',
                'Jul 2022',
                'Aug 2022',
                'Sep 2022',
                'Oct 2022',
                'Nov 2022',
                'Dec 2022',
                'Jan 2023',
                'Feb 2023',
                'Mar 2023',
                'Apr 2023',
                'May 2023',
                'Jun 2023',
                'Jul 2023',
                'Aug 2023',
                'Sep 2023',
                'Oct 2023',
                'Nov 2023',
                'Dec 2023',
                'Jan 2024',
                'Feb 2024',
                'Mar 2024',
                'Apr 2024',
                'May 2024',
                'Jun 2024',
                'Jul 2024',
                'Aug 2024',
                'Sep 2024',
                'Oct 2024'
            ],
            "tickIntervalDesktop": 15,
            "tickIntervalMobile": 30
        },
        "yAxis": {
            "title": "Sales",
            "labelFormat": "{value:,.f}"
        },
        "percentageHeightDesktop": 35,
        "percentageHeightMobile": 90,
        "series": [
            {
                "name": 'CPIH',
                "data": [
                    1.3, 1.1, 0.7, 0.5, 0.4, 0.3, 0.3, 0.4, 0.3, 0.5, 0.4, 0.2, 0.2, 0.4, 0.5, 0.6,
                    0.6, 0.8, 0.7, 0.7, 0.8, 0.9, 1.0, 1.3, 1.3, 1.5, 1.8, 1.9, 2.3, 2.3, 2.6, 2.7,
                    2.6, 2.6, 2.7, 2.8, 2.8, 2.8, 2.7, 2.7, 2.5, 2.3, 2.2, 2.3, 2.3, 2.3, 2.4, 2.2,
                    2.2, 2.2, 2.0, 1.8, 1.8, 1.8, 2.0, 1.9, 1.9, 2.0, 1.7, 1.7, 1.5, 1.5, 1.4, 1.8,
                    1.7, 1.5, 0.9, 0.7, 0.8, 1.1, 0.5, 0.7, 0.9, 0.6, 0.8, 0.9, 0.7, 1.0, 1.6, 2.1,
                    2.4, 2.1, 3.0, 2.9, 3.8, 4.6, 4.8, 4.9, 5.5, 6.2, 7.8, 7.9, 8.2, 8.8, 8.6, 8.8,
                    9.6, 9.3, 9.2, 8.8, 9.2, 8.9, 7.8, 7.9, 7.3, 6.4, 6.3, 6.3, 4.7, 4.2, 4.2, 4.2,
                    3.8, 3.8, 3.0, 2.8, 2.8, 3.1, 3.1, 2.6, 3.2
                ]
            },
            {
                "name": 'Goods',
                "data": [
                    0.3, -0.2, -1.0, -1.5, -2.0, -2.1, -1.9, -1.8, -2.0, -1.8, -2.0, -2.4, -2.1,
                    -1.9, -2.1, -1.5, -1.6, -1.7, -1.6, -1.8, -1.7, -1.5, -1.4, -0.5, -0.4, 0.2,
                    0.7, 1.1, 1.9, 2.5, 2.4, 3.0, 2.6, 2.7, 3.1, 3.2, 3.3, 3.3, 3.4, 3.2, 3.0, 2.4,
                    2.6, 2.5, 2.5, 2.6, 2.7, 2.5, 2.3, 2.1, 1.8, 1.2, 1.3, 1.3, 1.4, 1.5, 1.5, 1.7,
                    1.2, 0.9, 0.4, 0.5, 0.6, 1.3, 1.0, 0.6, -0.4, -0.9, -0.5, 0.0, -0.2, -0.3, 0.1,
                    -0.7, -0.2, -0.2, -0.5, 0.1, 1.6, 2.3, 2.9, 2.5, 3.3, 3.5, 4.9, 6.5, 6.9, 7.2,
                    8.3, 9.4, 12.4, 12.4, 12.7, 13.6, 13.0, 13.2, 14.8, 14.1, 13.4, 13.3, 13.4,
                    12.7, 10.0, 9.7, 8.5, 6.1, 6.3, 6.2, 2.9, 2.0, 1.9, 1.8, 1.1, 0.9, -0.8, -1.3,
                    -1.4, -0.5, -0.9, -1.4, -0.3
                ]
            },
            {
                "name": 'Services',
                "data": [
                    2.2, 2.1, 2.1, 2.1, 2.2, 2.2, 2.0, 2.1, 2.1, 2.2, 2.2, 2.2, 2.1, 2.2, 2.5, 2.2,
                    2.3, 2.6, 2.4, 2.6, 2.7, 2.6, 2.7, 2.6, 2.5, 2.4, 2.5, 2.5, 2.6, 2.2, 2.8, 2.6,
                    2.5, 2.4, 2.5, 2.5, 2.4, 2.4, 2.2, 2.3, 2.1, 2.1, 1.9, 2.1, 2.0, 2.0, 2.2, 2.0,
                    2.1, 2.2, 2.1, 2.2, 2.2, 2.2, 2.5, 2.3, 2.2, 2.2, 2.0, 2.2, 2.2, 2.2, 1.9, 2.1,
                    2.2, 2.2, 1.9, 1.8, 1.7, 2.0, 1.0, 1.5, 1.5, 1.5, 1.6, 1.7, 1.6, 1.6, 1.7, 1.9,
                    2.1, 1.8, 2.7, 2.5, 2.9, 3.0, 3.1, 3.1, 3.2, 3.7, 4.1, 4.3, 4.5, 4.9, 5.1, 5.3,
                    5.3, 5.4, 5.8, 5.2, 5.6, 5.7, 6.0, 6.3, 6.3, 6.5, 6.1, 6.3, 6.2, 6.0, 6.0, 6.1,
                    6.0, 6.0, 6.0, 5.9, 6.0, 5.7, 5.9, 5.6, 5.6
                ]
            },
            {
                "name": 'CPIH excl energy, food, alcohol & tobacco',
                "data": [
                    1.5, 1.3, 1.4, 1.5, 1.4, 1.2, 1.1, 1.2, 1.0, 1.3, 1.2, 1.2, 1.3, 1.4, 1.5, 1.4,
                    1.4, 1.6, 1.5, 1.5, 1.6, 1.6, 1.5, 1.7, 1.6, 1.7, 1.8, 1.8, 2.1, 1.9, 2.4, 2.5,
                    2.4, 2.4, 2.6, 2.5, 2.5, 2.5, 2.3, 2.4, 2.2, 2.1, 2.0, 2.0, 1.8, 1.8, 1.9, 1.8,
                    1.8, 1.8, 1.8, 1.8, 1.8, 1.8, 1.7, 1.7, 1.7, 1.9, 1.5, 1.6, 1.7, 1.7, 1.4, 1.6,
                    1.7, 1.6, 1.5, 1.3, 1.5, 1.8, 1.0, 1.4, 1.5, 1.2, 1.5, 1.5, 1.1, 1.3, 1.5, 2.0,
                    2.3, 1.9, 2.9, 2.7, 3.1, 3.6, 3.8, 4.0, 4.6, 5.1, 5.4, 5.2, 5.2, 5.5, 5.6, 5.8,
                    5.8, 5.7, 5.8, 5.3, 5.7, 5.7, 6.2, 6.5, 6.4, 6.4, 5.9, 5.9, 5.6, 5.2, 5.2, 5.1,
                    4.8, 4.7, 4.4, 4.2, 4.2, 4.1, 4.3, 4.0, 4.1
                ]
            }
        ],
        "rangeAnnotations": [
            {
                "text": "A test x axis range annotation with the label to the right",
                "range": {"axisValue1": 10, "axisValue2": 15},
                "axis": "x",
                "labelOffsetX": 150,
                "labelOffsetY": 0
            },
            {
                "text": "A test x axis range annotation with the label to the left and a width of 100px",
                "range": {"axisValue1": 90, "axisValue2": 110},
                "axis": "x",
                "labelOffsetX": -150,
                "labelOffsetY": 0,
                "labelWidth": 100
            }
        ]
    })
}}

Nunjucks macro options

Name	Type	Required	Description
chartType	string	true if iframe not set	The type of chart to render. Supported types include: 'line', 'bar', 'column', 'scatter', 'columnrange', 'boxplot' and 'area'. Will be ignored if an iframe url is set.
unsupportedChartText	string	false	Optional text override to display after the chart type when it's not supported. Defaults to "chart type - chart type is not supported"
instructions	string	false	Instructions for keyboard users on how to interact with the chart. This text will be read aloud by screen readers to guide navigation and interaction.
theme	string	false	The theme to apply to the chart. Either `primary` or `alternate`. Defaults to `primary`. Will be ignored if an iframe url is set.
headingLevel	number	false	Number used to determine the heading level of the title. Use to ensure the title has a correct semantic order on the page. Accepts a value between 1 and 4, defaulting to 2 if not provided.
title	string	true	The main title of the chart.
subtitle	string	false	A subtitle that appears under the main title.
id	string	true	A unique identifier for the chart instance or iframe.
caption	string	false	A caption providing additional context for the chart.
description	string	true	A textual description of the chart for screen readers.
download	object	false	Object for (download)[#download] options.
legend	boolean	false	Whether the legend is displayed. Defaults to `true`. Note that legends are automatically hidden for single series charts. Will be ignored if an iframe url is set.
yAxis	object	true if iframe not set	Defines the vertical axis y-axis configuration parameters. Will be ignored if an iframe url is set.
xAxis	object	true if iframe not set	Defines the horizontal axis x-axis configuration parameters. Will be ignored if an iframe url is set.
series	array	true if iframe not set	The data series to be plotted, including labels and values. Will be ignored if an iframe url is set. Note: The number of series is limited by the selected theme - up to 6 series for the primary theme and 5 series for the alternate theme. Any additional series beyond these limits will be ignored and not displayed.
useStackedLayout	boolean	false	Determines whether the chart should use a stacked layout. It is useful only for bar and column charts. Will be ignored if an iframe url is set.
percentageHeightDesktop	integer	false	Sets the percentage plot height at desktop, relative to the width. If undefined the chart will fall back to the default height of 400px at desktop. Does not apply to bar charts. Will be ignored if an iframe url is set.
percentageHeightMobile	integer	false	Sets the percentage plot height at mobile, relative to the width. If undefined the chart will fall back to the default height of 400px at mobile. Does not apply to bar charts. Will be ignored if an iframe url is set.

annotations	array	false	An array of point annotations. Will be ignored if an iframe url is set.
rangeAnnotations	array	false	An array of range annotations. Will be ignored if an iframe url is set.
referenceLineAnnotations	array	false	An array of reference line annotations. Will be ignored if an iframe url is set.
estimateLineLabel	string	false	Label for the estimate line in the legend. Used in column charts with confidence intervals. Will be ignored if an iframe url is set.
uncertaintyRangeLabel	string	false	Label for the confidence interval in the legend. Used in column charts showing uncertainty ranges. Will be ignored if an iframe url is set.
iframeUrl	string	false	A url for a visualisation to display in an iframe instead of displaying a Highcharts chart.
footnotes	`Object<Footnotes>`	false	Footnotes to appear below the chart in a 'details' element
fallbackImageUrl	string	false	A url for a fallback image to display instead of the chart or iframe visualisation if JavaScript is disabled. If a fallback image is passed with an iframeUrl parameter, the iframe will be hidden for non-JavaScript users. If it is not passed, it is assumed the iframe content will provide a fallback image to be displayed inside the iframe.
fallbackImageAlt	string	false	Alt text for the fallback image - a short description only, as the description field describes the chart for screen readers. Defaults to "Fallback image for the chart as JavaScript is disabled"
iframeAspectRatio	string	false	Sets the aspect ratio for iframe charts. Only applicable when using an iframe chart. Acceptable values are 16-9, 4-3, 21-9, 1-1, 3-2, and 9-16. The value must be provided in the x-y format (e.g. 16-9). If an unsupported value is provided or a value is not provided, the aspect ratio will default to 16-9.

Download
Property	Type	Required	Description
title	string	false	The title displayed above the download options.
itemsList	array	false	An array of items available for download, each described by a (DownloadItem)[#DownloadItem].

DownloadItem
Property	Type	Required	Description
text	string	true	The label or description of the downloadable item.
url	string	true	The URL to the downloadable resource.

Y_Axis
Name	Type	Required	Description
title	string	true	The title text displayed on the y-axis. Note that for any chart type apart from bar charts, a maximum character limit of 50 characters is recommended to avoid the axis title being cut off at mobile.
labelFormat	string	false	A format string for the axis label. Examples of string formats can be found in these docs (opens in a new tab) .
tickIntervalMobile	number	false	The interval of the tick marks in axis units at mobile. Useful when you want to space out the labels (e.g. show every 2nd or 5th label).
tickIntervalDesktop	number	false	The interval of the tick marks in axis units at desktop. Useful when you want to space out the labels (e.g. show every 2nd or 5th label).
customReferenceLineValue	float or int	false	A custom value to display a darker reference line. If not supplied, the darker will appear at zero. The custom value is only used for column charts and line charts - for other chart types it will be ignored, and the darker line will appear at zero.
min	number	false	Sets the minimum value for the Y-axis. Relevant for Line, bar, area, column chart, column-range, boxplot and scatter charts.
max	number	false	Sets the maximum value for the Y-axis. Relevant for Line, bar, area, column chart, column-range, boxplot and scatter charts.
startOnTick	boolean	false	Align the axis to start on a tick. Relevant for Line, bar, area, column chart, column-range, boxplot and scatter charts.
endOnTick	boolean	false	Align the axis to end on a tick. Relevant for Line, bar, area, column chart, column-range, boxplot and scatter charts.

X_Axis
Name	Type	Required	Description
title	string	false	The title text displayed on the x-axis. Note: x-axis titles are not supported for bar chart types.
labelFormat	string	false	A format string for the x-axis label. Examples of string formats can be found in these docs (opens in a new tab) .
categories	array	false	Labels for each tick mark along the x-axis.
type	string	false	The type of axis. Can be one of `linear`, `logarithmic`, `datetime` or `category`. Defaults to linear.
tickIntervalMobile	number	false	The interval of the tick marks in axis units at mobile. Useful when you want to space out the labels (e.g. show every 2nd or 5th label).
tickIntervalDesktop	number	false	The interval of the tick marks in axis units at desktop. Useful when you want to space out the labels (e.g. show every 2nd or 5th label).
min	number	false	Sets the minimum value for the X-axis. Relevant only for scatter charts.
max	number	false	Sets the maximum value for the X-axis. Relevant only for scatter charts.
startOnTick	boolean	false	Align the axis to start on a tick. Relevant only for scatter charts.
endOnTick	boolean	false	Align the axis to end on a tick. Relevant only for scatter charts.

Series
Name	Type	Required	Description
name	string	true	The name of the series.
data	array	true	The data values for the series. Each value corresponds to a category on the x-axis.
dataLabels	boolean	false	Options for whether the DataLabel is displayed. Defaults to `false`. This option is only available for bar chart and clustered bar charts with two or fewer series, and 20 or fewer data points in any series.
marker	boolean	false	Options for whether the Marker is displayed on the data points. Defaults to `false`. This option is only available for line charts.
type	string	false	Specifies the configuration type to apply to the series. Supported types include 'line' and 'scatter'. By default, it aligns with the chart type. This is used when combining multiple chart types within a single chart. Note: Only the following chart type combinations are supported: "column with line" and "columnrange with scatter". For column with line, only one line series is supported. Additional line series will be ignored.
connectNulls	boolean	false	Whether to connect lines that have a data point missing. Only relevant for line charts.

Point annotations
Name	Type	Required	Description
text	string	true	The annotation text.
point	object	false	The x and y coordinates for the annotation
labelOffsetX (px)	int	true	The x offset in px of the label from the annotation point
labelOffsetY (px)	int	true	The y offset in px of the label from the annotation point

Point
Name	Type	Required	Description
xValue	float or int	true	The x axis value of the annotation. For category axes this is the zero based index of the x axis categories array. It must be an integer in this scenario.
yValue	float	true	The y axis value of the annotation

Range annotations
Name	Type	Required	Description
text	string	true	The annotation text.
range	Object	true	The xValue or yValue coordinates for the annotation
axis	string	true	The axis the range annotation should be applied to. Should be one of 'x' or 'y'. Note that for bar charts 'x' will be the vertical axis, and 'y' will be the horizontal axis.
labelInside	boolean	true	Whether the label for the range sits inside or outside the shaded area
labelOffsetX (px)	int	false	The horizontal offset in px of the label from it's default position. Ignored if labelInside is true.
labelOffsetY (px)	int	false	The vertical offset in px of the label from it's default position. Ignored if labelInside is true.
labelWidth (px)	int	false	The width of the label in pixels - the label text will wrap if it is wider than this value. If undefined, the label will be set to 150px wide.

Range
Name	Type	Required	Description
axisValue1	float or int	true	The starting point on the axis for the annotation. For category axes this is the zero based index of the categories array. It must be an integer in this scenario.
axisValue2	float or int	true	The ending pont on the axis for the annotation. For category axes this is the zero based index of the axis categories array. It must be an integer in this scenario.

Reference line annotations
Name	Type	Required	Description
text	string	true	The annotation text.
value	float or int	true	The x axis or y axis value for the annotation. For category axes this is the zero based index of the categories array. It must be an integer in this scenario.
axis	string	true	The axis the range annotation should be applied to. Should be one of 'x' or 'y'. Note that for bar charts 'x' will be the vertical axis, and 'y' will be the horizontal axis.
labelWidth (px)	int	false	The width of the label in pixels - the label text will wrap if it is wider than this value. If undefined, the label will be set to 150px wide.
labelOffsetX (px)	int	false	The horizontal offset in px of the label from it's default position.
labelOffsetY (px)	int	false	The vertical offset in px of the label from it's default position.

Footnotes
Name	Type	Required	Description
title	string	true	The title text for the footnotes heading
content	string	true	HTML content for the footnotes

HTML

<div data-highcharts-base-chart data-highcharts-type="line" data-highcharts-theme="primary"
  data-highcharts-title="Sales volumes and values saw moderate growth in July 2024" data-highcharts-id="id"
  data-highcharts-percentage-height-desktop="35" data-highcharts-percentage-height-mobile="90"
  data-highcharts-x-axis-tick-interval-mobile="30" data-highcharts-x-axis-tick-interval-desktop="15">
  <figure class="ons-chart" aria-describedby="chart-audio-description-id">
    <h4 class="ons-chart__title">Sales volumes and values saw moderate growth in July 2024</h4>
    <h5 class="ons-chart__subtitle">Figure 6: Upward contribution from housing and household services (including energy)
      saw the annual CPIH inflation rate rise</h5>
    <p class="ons-u-vh" id="chart-audio-description-id">Line chart showing the annual rate of inflation for the Consumer
      Prices Index including owner occupiers’ housing costs (CPIH) and its components.</p>
    <div data-highcharts-chart-container class="ons-chart__container" tabindex="0" role="region"
      aria-label="chart container" aria-describedby="chart-instructions-id">
      <div id="chart-instructions-id" class="ons-u-vh">Use the Tab key to move focus into the chart. Once inside, use
        the arrow keys to navigate between data points. As you move, tooltips will be announced to describe each point.
        Touch device users, explore by touch or with swipe gestures.</div>
      <div data-highcharts-chart class="ons-chart__chart"></div>
    </div>
    <ul class="ons-chart__annotations-footnotes" aria-hidden="true" data-annotations-footnotes>
      <li class="ons-chart__annotations-footnotes_item">
        <span class="ons-chart__annotations-footnotes-number">1</span> A test x axis range annotation with the label to
        the right
      </li>
      <li class="ons-chart__annotations-footnotes_item">
        <span class="ons-chart__annotations-footnotes-number">2</span> A test x axis range annotation with the label to
        the left and a width of 100px
      </li>
    </ul>
    <figcaption class="ons-chart__caption">Source: Monthly Business Survey, Retails Sales Inquiry from the Office for
      National Statistics</figcaption>
  </figure>
  <h6 class="ons-chart__download-title">Download Figure 1 data</h6>
  <ol class="ons-list">
    <li class="ons-list__item">
      <a href="#" class="ons-list__link">Excel spreadsheet (XLSX format, 18KB)</a>
    </li>
    <li class="ons-list__item">
      <a href="#" class="ons-list__link">Simple text file (CSV format, 25KB)</a>
    </li>
    <li class="ons-list__item">
      <a href="#" class="ons-list__link">Image (PNG format, 25KB)</a>
    </li>
  </ol>
  <!-- Set scripts to pass the config values as json to the JavaScript -->
  <!-- prettier-ignore-start -->
  <script type="application/json" data-highcharts-config--id>
    {
      "chart": {
        "type": "line"
      },
      "legend": {
        "enabled": true
      },
      "yAxis": {
        "title": {
          "text": "Sales"
        },
        "labels": {
          "format": "{value:,.f}"
        }
      },
      "xAxis": {
        "title": {
          "text": "Year"
        },
        "categories": ["Oct 2014", "Nov 2014", "Dec 2014", "Jan 2015", "Feb 2015", "Mar 2015", "Apr 2015", "May 2015",
          "Jun 2015", "Jul 2015", "Aug 2015", "Sep 2015", "Oct 2015", "Nov 2015", "Dec 2015", "Jan 2016", "Feb 2016",
          "Mar 2016", "Apr 2016", "May 2016", "Jun 2016", "Jul 2016", "Aug 2016", "Sep 2016", "Oct 2016", "Nov 2016",
          "Dec 2016", "Jan 2017", "Feb 2017", "Mar 2017", "Apr 2017", "May 2017", "Jun 2017", "Jul 2017", "Aug 2017",
          "Sep 2017", "Oct 2017", "Nov 2017", "Dec 2017", "Jan 2018", "Feb 2018", "Mar 2018", "Apr 2018", "May 2018",
          "Jun 2018", "Jul 2018", "Aug 2018", "Sep 2018", "Oct 2018", "Nov 2018", "Dec 2018", "Jan 2019", "Feb 2019",
          "Mar 2019", "Apr 2019", "May 2019", "Jun 2019", "Jul 2019", "Aug 2019", "Sep 2019", "Oct 2019", "Nov 2019",
          "Dec 2019", "Jan 2020", "Feb 2020", "Mar 2020", "Apr 2020", "May 2020", "Jun 2020", "Jul 2020", "Aug 2020",
          "Sep 2020", "Oct 2020", "Nov 2020", "Dec 2020", "Jan 2021", "Feb 2021", "Mar 2021", "Apr 2021", "May 2021",
          "Jun 2021", "Jul 2021", "Aug 2021", "Sep 2021", "Oct 2021", "Nov 2021", "Dec 2021", "Jan 2022", "Feb 2022",
          "Mar 2022", "Apr 2022", "May 2022", "Jun 2022", "Jul 2022", "Aug 2022", "Sep 2022", "Oct 2022", "Nov 2022",
          "Dec 2022", "Jan 2023", "Feb 2023", "Mar 2023", "Apr 2023", "May 2023", "Jun 2023", "Jul 2023", "Aug 2023",
          "Sep 2023", "Oct 2023", "Nov 2023", "Dec 2023", "Jan 2024", "Feb 2024", "Mar 2024", "Apr 2024", "May 2024",
          "Jun 2024", "Jul 2024", "Aug 2024", "Sep 2024", "Oct 2024"
        ],
        "type": "linear",
        "labels": {
          "format": "{value:,.f}"
        }
      },
      "series": [{
        "name": "CPIH",
        "data": [1.3, 1.1, 0.7, 0.5, 0.4, 0.3, 0.3, 0.4, 0.3, 0.5, 0.4, 0.2, 0.2, 0.4, 0.5, 0.6, 0.6, 0.8, 0.7, 0.7,
          0.8, 0.9, 1, 1.3, 1.3, 1.5, 1.8, 1.9, 2.3, 2.3, 2.6, 2.7, 2.6, 2.6, 2.7, 2.8, 2.8, 2.8, 2.7, 2.7, 2.5,
          2.3, 2.2, 2.3, 2.3, 2.3, 2.4, 2.2, 2.2, 2.2, 2, 1.8, 1.8, 1.8, 2, 1.9, 1.9, 2, 1.7, 1.7, 1.5, 1.5, 1.4,
          1.8, 1.7, 1.5, 0.9, 0.7, 0.8, 1.1, 0.5, 0.7, 0.9, 0.6, 0.8, 0.9, 0.7, 1, 1.6, 2.1, 2.4, 2.1, 3, 2.9,
          3.8, 4.6, 4.8, 4.9, 5.5, 6.2, 7.8, 7.9, 8.2, 8.8, 8.6, 8.8, 9.6, 9.3, 9.2, 8.8, 9.2, 8.9, 7.8, 7.9, 7.3,
          6.4, 6.3, 6.3, 4.7, 4.2, 4.2, 4.2, 3.8, 3.8, 3, 2.8, 2.8, 3.1, 3.1, 2.6, 3.2
        ],
        "marker": {
          "enabled": false
        },
        "dataLabels": {
          "enabled": false
        },
        "connectNulls": false,
        "type": "line"
      }, {
        "name": "Goods",
        "data": [0.3, -0.2, -1, -1.5, -2, -2.1, -1.9, -1.8, -2, -1.8, -2, -2.4, -2.1, -1.9, -2.1, -1.5, -1.6, -1.7,
          -1.6, -1.8, -1.7, -1.5, -1.4, -0.5, -0.4, 0.2, 0.7, 1.1, 1.9, 2.5, 2.4, 3, 2.6, 2.7, 3.1, 3.2, 3.3, 3.3,
          3.4, 3.2, 3, 2.4, 2.6, 2.5, 2.5, 2.6, 2.7, 2.5, 2.3, 2.1, 1.8, 1.2, 1.3, 1.3, 1.4, 1.5, 1.5, 1.7, 1.2,
          0.9, 0.4, 0.5, 0.6, 1.3, 1, 0.6, -0.4, -0.9, -0.5, 0, -0.2, -0.3, 0.1, -0.7, -0.2, -0.2, -0.5, 0.1, 1.6,
          2.3, 2.9, 2.5, 3.3, 3.5, 4.9, 6.5, 6.9, 7.2, 8.3, 9.4, 12.4, 12.4, 12.7, 13.6, 13, 13.2, 14.8, 14.1,
          13.4, 13.3, 13.4, 12.7, 10, 9.7, 8.5, 6.1, 6.3, 6.2, 2.9, 2, 1.9, 1.8, 1.1, 0.9, -0.8, -1.3, -1.4, -0.5,
          -0.9, -1.4, -0.3
        ],
        "marker": {
          "enabled": false
        },
        "dataLabels": {
          "enabled": false
        },
        "connectNulls": false,
        "type": "line"
      }, {
        "name": "Services",
        "data": [2.2, 2.1, 2.1, 2.1, 2.2, 2.2, 2, 2.1, 2.1, 2.2, 2.2, 2.2, 2.1, 2.2, 2.5, 2.2, 2.3, 2.6, 2.4, 2.6,
          2.7, 2.6, 2.7, 2.6, 2.5, 2.4, 2.5, 2.5, 2.6, 2.2, 2.8, 2.6, 2.5, 2.4, 2.5, 2.5, 2.4, 2.4, 2.2, 2.3, 2.1,
          2.1, 1.9, 2.1, 2, 2, 2.2, 2, 2.1, 2.2, 2.1, 2.2, 2.2, 2.2, 2.5, 2.3, 2.2, 2.2, 2, 2.2, 2.2, 2.2, 1.9,
          2.1, 2.2, 2.2, 1.9, 1.8, 1.7, 2, 1, 1.5, 1.5, 1.5, 1.6, 1.7, 1.6, 1.6, 1.7, 1.9, 2.1, 1.8, 2.7, 2.5,
          2.9, 3, 3.1, 3.1, 3.2, 3.7, 4.1, 4.3, 4.5, 4.9, 5.1, 5.3, 5.3, 5.4, 5.8, 5.2, 5.6, 5.7, 6, 6.3, 6.3,
          6.5, 6.1, 6.3, 6.2, 6, 6, 6.1, 6, 6, 6, 5.9, 6, 5.7, 5.9, 5.6, 5.6
        ],
        "marker": {
          "enabled": false
        },
        "dataLabels": {
          "enabled": false
        },
        "connectNulls": false,
        "type": "line"
      }, {
        "name": "CPIH excl energy, food, alcohol \u0026 tobacco",
        "data": [1.5, 1.3, 1.4, 1.5, 1.4, 1.2, 1.1, 1.2, 1, 1.3, 1.2, 1.2, 1.3, 1.4, 1.5, 1.4, 1.4, 1.6, 1.5, 1.5,
          1.6, 1.6, 1.5, 1.7, 1.6, 1.7, 1.8, 1.8, 2.1, 1.9, 2.4, 2.5, 2.4, 2.4, 2.6, 2.5, 2.5, 2.5, 2.3, 2.4, 2.2,
          2.1, 2, 2, 1.8, 1.8, 1.9, 1.8, 1.8, 1.8, 1.8, 1.8, 1.8, 1.8, 1.7, 1.7, 1.7, 1.9, 1.5, 1.6, 1.7, 1.7,
          1.4, 1.6, 1.7, 1.6, 1.5, 1.3, 1.5, 1.8, 1, 1.4, 1.5, 1.2, 1.5, 1.5, 1.1, 1.3, 1.5, 2, 2.3, 1.9, 2.9,
          2.7, 3.1, 3.6, 3.8, 4, 4.6, 5.1, 5.4, 5.2, 5.2, 5.5, 5.6, 5.8, 5.8, 5.7, 5.8, 5.3, 5.7, 5.7, 6.2, 6.5,
          6.4, 6.4, 5.9, 5.9, 5.6, 5.2, 5.2, 5.1, 4.8, 4.7, 4.4, 4.2, 4.2, 4.1, 4.3, 4, 4.1
        ],
        "marker": {
          "enabled": false
        },
        "dataLabels": {
          "enabled": false
        },
        "connectNulls": false,
        "type": "line"
      }]
    }
  </script>
  <script type="application/json" data-highcharts-range-annotations--id>
    [{
      "text": "A test x axis range annotation with the label to the right",
      "range": {
        "axisValue1": 10,
        "axisValue2": 15
      },
      "axis": "x",
      "labelOffsetX": 150,
      "labelOffsetY": 0
    }, {
      "text": "A test x axis range annotation with the label to the left and a width of 100px",
      "range": {
        "axisValue1": 90,
        "axisValue2": 110
      },
      "axis": "x",
      "labelOffsetX": -150,
      "labelOffsetY": 0,
      "labelWidth": 100
    }]
  </script>
  <!-- prettier-ignore-end -->
</div>

Line chart with range annotations outside top bottom

Use this when you require range annotations outside top and bottom of your line charts.

Open this example in a new tab(Example Line Chart With Range Annotations Outside Top Bottom)

Example Line Chart With Range Annotations Outside Top Bottom contents

Nunjucksfor Example Line Chart With Range Annotations Outside Top Bottom
Nunjucks macro optionsfor Example Line Chart With Range Annotations Outside Top Bottom
HTMLfor Example Line Chart With Range Annotations Outside Top Bottom

Nunjucks

{% from "components/chart/_macro.njk" import onsChart %}

{{
    onsChart({
        "chartType": "line",
        "description": "Line chart showing the annual rate of inflation for the Consumer Prices Index including owner occupiers’ housing costs (CPIH) and its components.",
        "theme": "primary",
        "title": "Sales volumes and values saw moderate growth in July 2024",
        "subtitle": "Figure 6: Upward contribution from housing and household services (including energy) saw the annual CPIH inflation rate rise",
        "id": "id",
        "headingLevel": 4,
        "caption": "Source: Monthly Business Survey, Retails Sales Inquiry from the Office for National Statistics",
        "download": {
            'title': 'Download Figure 1 data',
            'itemsList': [
            {
                "text": "Excel spreadsheet (XLSX format, 18KB)",
                "url": "#"
            },
            {
                "text": "Simple text file (CSV format, 25KB)",
                "url": "#"
            },
            {

                "text": "Image (PNG format, 25KB)",
                "url": "#"
            }
        ]},
        "legend": true,
        "xAxis": {
            "title": "Year",
            "type": "linear",
            "labelFormat": "{value:,.f}",
            "categories": [
                'Oct 2014',
                'Nov 2014',
                'Dec 2014',
                'Jan 2015',
                'Feb 2015',
                'Mar 2015',
                'Apr 2015',
                'May 2015',
                'Jun 2015',
                'Jul 2015',
                'Aug 2015',
                'Sep 2015',
                'Oct 2015',
                'Nov 2015',
                'Dec 2015',
                'Jan 2016',
                'Feb 2016',
                'Mar 2016',
                'Apr 2016',
                'May 2016',
                'Jun 2016',
                'Jul 2016',
                'Aug 2016',
                'Sep 2016',
                'Oct 2016',
                'Nov 2016',
                'Dec 2016',
                'Jan 2017',
                'Feb 2017',
                'Mar 2017',
                'Apr 2017',
                'May 2017',
                'Jun 2017',
                'Jul 2017',
                'Aug 2017',
                'Sep 2017',
                'Oct 2017',
                'Nov 2017',
                'Dec 2017',
                'Jan 2018',
                'Feb 2018',
                'Mar 2018',
                'Apr 2018',
                'May 2018',
                'Jun 2018',
                'Jul 2018',
                'Aug 2018',
                'Sep 2018',
                'Oct 2018',
                'Nov 2018',
                'Dec 2018',
                'Jan 2019',
                'Feb 2019',
                'Mar 2019',
                'Apr 2019',
                'May 2019',
                'Jun 2019',
                'Jul 2019',
                'Aug 2019',
                'Sep 2019',
                'Oct 2019',
                'Nov 2019',
                'Dec 2019',
                'Jan 2020',
                'Feb 2020',
                'Mar 2020',
                'Apr 2020',
                'May 2020',
                'Jun 2020',
                'Jul 2020',
                'Aug 2020',
                'Sep 2020',
                'Oct 2020',
                'Nov 2020',
                'Dec 2020',
                'Jan 2021',
                'Feb 2021',
                'Mar 2021',
                'Apr 2021',
                'May 2021',
                'Jun 2021',
                'Jul 2021',
                'Aug 2021',
                'Sep 2021',
                'Oct 2021',
                'Nov 2021',
                'Dec 2021',
                'Jan 2022',
                'Feb 2022',
                'Mar 2022',
                'Apr 2022',
                'May 2022',
                'Jun 2022',
                'Jul 2022',
                'Aug 2022',
                'Sep 2022',
                'Oct 2022',
                'Nov 2022',
                'Dec 2022',
                'Jan 2023',
                'Feb 2023',
                'Mar 2023',
                'Apr 2023',
                'May 2023',
                'Jun 2023',
                'Jul 2023',
                'Aug 2023',
                'Sep 2023',
                'Oct 2023',
                'Nov 2023',
                'Dec 2023',
                'Jan 2024',
                'Feb 2024',
                'Mar 2024',
                'Apr 2024',
                'May 2024',
                'Jun 2024',
                'Jul 2024',
                'Aug 2024',
                'Sep 2024',
                'Oct 2024'
            ],
            "tickIntervalDesktop": 15,
            "tickIntervalMobile": 30
        },
        "yAxis": {
            "title": "Sales",
            "labelFormat": "{value:,.f}"
        },
        "percentageHeightDesktop": 35,
        "percentageHeightMobile": 90,
        "series": [
            {
                "name": 'CPIH',
                "data": [
                    1.3, 1.1, 0.7, 0.5, 0.4, 0.3, 0.3, 0.4, 0.3, 0.5, 0.4, 0.2, 0.2, 0.4, 0.5, 0.6,
                    0.6, 0.8, 0.7, 0.7, 0.8, 0.9, 1.0, 1.3, 1.3, 1.5, 1.8, 1.9, 2.3, 2.3, 2.6, 2.7,
                    2.6, 2.6, 2.7, 2.8, 2.8, 2.8, 2.7, 2.7, 2.5, 2.3, 2.2, 2.3, 2.3, 2.3, 2.4, 2.2,
                    2.2, 2.2, 2.0, 1.8, 1.8, 1.8, 2.0, 1.9, 1.9, 2.0, 1.7, 1.7, 1.5, 1.5, 1.4, 1.8,
                    1.7, 1.5, 0.9, 0.7, 0.8, 1.1, 0.5, 0.7, 0.9, 0.6, 0.8, 0.9, 0.7, 1.0, 1.6, 2.1,
                    2.4, 2.1, 3.0, 2.9, 3.8, 4.6, 4.8, 4.9, 5.5, 6.2, 7.8, 7.9, 8.2, 8.8, 8.6, 8.8,
                    9.6, 9.3, 9.2, 8.8, 9.2, 8.9, 7.8, 7.9, 7.3, 6.4, 6.3, 6.3, 4.7, 4.2, 4.2, 4.2,
                    3.8, 3.8, 3.0, 2.8, 2.8, 3.1, 3.1, 2.6, 3.2
                ]
            },
            {
                "name": 'Goods',
                "data": [
                    0.3, -0.2, -1.0, -1.5, -2.0, -2.1, -1.9, -1.8, -2.0, -1.8, -2.0, -2.4, -2.1,
                    -1.9, -2.1, -1.5, -1.6, -1.7, -1.6, -1.8, -1.7, -1.5, -1.4, -0.5, -0.4, 0.2,
                    0.7, 1.1, 1.9, 2.5, 2.4, 3.0, 2.6, 2.7, 3.1, 3.2, 3.3, 3.3, 3.4, 3.2, 3.0, 2.4,
                    2.6, 2.5, 2.5, 2.6, 2.7, 2.5, 2.3, 2.1, 1.8, 1.2, 1.3, 1.3, 1.4, 1.5, 1.5, 1.7,
                    1.2, 0.9, 0.4, 0.5, 0.6, 1.3, 1.0, 0.6, -0.4, -0.9, -0.5, 0.0, -0.2, -0.3, 0.1,
                    -0.7, -0.2, -0.2, -0.5, 0.1, 1.6, 2.3, 2.9, 2.5, 3.3, 3.5, 4.9, 6.5, 6.9, 7.2,
                    8.3, 9.4, 12.4, 12.4, 12.7, 13.6, 13.0, 13.2, 14.8, 14.1, 13.4, 13.3, 13.4,
                    12.7, 10.0, 9.7, 8.5, 6.1, 6.3, 6.2, 2.9, 2.0, 1.9, 1.8, 1.1, 0.9, -0.8, -1.3,
                    -1.4, -0.5, -0.9, -1.4, -0.3
                ]
            },
            {
                "name": 'Services',
                "data": [
                    2.2, 2.1, 2.1, 2.1, 2.2, 2.2, 2.0, 2.1, 2.1, 2.2, 2.2, 2.2, 2.1, 2.2, 2.5, 2.2,
                    2.3, 2.6, 2.4, 2.6, 2.7, 2.6, 2.7, 2.6, 2.5, 2.4, 2.5, 2.5, 2.6, 2.2, 2.8, 2.6,
                    2.5, 2.4, 2.5, 2.5, 2.4, 2.4, 2.2, 2.3, 2.1, 2.1, 1.9, 2.1, 2.0, 2.0, 2.2, 2.0,
                    2.1, 2.2, 2.1, 2.2, 2.2, 2.2, 2.5, 2.3, 2.2, 2.2, 2.0, 2.2, 2.2, 2.2, 1.9, 2.1,
                    2.2, 2.2, 1.9, 1.8, 1.7, 2.0, 1.0, 1.5, 1.5, 1.5, 1.6, 1.7, 1.6, 1.6, 1.7, 1.9,
                    2.1, 1.8, 2.7, 2.5, 2.9, 3.0, 3.1, 3.1, 3.2, 3.7, 4.1, 4.3, 4.5, 4.9, 5.1, 5.3,
                    5.3, 5.4, 5.8, 5.2, 5.6, 5.7, 6.0, 6.3, 6.3, 6.5, 6.1, 6.3, 6.2, 6.0, 6.0, 6.1,
                    6.0, 6.0, 6.0, 5.9, 6.0, 5.7, 5.9, 5.6, 5.6
                ]
            },
            {
                "name": 'CPIH excl energy, food, alcohol & tobacco',
                "data": [
                    1.5, 1.3, 1.4, 1.5, 1.4, 1.2, 1.1, 1.2, 1.0, 1.3, 1.2, 1.2, 1.3, 1.4, 1.5, 1.4,
                    1.4, 1.6, 1.5, 1.5, 1.6, 1.6, 1.5, 1.7, 1.6, 1.7, 1.8, 1.8, 2.1, 1.9, 2.4, 2.5,
                    2.4, 2.4, 2.6, 2.5, 2.5, 2.5, 2.3, 2.4, 2.2, 2.1, 2.0, 2.0, 1.8, 1.8, 1.9, 1.8,
                    1.8, 1.8, 1.8, 1.8, 1.8, 1.8, 1.7, 1.7, 1.7, 1.9, 1.5, 1.6, 1.7, 1.7, 1.4, 1.6,
                    1.7, 1.6, 1.5, 1.3, 1.5, 1.8, 1.0, 1.4, 1.5, 1.2, 1.5, 1.5, 1.1, 1.3, 1.5, 2.0,
                    2.3, 1.9, 2.9, 2.7, 3.1, 3.6, 3.8, 4.0, 4.6, 5.1, 5.4, 5.2, 5.2, 5.5, 5.6, 5.8,
                    5.8, 5.7, 5.8, 5.3, 5.7, 5.7, 6.2, 6.5, 6.4, 6.4, 5.9, 5.9, 5.6, 5.2, 5.2, 5.1,
                    4.8, 4.7, 4.4, 4.2, 4.2, 4.1, 4.3, 4.0, 4.1
                ]
            }
        ],
        "rangeAnnotations": [
            {
                "text": "A test y axis range annotation with the label to the top",
                "range": {"axisValue1": 0, "axisValue2": 5},
                "axis": "y",
                "labelOffsetX": 150,
                "labelOffsetY": -100
            },
            {
                "text": "A test y axis range annotation with the label to the bottom",
                "range": {"axisValue1": 15, "axisValue2": 20},
                "axis": "y",
                "labelOffsetX": 350,
                "labelOffsetY": 60
            }
        ]
    })
}}

Nunjucks macro options

Name	Type	Required	Description
chartType	string	true if iframe not set	The type of chart to render. Supported types include: 'line', 'bar', 'column', 'scatter', 'columnrange', 'boxplot' and 'area'. Will be ignored if an iframe url is set.
unsupportedChartText	string	false	Optional text override to display after the chart type when it's not supported. Defaults to "chart type - chart type is not supported"
instructions	string	false	Instructions for keyboard users on how to interact with the chart. This text will be read aloud by screen readers to guide navigation and interaction.
theme	string	false	The theme to apply to the chart. Either `primary` or `alternate`. Defaults to `primary`. Will be ignored if an iframe url is set.
headingLevel	number	false	Number used to determine the heading level of the title. Use to ensure the title has a correct semantic order on the page. Accepts a value between 1 and 4, defaulting to 2 if not provided.
title	string	true	The main title of the chart.
subtitle	string	false	A subtitle that appears under the main title.
id	string	true	A unique identifier for the chart instance or iframe.
caption	string	false	A caption providing additional context for the chart.
description	string	true	A textual description of the chart for screen readers.
download	object	false	Object for (download)[#download] options.
legend	boolean	false	Whether the legend is displayed. Defaults to `true`. Note that legends are automatically hidden for single series charts. Will be ignored if an iframe url is set.
yAxis	object	true if iframe not set	Defines the vertical axis y-axis configuration parameters. Will be ignored if an iframe url is set.
xAxis	object	true if iframe not set	Defines the horizontal axis x-axis configuration parameters. Will be ignored if an iframe url is set.
series	array	true if iframe not set	The data series to be plotted, including labels and values. Will be ignored if an iframe url is set. Note: The number of series is limited by the selected theme - up to 6 series for the primary theme and 5 series for the alternate theme. Any additional series beyond these limits will be ignored and not displayed.
useStackedLayout	boolean	false	Determines whether the chart should use a stacked layout. It is useful only for bar and column charts. Will be ignored if an iframe url is set.
percentageHeightDesktop	integer	false	Sets the percentage plot height at desktop, relative to the width. If undefined the chart will fall back to the default height of 400px at desktop. Does not apply to bar charts. Will be ignored if an iframe url is set.
percentageHeightMobile	integer	false	Sets the percentage plot height at mobile, relative to the width. If undefined the chart will fall back to the default height of 400px at mobile. Does not apply to bar charts. Will be ignored if an iframe url is set.

annotations	array	false	An array of point annotations. Will be ignored if an iframe url is set.
rangeAnnotations	array	false	An array of range annotations. Will be ignored if an iframe url is set.
referenceLineAnnotations	array	false	An array of reference line annotations. Will be ignored if an iframe url is set.
estimateLineLabel	string	false	Label for the estimate line in the legend. Used in column charts with confidence intervals. Will be ignored if an iframe url is set.
uncertaintyRangeLabel	string	false	Label for the confidence interval in the legend. Used in column charts showing uncertainty ranges. Will be ignored if an iframe url is set.
iframeUrl	string	false	A url for a visualisation to display in an iframe instead of displaying a Highcharts chart.
footnotes	`Object<Footnotes>`	false	Footnotes to appear below the chart in a 'details' element
fallbackImageUrl	string	false	A url for a fallback image to display instead of the chart or iframe visualisation if JavaScript is disabled. If a fallback image is passed with an iframeUrl parameter, the iframe will be hidden for non-JavaScript users. If it is not passed, it is assumed the iframe content will provide a fallback image to be displayed inside the iframe.
fallbackImageAlt	string	false	Alt text for the fallback image - a short description only, as the description field describes the chart for screen readers. Defaults to "Fallback image for the chart as JavaScript is disabled"
iframeAspectRatio	string	false	Sets the aspect ratio for iframe charts. Only applicable when using an iframe chart. Acceptable values are 16-9, 4-3, 21-9, 1-1, 3-2, and 9-16. The value must be provided in the x-y format (e.g. 16-9). If an unsupported value is provided or a value is not provided, the aspect ratio will default to 16-9.

Download
Property	Type	Required	Description
title	string	false	The title displayed above the download options.
itemsList	array	false	An array of items available for download, each described by a (DownloadItem)[#DownloadItem].

DownloadItem
Property	Type	Required	Description
text	string	true	The label or description of the downloadable item.
url	string	true	The URL to the downloadable resource.

Y_Axis
Name	Type	Required	Description
title	string	true	The title text displayed on the y-axis. Note that for any chart type apart from bar charts, a maximum character limit of 50 characters is recommended to avoid the axis title being cut off at mobile.
labelFormat	string	false	A format string for the axis label. Examples of string formats can be found in these docs (opens in a new tab) .
tickIntervalMobile	number	false	The interval of the tick marks in axis units at mobile. Useful when you want to space out the labels (e.g. show every 2nd or 5th label).
tickIntervalDesktop	number	false	The interval of the tick marks in axis units at desktop. Useful when you want to space out the labels (e.g. show every 2nd or 5th label).
customReferenceLineValue	float or int	false	A custom value to display a darker reference line. If not supplied, the darker will appear at zero. The custom value is only used for column charts and line charts - for other chart types it will be ignored, and the darker line will appear at zero.
min	number	false	Sets the minimum value for the Y-axis. Relevant for Line, bar, area, column chart, column-range, boxplot and scatter charts.
max	number	false	Sets the maximum value for the Y-axis. Relevant for Line, bar, area, column chart, column-range, boxplot and scatter charts.
startOnTick	boolean	false	Align the axis to start on a tick. Relevant for Line, bar, area, column chart, column-range, boxplot and scatter charts.
endOnTick	boolean	false	Align the axis to end on a tick. Relevant for Line, bar, area, column chart, column-range, boxplot and scatter charts.

X_Axis
Name	Type	Required	Description
title	string	false	The title text displayed on the x-axis. Note: x-axis titles are not supported for bar chart types.
labelFormat	string	false	A format string for the x-axis label. Examples of string formats can be found in these docs (opens in a new tab) .
categories	array	false	Labels for each tick mark along the x-axis.
type	string	false	The type of axis. Can be one of `linear`, `logarithmic`, `datetime` or `category`. Defaults to linear.
tickIntervalMobile	number	false	The interval of the tick marks in axis units at mobile. Useful when you want to space out the labels (e.g. show every 2nd or 5th label).
tickIntervalDesktop	number	false	The interval of the tick marks in axis units at desktop. Useful when you want to space out the labels (e.g. show every 2nd or 5th label).
min	number	false	Sets the minimum value for the X-axis. Relevant only for scatter charts.
max	number	false	Sets the maximum value for the X-axis. Relevant only for scatter charts.
startOnTick	boolean	false	Align the axis to start on a tick. Relevant only for scatter charts.
endOnTick	boolean	false	Align the axis to end on a tick. Relevant only for scatter charts.

Series
Name	Type	Required	Description
name	string	true	The name of the series.
data	array	true	The data values for the series. Each value corresponds to a category on the x-axis.
dataLabels	boolean	false	Options for whether the DataLabel is displayed. Defaults to `false`. This option is only available for bar chart and clustered bar charts with two or fewer series, and 20 or fewer data points in any series.
marker	boolean	false	Options for whether the Marker is displayed on the data points. Defaults to `false`. This option is only available for line charts.
type	string	false	Specifies the configuration type to apply to the series. Supported types include 'line' and 'scatter'. By default, it aligns with the chart type. This is used when combining multiple chart types within a single chart. Note: Only the following chart type combinations are supported: "column with line" and "columnrange with scatter". For column with line, only one line series is supported. Additional line series will be ignored.
connectNulls	boolean	false	Whether to connect lines that have a data point missing. Only relevant for line charts.

Point annotations
Name	Type	Required	Description
text	string	true	The annotation text.
point	object	false	The x and y coordinates for the annotation
labelOffsetX (px)	int	true	The x offset in px of the label from the annotation point
labelOffsetY (px)	int	true	The y offset in px of the label from the annotation point

Point
Name	Type	Required	Description
xValue	float or int	true	The x axis value of the annotation. For category axes this is the zero based index of the x axis categories array. It must be an integer in this scenario.
yValue	float	true	The y axis value of the annotation

Range annotations
Name	Type	Required	Description
text	string	true	The annotation text.
range	Object	true	The xValue or yValue coordinates for the annotation
axis	string	true	The axis the range annotation should be applied to. Should be one of 'x' or 'y'. Note that for bar charts 'x' will be the vertical axis, and 'y' will be the horizontal axis.
labelInside	boolean	true	Whether the label for the range sits inside or outside the shaded area
labelOffsetX (px)	int	false	The horizontal offset in px of the label from it's default position. Ignored if labelInside is true.
labelOffsetY (px)	int	false	The vertical offset in px of the label from it's default position. Ignored if labelInside is true.
labelWidth (px)	int	false	The width of the label in pixels - the label text will wrap if it is wider than this value. If undefined, the label will be set to 150px wide.

Range
Name	Type	Required	Description
axisValue1	float or int	true	The starting point on the axis for the annotation. For category axes this is the zero based index of the categories array. It must be an integer in this scenario.
axisValue2	float or int	true	The ending pont on the axis for the annotation. For category axes this is the zero based index of the axis categories array. It must be an integer in this scenario.

Reference line annotations
Name	Type	Required	Description
text	string	true	The annotation text.
value	float or int	true	The x axis or y axis value for the annotation. For category axes this is the zero based index of the categories array. It must be an integer in this scenario.
axis	string	true	The axis the range annotation should be applied to. Should be one of 'x' or 'y'. Note that for bar charts 'x' will be the vertical axis, and 'y' will be the horizontal axis.
labelWidth (px)	int	false	The width of the label in pixels - the label text will wrap if it is wider than this value. If undefined, the label will be set to 150px wide.
labelOffsetX (px)	int	false	The horizontal offset in px of the label from it's default position.
labelOffsetY (px)	int	false	The vertical offset in px of the label from it's default position.

Footnotes
Name	Type	Required	Description
title	string	true	The title text for the footnotes heading
content	string	true	HTML content for the footnotes

HTML

<div data-highcharts-base-chart data-highcharts-type="line" data-highcharts-theme="primary"
  data-highcharts-title="Sales volumes and values saw moderate growth in July 2024" data-highcharts-id="id"
  data-highcharts-percentage-height-desktop="35" data-highcharts-percentage-height-mobile="90"
  data-highcharts-x-axis-tick-interval-mobile="30" data-highcharts-x-axis-tick-interval-desktop="15">
  <figure class="ons-chart" aria-describedby="chart-audio-description-id">
    <h4 class="ons-chart__title">Sales volumes and values saw moderate growth in July 2024</h4>
    <h5 class="ons-chart__subtitle">Figure 6: Upward contribution from housing and household services (including energy)
      saw the annual CPIH inflation rate rise</h5>
    <p class="ons-u-vh" id="chart-audio-description-id">Line chart showing the annual rate of inflation for the Consumer
      Prices Index including owner occupiers’ housing costs (CPIH) and its components.</p>
    <div data-highcharts-chart-container class="ons-chart__container" tabindex="0" role="region"
      aria-label="chart container" aria-describedby="chart-instructions-id">
      <div id="chart-instructions-id" class="ons-u-vh">Use the Tab key to move focus into the chart. Once inside, use
        the arrow keys to navigate between data points. As you move, tooltips will be announced to describe each point.
        Touch device users, explore by touch or with swipe gestures.</div>
      <div data-highcharts-chart class="ons-chart__chart"></div>
    </div>
    <ul class="ons-chart__annotations-footnotes" aria-hidden="true" data-annotations-footnotes>
      <li class="ons-chart__annotations-footnotes_item">
        <span class="ons-chart__annotations-footnotes-number">1</span> A test y axis range annotation with the label to
        the top
      </li>
      <li class="ons-chart__annotations-footnotes_item">
        <span class="ons-chart__annotations-footnotes-number">2</span> A test y axis range annotation with the label to
        the bottom
      </li>
    </ul>
    <figcaption class="ons-chart__caption">Source: Monthly Business Survey, Retails Sales Inquiry from the Office for
      National Statistics</figcaption>
  </figure>
  <h6 class="ons-chart__download-title">Download Figure 1 data</h6>
  <ol class="ons-list">
    <li class="ons-list__item">
      <a href="#" class="ons-list__link">Excel spreadsheet (XLSX format, 18KB)</a>
    </li>
    <li class="ons-list__item">
      <a href="#" class="ons-list__link">Simple text file (CSV format, 25KB)</a>
    </li>
    <li class="ons-list__item">
      <a href="#" class="ons-list__link">Image (PNG format, 25KB)</a>
    </li>
  </ol>
  <!-- Set scripts to pass the config values as json to the JavaScript -->
  <!-- prettier-ignore-start -->
  <script type="application/json" data-highcharts-config--id>
    {
      "chart": {
        "type": "line"
      },
      "legend": {
        "enabled": true
      },
      "yAxis": {
        "title": {
          "text": "Sales"
        },
        "labels": {
          "format": "{value:,.f}"
        }
      },
      "xAxis": {
        "title": {
          "text": "Year"
        },
        "categories": ["Oct 2014", "Nov 2014", "Dec 2014", "Jan 2015", "Feb 2015", "Mar 2015", "Apr 2015", "May 2015",
          "Jun 2015", "Jul 2015", "Aug 2015", "Sep 2015", "Oct 2015", "Nov 2015", "Dec 2015", "Jan 2016", "Feb 2016",
          "Mar 2016", "Apr 2016", "May 2016", "Jun 2016", "Jul 2016", "Aug 2016", "Sep 2016", "Oct 2016", "Nov 2016",
          "Dec 2016", "Jan 2017", "Feb 2017", "Mar 2017", "Apr 2017", "May 2017", "Jun 2017", "Jul 2017", "Aug 2017",
          "Sep 2017", "Oct 2017", "Nov 2017", "Dec 2017", "Jan 2018", "Feb 2018", "Mar 2018", "Apr 2018", "May 2018",
          "Jun 2018", "Jul 2018", "Aug 2018", "Sep 2018", "Oct 2018", "Nov 2018", "Dec 2018", "Jan 2019", "Feb 2019",
          "Mar 2019", "Apr 2019", "May 2019", "Jun 2019", "Jul 2019", "Aug 2019", "Sep 2019", "Oct 2019", "Nov 2019",
          "Dec 2019", "Jan 2020", "Feb 2020", "Mar 2020", "Apr 2020", "May 2020", "Jun 2020", "Jul 2020", "Aug 2020",
          "Sep 2020", "Oct 2020", "Nov 2020", "Dec 2020", "Jan 2021", "Feb 2021", "Mar 2021", "Apr 2021", "May 2021",
          "Jun 2021", "Jul 2021", "Aug 2021", "Sep 2021", "Oct 2021", "Nov 2021", "Dec 2021", "Jan 2022", "Feb 2022",
          "Mar 2022", "Apr 2022", "May 2022", "Jun 2022", "Jul 2022", "Aug 2022", "Sep 2022", "Oct 2022", "Nov 2022",
          "Dec 2022", "Jan 2023", "Feb 2023", "Mar 2023", "Apr 2023", "May 2023", "Jun 2023", "Jul 2023", "Aug 2023",
          "Sep 2023", "Oct 2023", "Nov 2023", "Dec 2023", "Jan 2024", "Feb 2024", "Mar 2024", "Apr 2024", "May 2024",
          "Jun 2024", "Jul 2024", "Aug 2024", "Sep 2024", "Oct 2024"
        ],
        "type": "linear",
        "labels": {
          "format": "{value:,.f}"
        }
      },
      "series": [{
        "name": "CPIH",
        "data": [1.3, 1.1, 0.7, 0.5, 0.4, 0.3, 0.3, 0.4, 0.3, 0.5, 0.4, 0.2, 0.2, 0.4, 0.5, 0.6, 0.6, 0.8, 0.7, 0.7,
          0.8, 0.9, 1, 1.3, 1.3, 1.5, 1.8, 1.9, 2.3, 2.3, 2.6, 2.7, 2.6, 2.6, 2.7, 2.8, 2.8, 2.8, 2.7, 2.7, 2.5,
          2.3, 2.2, 2.3, 2.3, 2.3, 2.4, 2.2, 2.2, 2.2, 2, 1.8, 1.8, 1.8, 2, 1.9, 1.9, 2, 1.7, 1.7, 1.5, 1.5, 1.4,
          1.8, 1.7, 1.5, 0.9, 0.7, 0.8, 1.1, 0.5, 0.7, 0.9, 0.6, 0.8, 0.9, 0.7, 1, 1.6, 2.1, 2.4, 2.1, 3, 2.9,
          3.8, 4.6, 4.8, 4.9, 5.5, 6.2, 7.8, 7.9, 8.2, 8.8, 8.6, 8.8, 9.6, 9.3, 9.2, 8.8, 9.2, 8.9, 7.8, 7.9, 7.3,
          6.4, 6.3, 6.3, 4.7, 4.2, 4.2, 4.2, 3.8, 3.8, 3, 2.8, 2.8, 3.1, 3.1, 2.6, 3.2
        ],
        "marker": {
          "enabled": false
        },
        "dataLabels": {
          "enabled": false
        },
        "connectNulls": false,
        "type": "line"
      }, {
        "name": "Goods",
        "data": [0.3, -0.2, -1, -1.5, -2, -2.1, -1.9, -1.8, -2, -1.8, -2, -2.4, -2.1, -1.9, -2.1, -1.5, -1.6, -1.7,
          -1.6, -1.8, -1.7, -1.5, -1.4, -0.5, -0.4, 0.2, 0.7, 1.1, 1.9, 2.5, 2.4, 3, 2.6, 2.7, 3.1, 3.2, 3.3, 3.3,
          3.4, 3.2, 3, 2.4, 2.6, 2.5, 2.5, 2.6, 2.7, 2.5, 2.3, 2.1, 1.8, 1.2, 1.3, 1.3, 1.4, 1.5, 1.5, 1.7, 1.2,
          0.9, 0.4, 0.5, 0.6, 1.3, 1, 0.6, -0.4, -0.9, -0.5, 0, -0.2, -0.3, 0.1, -0.7, -0.2, -0.2, -0.5, 0.1, 1.6,
          2.3, 2.9, 2.5, 3.3, 3.5, 4.9, 6.5, 6.9, 7.2, 8.3, 9.4, 12.4, 12.4, 12.7, 13.6, 13, 13.2, 14.8, 14.1,
          13.4, 13.3, 13.4, 12.7, 10, 9.7, 8.5, 6.1, 6.3, 6.2, 2.9, 2, 1.9, 1.8, 1.1, 0.9, -0.8, -1.3, -1.4, -0.5,
          -0.9, -1.4, -0.3
        ],
        "marker": {
          "enabled": false
        },
        "dataLabels": {
          "enabled": false
        },
        "connectNulls": false,
        "type": "line"
      }, {
        "name": "Services",
        "data": [2.2, 2.1, 2.1, 2.1, 2.2, 2.2, 2, 2.1, 2.1, 2.2, 2.2, 2.2, 2.1, 2.2, 2.5, 2.2, 2.3, 2.6, 2.4, 2.6,
          2.7, 2.6, 2.7, 2.6, 2.5, 2.4, 2.5, 2.5, 2.6, 2.2, 2.8, 2.6, 2.5, 2.4, 2.5, 2.5, 2.4, 2.4, 2.2, 2.3, 2.1,
          2.1, 1.9, 2.1, 2, 2, 2.2, 2, 2.1, 2.2, 2.1, 2.2, 2.2, 2.2, 2.5, 2.3, 2.2, 2.2, 2, 2.2, 2.2, 2.2, 1.9,
          2.1, 2.2, 2.2, 1.9, 1.8, 1.7, 2, 1, 1.5, 1.5, 1.5, 1.6, 1.7, 1.6, 1.6, 1.7, 1.9, 2.1, 1.8, 2.7, 2.5,
          2.9, 3, 3.1, 3.1, 3.2, 3.7, 4.1, 4.3, 4.5, 4.9, 5.1, 5.3, 5.3, 5.4, 5.8, 5.2, 5.6, 5.7, 6, 6.3, 6.3,
          6.5, 6.1, 6.3, 6.2, 6, 6, 6.1, 6, 6, 6, 5.9, 6, 5.7, 5.9, 5.6, 5.6
        ],
        "marker": {
          "enabled": false
        },
        "dataLabels": {
          "enabled": false
        },
        "connectNulls": false,
        "type": "line"
      }, {
        "name": "CPIH excl energy, food, alcohol \u0026 tobacco",
        "data": [1.5, 1.3, 1.4, 1.5, 1.4, 1.2, 1.1, 1.2, 1, 1.3, 1.2, 1.2, 1.3, 1.4, 1.5, 1.4, 1.4, 1.6, 1.5, 1.5,
          1.6, 1.6, 1.5, 1.7, 1.6, 1.7, 1.8, 1.8, 2.1, 1.9, 2.4, 2.5, 2.4, 2.4, 2.6, 2.5, 2.5, 2.5, 2.3, 2.4, 2.2,
          2.1, 2, 2, 1.8, 1.8, 1.9, 1.8, 1.8, 1.8, 1.8, 1.8, 1.8, 1.8, 1.7, 1.7, 1.7, 1.9, 1.5, 1.6, 1.7, 1.7,
          1.4, 1.6, 1.7, 1.6, 1.5, 1.3, 1.5, 1.8, 1, 1.4, 1.5, 1.2, 1.5, 1.5, 1.1, 1.3, 1.5, 2, 2.3, 1.9, 2.9,
          2.7, 3.1, 3.6, 3.8, 4, 4.6, 5.1, 5.4, 5.2, 5.2, 5.5, 5.6, 5.8, 5.8, 5.7, 5.8, 5.3, 5.7, 5.7, 6.2, 6.5,
          6.4, 6.4, 5.9, 5.9, 5.6, 5.2, 5.2, 5.1, 4.8, 4.7, 4.4, 4.2, 4.2, 4.1, 4.3, 4, 4.1
        ],
        "marker": {
          "enabled": false
        },
        "dataLabels": {
          "enabled": false
        },
        "connectNulls": false,
        "type": "line"
      }]
    }
  </script>
  <script type="application/json" data-highcharts-range-annotations--id>
    [{
      "text": "A test y axis range annotation with the label to the top",
      "range": {
        "axisValue1": 0,
        "axisValue2": 5
      },
      "axis": "y",
      "labelOffsetX": 150,
      "labelOffsetY": -100
    }, {
      "text": "A test y axis range annotation with the label to the bottom",
      "range": {
        "axisValue1": 15,
        "axisValue2": 20
      },
      "axis": "y",
      "labelOffsetX": 350,
      "labelOffsetY": 60
    }]
  </script>
  <!-- prettier-ignore-end -->
</div>

Options

There are multiple additional options for line charts.

Line chart with axis min and max values
Line chart with custom reference line value
Line chart with markers

Line chart with axis min and max values

Use this when you need to axis minimum and maximum values.

Open this example in a new tab(Example Line Chart With Axis Min And Max Values)

Example Line Chart With Axis Min And Max Values contents

Nunjucksfor Example Line Chart With Axis Min And Max Values
Nunjucks macro optionsfor Example Line Chart With Axis Min And Max Values
HTMLfor Example Line Chart With Axis Min And Max Values

Nunjucks

{% from "components/chart/_macro.njk" import onsChart %}

{{
    onsChart({
        "chartType": "line",
        "description": "Line chart showing the annual rate of inflation for the Consumer Prices Index including owner occupiers’ housing costs (CPIH) and its components.",
        "theme": "primary",
        "title": "Sales volumes and values saw moderate growth in July 2024",
        "subtitle": "Figure 6: Upward contribution from housing and household services (including energy) saw the annual CPIH inflation rate rise",
        "id": "id",
        "headingLevel": 4,
        "caption": "Source: Monthly Business Survey, Retails Sales Inquiry from the Office for National Statistics",
        "download": {
            'title': 'Download Figure 1 data',
            'itemsList': [
            {
                "text": "Excel spreadsheet (XLSX format, 18KB)",
                "url": "#"
            },
            {
                "text": "Simple text file (CSV format, 25KB)",
                "url": "#"
            },
            {

                "text": "Image (PNG format, 25KB)",
                "url": "#"
            }
        ]},
        "legend": true,
        "xAxis": {
            "title": "Year",
            "type": "linear",
            "labelFormat": "{value:,.f}",
            "categories": [
                'Oct 2014',
                'Nov 2014',
                'Dec 2014',
                'Jan 2015',
                'Feb 2015',
                'Mar 2015',
                'Apr 2015',
                'May 2015',
                'Jun 2015',
                'Jul 2015',
                'Aug 2015',
                'Sep 2015',
                'Oct 2015',
                'Nov 2015',
                'Dec 2015',
                'Jan 2016',
                'Feb 2016',
                'Mar 2016',
                'Apr 2016',
                'May 2016',
                'Jun 2016',
                'Jul 2016',
                'Aug 2016',
                'Sep 2016',
                'Oct 2016',
                'Nov 2016',
                'Dec 2016',
                'Jan 2017',
                'Feb 2017',
                'Mar 2017',
                'Apr 2017',
                'May 2017',
                'Jun 2017',
                'Jul 2017',
                'Aug 2017',
                'Sep 2017',
                'Oct 2017',
                'Nov 2017',
                'Dec 2017',
                'Jan 2018',
                'Feb 2018',
                'Mar 2018',
                'Apr 2018',
                'May 2018',
                'Jun 2018',
                'Jul 2018',
                'Aug 2018',
                'Sep 2018',
                'Oct 2018',
                'Nov 2018',
                'Dec 2018',
                'Jan 2019',
                'Feb 2019',
                'Mar 2019',
                'Apr 2019',
                'May 2019',
                'Jun 2019',
                'Jul 2019',
                'Aug 2019',
                'Sep 2019',
                'Oct 2019',
                'Nov 2019',
                'Dec 2019',
                'Jan 2020',
                'Feb 2020',
                'Mar 2020',
                'Apr 2020',
                'May 2020',
                'Jun 2020',
                'Jul 2020',
                'Aug 2020',
                'Sep 2020',
                'Oct 2020',
                'Nov 2020',
                'Dec 2020',
                'Jan 2021',
                'Feb 2021',
                'Mar 2021',
                'Apr 2021',
                'May 2021',
                'Jun 2021',
                'Jul 2021',
                'Aug 2021',
                'Sep 2021',
                'Oct 2021',
                'Nov 2021',
                'Dec 2021',
                'Jan 2022',
                'Feb 2022',
                'Mar 2022',
                'Apr 2022',
                'May 2022',
                'Jun 2022',
                'Jul 2022',
                'Aug 2022',
                'Sep 2022',
                'Oct 2022',
                'Nov 2022',
                'Dec 2022',
                'Jan 2023',
                'Feb 2023',
                'Mar 2023',
                'Apr 2023',
                'May 2023',
                'Jun 2023',
                'Jul 2023',
                'Aug 2023',
                'Sep 2023',
                'Oct 2023',
                'Nov 2023',
                'Dec 2023',
                'Jan 2024',
                'Feb 2024',
                'Mar 2024',
                'Apr 2024',
                'May 2024',
                'Jun 2024',
                'Jul 2024',
                'Aug 2024',
                'Sep 2024',
                'Oct 2024'
            ],
            "tickIntervalDesktop": 15,
            "tickIntervalMobile": 30
        },
        "yAxis": {
            "title": "Sales",
            "labelFormat": "{value:,.f}",
            "min": -5,
            "max": 15,
            "startOnTick": true,
            "endOnTick": true
        },
        "series": [
            {
                "name": 'CPIH',
                "data": [
                    1.3, 1.1, 0.7, 0.5, 0.4, 0.3, 0.3, 0.4, 0.3, 0.5, 0.4, 0.2, 0.2, 0.4, 0.5, 0.6,
                    0.6, 0.8, 0.7, 0.7, 0.8, 0.9, 1.0, 1.3, 1.3, 1.5, 1.8, 1.9, 2.3, 2.3, 2.6, 2.7,
                    2.6, 2.6, 2.7, 2.8, 2.8, 2.8, 2.7, 2.7, 2.5, 2.3, 2.2, 2.3, 2.3, 2.3, 2.4, 2.2,
                    2.2, 2.2, 2.0, 1.8, 1.8, 1.8, 2.0, 1.9, 1.9, 2.0, 1.7, 1.7, 1.5, 1.5, 1.4, 1.8,
                    1.7, 1.5, 0.9, 0.7, 0.8, 1.1, 0.5, 0.7, 0.9, 0.6, 0.8, 0.9, 0.7, 1.0, 1.6, 2.1,
                    2.4, 2.1, 3.0, 2.9, 3.8, 4.6, 4.8, 4.9, 5.5, 6.2, 7.8, 7.9, 8.2, 8.8, 8.6, 8.8,
                    9.6, 9.3, 9.2, 8.8, 9.2, 8.9, 7.8, 7.9, 7.3, 6.4, 6.3, 6.3, 4.7, 4.2, 4.2, 4.2,
                    3.8, 3.8, 3.0, 2.8, 2.8, 3.1, 3.1, 2.6, 3.2
                ]
            },
            {
                "name": 'Goods',
                "data": [
                    0.3, -0.2, -1.0, -1.5, -2.0, -2.1, -1.9, -1.8, -2.0, -1.8, -2.0, -2.4, -2.1,
                    -1.9, -2.1, -1.5, -1.6, -1.7, -1.6, -1.8, -1.7, -1.5, -1.4, -0.5, -0.4, 0.2,
                    0.7, 1.1, 1.9, 2.5, 2.4, 3.0, 2.6, 2.7, 3.1, 3.2, 3.3, 3.3, 3.4, 3.2, 3.0, 2.4,
                    2.6, 2.5, 2.5, 2.6, 2.7, 2.5, 2.3, 2.1, 1.8, 1.2, 1.3, 1.3, 1.4, 1.5, 1.5, 1.7,
                    1.2, 0.9, 0.4, 0.5, 0.6, 1.3, 1.0, 0.6, -0.4, -0.9, -0.5, 0.0, -0.2, -0.3, 0.1,
                    -0.7, -0.2, -0.2, -0.5, 0.1, 1.6, 2.3, 2.9, 2.5, 3.3, 3.5, 4.9, 6.5, 6.9, 7.2,
                    8.3, 9.4, 12.4, 12.4, 12.7, 13.6, 13.0, 13.2, 14.8, 14.1, 13.4, 13.3, 13.4,
                    12.7, 10.0, 9.7, 8.5, 6.1, 6.3, 6.2, 2.9, 2.0, 1.9, 1.8, 1.1, 0.9, -0.8, -1.3,
                    -1.4, -0.5, -0.9, -1.4, -0.3
                ]
            },
            {
                "name": 'Services',
                "data": [
                    2.2, 2.1, 2.1, 2.1, 2.2, 2.2, 2.0, 2.1, 2.1, 2.2, 2.2, 2.2, 2.1, 2.2, 2.5, 2.2,
                    2.3, 2.6, 2.4, 2.6, 2.7, 2.6, 2.7, 2.6, 2.5, 2.4, 2.5, 2.5, 2.6, 2.2, 2.8, 2.6,
                    2.5, 2.4, 2.5, 2.5, 2.4, 2.4, 2.2, 2.3, 2.1, 2.1, 1.9, 2.1, 2.0, 2.0, 2.2, 2.0,
                    2.1, 2.2, 2.1, 2.2, 2.2, 2.2, 2.5, 2.3, 2.2, 2.2, 2.0, 2.2, 2.2, 2.2, 1.9, 2.1,
                    2.2, 2.2, 1.9, 1.8, 1.7, 2.0, 1.0, 1.5, 1.5, 1.5, 1.6, 1.7, 1.6, 1.6, 1.7, 1.9,
                    2.1, 1.8, 2.7, 2.5, 2.9, 3.0, 3.1, 3.1, 3.2, 3.7, 4.1, 4.3, 4.5, 4.9, 5.1, 5.3,
                    5.3, 5.4, 5.8, 5.2, 5.6, 5.7, 6.0, 6.3, 6.3, 6.5, 6.1, 6.3, 6.2, 6.0, 6.0, 6.1,
                    6.0, 6.0, 6.0, 5.9, 6.0, 5.7, 5.9, 5.6, 5.6
                ]
            },
            {
                "name": 'CPIH excl energy, food, alcohol & tobacco',
                "data": [
                    1.5, 1.3, 1.4, 1.5, 1.4, 1.2, 1.1, 1.2, 1.0, 1.3, 1.2, 1.2, 1.3, 1.4, 1.5, 1.4,
                    1.4, 1.6, 1.5, 1.5, 1.6, 1.6, 1.5, 1.7, 1.6, 1.7, 1.8, 1.8, 2.1, 1.9, 2.4, 2.5,
                    2.4, 2.4, 2.6, 2.5, 2.5, 2.5, 2.3, 2.4, 2.2, 2.1, 2.0, 2.0, 1.8, 1.8, 1.9, 1.8,
                    1.8, 1.8, 1.8, 1.8, 1.8, 1.8, 1.7, 1.7, 1.7, 1.9, 1.5, 1.6, 1.7, 1.7, 1.4, 1.6,
                    1.7, 1.6, 1.5, 1.3, 1.5, 1.8, 1.0, 1.4, 1.5, 1.2, 1.5, 1.5, 1.1, 1.3, 1.5, 2.0,
                    2.3, 1.9, 2.9, 2.7, 3.1, 3.6, 3.8, 4.0, 4.6, 5.1, 5.4, 5.2, 5.2, 5.5, 5.6, 5.8,
                    5.8, 5.7, 5.8, 5.3, 5.7, 5.7, 6.2, 6.5, 6.4, 6.4, 5.9, 5.9, 5.6, 5.2, 5.2, 5.1,
                    4.8, 4.7, 4.4, 4.2, 4.2, 4.1, 4.3, 4.0, 4.1
                ]
            }
        ],
        "percentageHeightDesktop": 35,
        "percentageHeightMobile": 90
    })
}}

Nunjucks macro options

Name	Type	Required	Description
chartType	string	true if iframe not set	The type of chart to render. Supported types include: 'line', 'bar', 'column', 'scatter', 'columnrange', 'boxplot' and 'area'. Will be ignored if an iframe url is set.
unsupportedChartText	string	false	Optional text override to display after the chart type when it's not supported. Defaults to "chart type - chart type is not supported"
instructions	string	false	Instructions for keyboard users on how to interact with the chart. This text will be read aloud by screen readers to guide navigation and interaction.
theme	string	false	The theme to apply to the chart. Either `primary` or `alternate`. Defaults to `primary`. Will be ignored if an iframe url is set.
headingLevel	number	false	Number used to determine the heading level of the title. Use to ensure the title has a correct semantic order on the page. Accepts a value between 1 and 4, defaulting to 2 if not provided.
title	string	true	The main title of the chart.
subtitle	string	false	A subtitle that appears under the main title.
id	string	true	A unique identifier for the chart instance or iframe.
caption	string	false	A caption providing additional context for the chart.
description	string	true	A textual description of the chart for screen readers.
download	object	false	Object for (download)[#download] options.
legend	boolean	false	Whether the legend is displayed. Defaults to `true`. Note that legends are automatically hidden for single series charts. Will be ignored if an iframe url is set.
yAxis	object	true if iframe not set	Defines the vertical axis y-axis configuration parameters. Will be ignored if an iframe url is set.
xAxis	object	true if iframe not set	Defines the horizontal axis x-axis configuration parameters. Will be ignored if an iframe url is set.
series	array	true if iframe not set	The data series to be plotted, including labels and values. Will be ignored if an iframe url is set. Note: The number of series is limited by the selected theme - up to 6 series for the primary theme and 5 series for the alternate theme. Any additional series beyond these limits will be ignored and not displayed.
useStackedLayout	boolean	false	Determines whether the chart should use a stacked layout. It is useful only for bar and column charts. Will be ignored if an iframe url is set.
percentageHeightDesktop	integer	false	Sets the percentage plot height at desktop, relative to the width. If undefined the chart will fall back to the default height of 400px at desktop. Does not apply to bar charts. Will be ignored if an iframe url is set.
percentageHeightMobile	integer	false	Sets the percentage plot height at mobile, relative to the width. If undefined the chart will fall back to the default height of 400px at mobile. Does not apply to bar charts. Will be ignored if an iframe url is set.

annotations	array	false	An array of point annotations. Will be ignored if an iframe url is set.
rangeAnnotations	array	false	An array of range annotations. Will be ignored if an iframe url is set.
referenceLineAnnotations	array	false	An array of reference line annotations. Will be ignored if an iframe url is set.
estimateLineLabel	string	false	Label for the estimate line in the legend. Used in column charts with confidence intervals. Will be ignored if an iframe url is set.
uncertaintyRangeLabel	string	false	Label for the confidence interval in the legend. Used in column charts showing uncertainty ranges. Will be ignored if an iframe url is set.
iframeUrl	string	false	A url for a visualisation to display in an iframe instead of displaying a Highcharts chart.
footnotes	`Object<Footnotes>`	false	Footnotes to appear below the chart in a 'details' element
fallbackImageUrl	string	false	A url for a fallback image to display instead of the chart or iframe visualisation if JavaScript is disabled. If a fallback image is passed with an iframeUrl parameter, the iframe will be hidden for non-JavaScript users. If it is not passed, it is assumed the iframe content will provide a fallback image to be displayed inside the iframe.
fallbackImageAlt	string	false	Alt text for the fallback image - a short description only, as the description field describes the chart for screen readers. Defaults to "Fallback image for the chart as JavaScript is disabled"
iframeAspectRatio	string	false	Sets the aspect ratio for iframe charts. Only applicable when using an iframe chart. Acceptable values are 16-9, 4-3, 21-9, 1-1, 3-2, and 9-16. The value must be provided in the x-y format (e.g. 16-9). If an unsupported value is provided or a value is not provided, the aspect ratio will default to 16-9.

Download
Property	Type	Required	Description
title	string	false	The title displayed above the download options.
itemsList	array	false	An array of items available for download, each described by a (DownloadItem)[#DownloadItem].

DownloadItem
Property	Type	Required	Description
text	string	true	The label or description of the downloadable item.
url	string	true	The URL to the downloadable resource.

Y_Axis
Name	Type	Required	Description
title	string	true	The title text displayed on the y-axis. Note that for any chart type apart from bar charts, a maximum character limit of 50 characters is recommended to avoid the axis title being cut off at mobile.
labelFormat	string	false	A format string for the axis label. Examples of string formats can be found in these docs (opens in a new tab) .
tickIntervalMobile	number	false	The interval of the tick marks in axis units at mobile. Useful when you want to space out the labels (e.g. show every 2nd or 5th label).
tickIntervalDesktop	number	false	The interval of the tick marks in axis units at desktop. Useful when you want to space out the labels (e.g. show every 2nd or 5th label).
customReferenceLineValue	float or int	false	A custom value to display a darker reference line. If not supplied, the darker will appear at zero. The custom value is only used for column charts and line charts - for other chart types it will be ignored, and the darker line will appear at zero.
min	number	false	Sets the minimum value for the Y-axis. Relevant for Line, bar, area, column chart, column-range, boxplot and scatter charts.
max	number	false	Sets the maximum value for the Y-axis. Relevant for Line, bar, area, column chart, column-range, boxplot and scatter charts.
startOnTick	boolean	false	Align the axis to start on a tick. Relevant for Line, bar, area, column chart, column-range, boxplot and scatter charts.
endOnTick	boolean	false	Align the axis to end on a tick. Relevant for Line, bar, area, column chart, column-range, boxplot and scatter charts.

X_Axis
Name	Type	Required	Description
title	string	false	The title text displayed on the x-axis. Note: x-axis titles are not supported for bar chart types.
labelFormat	string	false	A format string for the x-axis label. Examples of string formats can be found in these docs (opens in a new tab) .
categories	array	false	Labels for each tick mark along the x-axis.
type	string	false	The type of axis. Can be one of `linear`, `logarithmic`, `datetime` or `category`. Defaults to linear.
tickIntervalMobile	number	false	The interval of the tick marks in axis units at mobile. Useful when you want to space out the labels (e.g. show every 2nd or 5th label).
tickIntervalDesktop	number	false	The interval of the tick marks in axis units at desktop. Useful when you want to space out the labels (e.g. show every 2nd or 5th label).
min	number	false	Sets the minimum value for the X-axis. Relevant only for scatter charts.
max	number	false	Sets the maximum value for the X-axis. Relevant only for scatter charts.
startOnTick	boolean	false	Align the axis to start on a tick. Relevant only for scatter charts.
endOnTick	boolean	false	Align the axis to end on a tick. Relevant only for scatter charts.

Series
Name	Type	Required	Description
name	string	true	The name of the series.
data	array	true	The data values for the series. Each value corresponds to a category on the x-axis.
dataLabels	boolean	false	Options for whether the DataLabel is displayed. Defaults to `false`. This option is only available for bar chart and clustered bar charts with two or fewer series, and 20 or fewer data points in any series.
marker	boolean	false	Options for whether the Marker is displayed on the data points. Defaults to `false`. This option is only available for line charts.
type	string	false	Specifies the configuration type to apply to the series. Supported types include 'line' and 'scatter'. By default, it aligns with the chart type. This is used when combining multiple chart types within a single chart. Note: Only the following chart type combinations are supported: "column with line" and "columnrange with scatter". For column with line, only one line series is supported. Additional line series will be ignored.
connectNulls	boolean	false	Whether to connect lines that have a data point missing. Only relevant for line charts.

Point annotations
Name	Type	Required	Description
text	string	true	The annotation text.
point	object	false	The x and y coordinates for the annotation
labelOffsetX (px)	int	true	The x offset in px of the label from the annotation point
labelOffsetY (px)	int	true	The y offset in px of the label from the annotation point

Point
Name	Type	Required	Description
xValue	float or int	true	The x axis value of the annotation. For category axes this is the zero based index of the x axis categories array. It must be an integer in this scenario.
yValue	float	true	The y axis value of the annotation

Range annotations
Name	Type	Required	Description
text	string	true	The annotation text.
range	Object	true	The xValue or yValue coordinates for the annotation
axis	string	true	The axis the range annotation should be applied to. Should be one of 'x' or 'y'. Note that for bar charts 'x' will be the vertical axis, and 'y' will be the horizontal axis.
labelInside	boolean	true	Whether the label for the range sits inside or outside the shaded area
labelOffsetX (px)	int	false	The horizontal offset in px of the label from it's default position. Ignored if labelInside is true.
labelOffsetY (px)	int	false	The vertical offset in px of the label from it's default position. Ignored if labelInside is true.
labelWidth (px)	int	false	The width of the label in pixels - the label text will wrap if it is wider than this value. If undefined, the label will be set to 150px wide.

Range
Name	Type	Required	Description
axisValue1	float or int	true	The starting point on the axis for the annotation. For category axes this is the zero based index of the categories array. It must be an integer in this scenario.
axisValue2	float or int	true	The ending pont on the axis for the annotation. For category axes this is the zero based index of the axis categories array. It must be an integer in this scenario.

Reference line annotations
Name	Type	Required	Description
text	string	true	The annotation text.
value	float or int	true	The x axis or y axis value for the annotation. For category axes this is the zero based index of the categories array. It must be an integer in this scenario.
axis	string	true	The axis the range annotation should be applied to. Should be one of 'x' or 'y'. Note that for bar charts 'x' will be the vertical axis, and 'y' will be the horizontal axis.
labelWidth (px)	int	false	The width of the label in pixels - the label text will wrap if it is wider than this value. If undefined, the label will be set to 150px wide.
labelOffsetX (px)	int	false	The horizontal offset in px of the label from it's default position.
labelOffsetY (px)	int	false	The vertical offset in px of the label from it's default position.

Footnotes
Name	Type	Required	Description
title	string	true	The title text for the footnotes heading
content	string	true	HTML content for the footnotes

HTML

<div data-highcharts-base-chart data-highcharts-type="line" data-highcharts-theme="primary"
  data-highcharts-title="Sales volumes and values saw moderate growth in July 2024" data-highcharts-id="id"
  data-highcharts-percentage-height-desktop="35" data-highcharts-percentage-height-mobile="90"
  data-highcharts-x-axis-tick-interval-mobile="30" data-highcharts-x-axis-tick-interval-desktop="15">
  <figure class="ons-chart" aria-describedby="chart-audio-description-id">
    <h4 class="ons-chart__title">Sales volumes and values saw moderate growth in July 2024</h4>
    <h5 class="ons-chart__subtitle">Figure 6: Upward contribution from housing and household services (including energy)
      saw the annual CPIH inflation rate rise</h5>
    <p class="ons-u-vh" id="chart-audio-description-id">Line chart showing the annual rate of inflation for the Consumer
      Prices Index including owner occupiers’ housing costs (CPIH) and its components.</p>
    <div data-highcharts-chart-container class="ons-chart__container" tabindex="0" role="region"
      aria-label="chart container" aria-describedby="chart-instructions-id">
      <div id="chart-instructions-id" class="ons-u-vh">Use the Tab key to move focus into the chart. Once inside, use
        the arrow keys to navigate between data points. As you move, tooltips will be announced to describe each point.
        Touch device users, explore by touch or with swipe gestures.</div>
      <div data-highcharts-chart class="ons-chart__chart"></div>
    </div>
    <figcaption class="ons-chart__caption">Source: Monthly Business Survey, Retails Sales Inquiry from the Office for
      National Statistics</figcaption>
  </figure>
  <h6 class="ons-chart__download-title">Download Figure 1 data</h6>
  <ol class="ons-list">
    <li class="ons-list__item">
      <a href="#" class="ons-list__link">Excel spreadsheet (XLSX format, 18KB)</a>
    </li>
    <li class="ons-list__item">
      <a href="#" class="ons-list__link">Simple text file (CSV format, 25KB)</a>
    </li>
    <li class="ons-list__item">
      <a href="#" class="ons-list__link">Image (PNG format, 25KB)</a>
    </li>
  </ol>
  <!-- Set scripts to pass the config values as json to the JavaScript -->
  <!-- prettier-ignore-start -->
  <script type="application/json" data-highcharts-config--id>
    {
      "chart": {
        "type": "line"
      },
      "legend": {
        "enabled": true
      },
      "yAxis": {
        "title": {
          "text": "Sales"
        },
        "labels": {
          "format": "{value:,.f}"
        },
        "min": -5,
        "max": 15,
        "startOnTick": true,
        "endOnTick": true
      },
      "xAxis": {
        "title": {
          "text": "Year"
        },
        "categories": ["Oct 2014", "Nov 2014", "Dec 2014", "Jan 2015", "Feb 2015", "Mar 2015", "Apr 2015", "May 2015",
          "Jun 2015", "Jul 2015", "Aug 2015", "Sep 2015", "Oct 2015", "Nov 2015", "Dec 2015", "Jan 2016", "Feb 2016",
          "Mar 2016", "Apr 2016", "May 2016", "Jun 2016", "Jul 2016", "Aug 2016", "Sep 2016", "Oct 2016", "Nov 2016",
          "Dec 2016", "Jan 2017", "Feb 2017", "Mar 2017", "Apr 2017", "May 2017", "Jun 2017", "Jul 2017", "Aug 2017",
          "Sep 2017", "Oct 2017", "Nov 2017", "Dec 2017", "Jan 2018", "Feb 2018", "Mar 2018", "Apr 2018", "May 2018",
          "Jun 2018", "Jul 2018", "Aug 2018", "Sep 2018", "Oct 2018", "Nov 2018", "Dec 2018", "Jan 2019", "Feb 2019",
          "Mar 2019", "Apr 2019", "May 2019", "Jun 2019", "Jul 2019", "Aug 2019", "Sep 2019", "Oct 2019", "Nov 2019",
          "Dec 2019", "Jan 2020", "Feb 2020", "Mar 2020", "Apr 2020", "May 2020", "Jun 2020", "Jul 2020", "Aug 2020",
          "Sep 2020", "Oct 2020", "Nov 2020", "Dec 2020", "Jan 2021", "Feb 2021", "Mar 2021", "Apr 2021", "May 2021",
          "Jun 2021", "Jul 2021", "Aug 2021", "Sep 2021", "Oct 2021", "Nov 2021", "Dec 2021", "Jan 2022", "Feb 2022",
          "Mar 2022", "Apr 2022", "May 2022", "Jun 2022", "Jul 2022", "Aug 2022", "Sep 2022", "Oct 2022", "Nov 2022",
          "Dec 2022", "Jan 2023", "Feb 2023", "Mar 2023", "Apr 2023", "May 2023", "Jun 2023", "Jul 2023", "Aug 2023",
          "Sep 2023", "Oct 2023", "Nov 2023", "Dec 2023", "Jan 2024", "Feb 2024", "Mar 2024", "Apr 2024", "May 2024",
          "Jun 2024", "Jul 2024", "Aug 2024", "Sep 2024", "Oct 2024"
        ],
        "type": "linear",
        "labels": {
          "format": "{value:,.f}"
        }
      },
      "series": [{
        "name": "CPIH",
        "data": [1.3, 1.1, 0.7, 0.5, 0.4, 0.3, 0.3, 0.4, 0.3, 0.5, 0.4, 0.2, 0.2, 0.4, 0.5, 0.6, 0.6, 0.8, 0.7, 0.7,
          0.8, 0.9, 1, 1.3, 1.3, 1.5, 1.8, 1.9, 2.3, 2.3, 2.6, 2.7, 2.6, 2.6, 2.7, 2.8, 2.8, 2.8, 2.7, 2.7, 2.5,
          2.3, 2.2, 2.3, 2.3, 2.3, 2.4, 2.2, 2.2, 2.2, 2, 1.8, 1.8, 1.8, 2, 1.9, 1.9, 2, 1.7, 1.7, 1.5, 1.5, 1.4,
          1.8, 1.7, 1.5, 0.9, 0.7, 0.8, 1.1, 0.5, 0.7, 0.9, 0.6, 0.8, 0.9, 0.7, 1, 1.6, 2.1, 2.4, 2.1, 3, 2.9,
          3.8, 4.6, 4.8, 4.9, 5.5, 6.2, 7.8, 7.9, 8.2, 8.8, 8.6, 8.8, 9.6, 9.3, 9.2, 8.8, 9.2, 8.9, 7.8, 7.9, 7.3,
          6.4, 6.3, 6.3, 4.7, 4.2, 4.2, 4.2, 3.8, 3.8, 3, 2.8, 2.8, 3.1, 3.1, 2.6, 3.2
        ],
        "marker": {
          "enabled": false
        },
        "dataLabels": {
          "enabled": false
        },
        "connectNulls": false,
        "type": "line"
      }, {
        "name": "Goods",
        "data": [0.3, -0.2, -1, -1.5, -2, -2.1, -1.9, -1.8, -2, -1.8, -2, -2.4, -2.1, -1.9, -2.1, -1.5, -1.6, -1.7,
          -1.6, -1.8, -1.7, -1.5, -1.4, -0.5, -0.4, 0.2, 0.7, 1.1, 1.9, 2.5, 2.4, 3, 2.6, 2.7, 3.1, 3.2, 3.3, 3.3,
          3.4, 3.2, 3, 2.4, 2.6, 2.5, 2.5, 2.6, 2.7, 2.5, 2.3, 2.1, 1.8, 1.2, 1.3, 1.3, 1.4, 1.5, 1.5, 1.7, 1.2,
          0.9, 0.4, 0.5, 0.6, 1.3, 1, 0.6, -0.4, -0.9, -0.5, 0, -0.2, -0.3, 0.1, -0.7, -0.2, -0.2, -0.5, 0.1, 1.6,
          2.3, 2.9, 2.5, 3.3, 3.5, 4.9, 6.5, 6.9, 7.2, 8.3, 9.4, 12.4, 12.4, 12.7, 13.6, 13, 13.2, 14.8, 14.1,
          13.4, 13.3, 13.4, 12.7, 10, 9.7, 8.5, 6.1, 6.3, 6.2, 2.9, 2, 1.9, 1.8, 1.1, 0.9, -0.8, -1.3, -1.4, -0.5,
          -0.9, -1.4, -0.3
        ],
        "marker": {
          "enabled": false
        },
        "dataLabels": {
          "enabled": false
        },
        "connectNulls": false,
        "type": "line"
      }, {
        "name": "Services",
        "data": [2.2, 2.1, 2.1, 2.1, 2.2, 2.2, 2, 2.1, 2.1, 2.2, 2.2, 2.2, 2.1, 2.2, 2.5, 2.2, 2.3, 2.6, 2.4, 2.6,
          2.7, 2.6, 2.7, 2.6, 2.5, 2.4, 2.5, 2.5, 2.6, 2.2, 2.8, 2.6, 2.5, 2.4, 2.5, 2.5, 2.4, 2.4, 2.2, 2.3, 2.1,
          2.1, 1.9, 2.1, 2, 2, 2.2, 2, 2.1, 2.2, 2.1, 2.2, 2.2, 2.2, 2.5, 2.3, 2.2, 2.2, 2, 2.2, 2.2, 2.2, 1.9,
          2.1, 2.2, 2.2, 1.9, 1.8, 1.7, 2, 1, 1.5, 1.5, 1.5, 1.6, 1.7, 1.6, 1.6, 1.7, 1.9, 2.1, 1.8, 2.7, 2.5,
          2.9, 3, 3.1, 3.1, 3.2, 3.7, 4.1, 4.3, 4.5, 4.9, 5.1, 5.3, 5.3, 5.4, 5.8, 5.2, 5.6, 5.7, 6, 6.3, 6.3,
          6.5, 6.1, 6.3, 6.2, 6, 6, 6.1, 6, 6, 6, 5.9, 6, 5.7, 5.9, 5.6, 5.6
        ],
        "marker": {
          "enabled": false
        },
        "dataLabels": {
          "enabled": false
        },
        "connectNulls": false,
        "type": "line"
      }, {
        "name": "CPIH excl energy, food, alcohol \u0026 tobacco",
        "data": [1.5, 1.3, 1.4, 1.5, 1.4, 1.2, 1.1, 1.2, 1, 1.3, 1.2, 1.2, 1.3, 1.4, 1.5, 1.4, 1.4, 1.6, 1.5, 1.5,
          1.6, 1.6, 1.5, 1.7, 1.6, 1.7, 1.8, 1.8, 2.1, 1.9, 2.4, 2.5, 2.4, 2.4, 2.6, 2.5, 2.5, 2.5, 2.3, 2.4, 2.2,
          2.1, 2, 2, 1.8, 1.8, 1.9, 1.8, 1.8, 1.8, 1.8, 1.8, 1.8, 1.8, 1.7, 1.7, 1.7, 1.9, 1.5, 1.6, 1.7, 1.7,
          1.4, 1.6, 1.7, 1.6, 1.5, 1.3, 1.5, 1.8, 1, 1.4, 1.5, 1.2, 1.5, 1.5, 1.1, 1.3, 1.5, 2, 2.3, 1.9, 2.9,
          2.7, 3.1, 3.6, 3.8, 4, 4.6, 5.1, 5.4, 5.2, 5.2, 5.5, 5.6, 5.8, 5.8, 5.7, 5.8, 5.3, 5.7, 5.7, 6.2, 6.5,
          6.4, 6.4, 5.9, 5.9, 5.6, 5.2, 5.2, 5.1, 4.8, 4.7, 4.4, 4.2, 4.2, 4.1, 4.3, 4, 4.1
        ],
        "marker": {
          "enabled": false
        },
        "dataLabels": {
          "enabled": false
        },
        "connectNulls": false,
        "type": "line"
      }]
    }
  </script>
  <!-- prettier-ignore-end -->
</div>

Line chart with custom reference line value

Use this when you need to customise the reference line value.

Open this example in a new tab(Example Line Chart With Custom Reference Line Value)

Example Line Chart With Custom Reference Line Value contents

Nunjucksfor Example Line Chart With Custom Reference Line Value
Nunjucks macro optionsfor Example Line Chart With Custom Reference Line Value
HTMLfor Example Line Chart With Custom Reference Line Value

Nunjucks

{% from "components/chart/_macro.njk" import onsChart %}

{{
    onsChart({
        "chartType": "line",
        "description": "Line chart showing the annual rate of inflation for the Consumer Prices Index including owner occupiers’ housing costs (CPIH) and its components.",
        "theme": "primary",
        "title": "Sales volumes and values saw moderate growth in July 2024",
        "subtitle": "Figure 6: Upward contribution from housing and household services (including energy) saw the annual CPIH inflation rate rise",
        "id": "id",
        "headingLevel": 4,
        "caption": "Source: Monthly Business Survey, Retails Sales Inquiry from the Office for National Statistics",
        "download": {
            'title': 'Download Figure 1 data',
            'itemsList': [
            {
                "text": "Excel spreadsheet (XLSX format, 18KB)",
                "url": "#"
            },
            {
                "text": "Simple text file (CSV format, 25KB)",
                "url": "#"
            },
            {

                "text": "Image (PNG format, 25KB)",
                "url": "#"
            }
        ]},
        "legend": true,
        "xAxis": {
            "title": "Year",
            "type": "linear",
            "labelFormat": "{value:,.f}",
            "categories": [
                'Oct 2014',
                'Nov 2014',
                'Dec 2014',
                'Jan 2015',
                'Feb 2015',
                'Mar 2015',
                'Apr 2015',
                'May 2015',
                'Jun 2015',
                'Jul 2015',
                'Aug 2015',
                'Sep 2015',
                'Oct 2015',
                'Nov 2015',
                'Dec 2015',
                'Jan 2016',
                'Feb 2016',
                'Mar 2016',
                'Apr 2016',
                'May 2016',
                'Jun 2016',
                'Jul 2016',
                'Aug 2016',
                'Sep 2016',
                'Oct 2016',
                'Nov 2016',
                'Dec 2016',
                'Jan 2017',
                'Feb 2017',
                'Mar 2017',
                'Apr 2017',
                'May 2017',
                'Jun 2017',
                'Jul 2017',
                'Aug 2017',
                'Sep 2017',
                'Oct 2017',
                'Nov 2017',
                'Dec 2017',
                'Jan 2018',
                'Feb 2018',
                'Mar 2018',
                'Apr 2018',
                'May 2018',
                'Jun 2018',
                'Jul 2018',
                'Aug 2018',
                'Sep 2018',
                'Oct 2018',
                'Nov 2018',
                'Dec 2018',
                'Jan 2019',
                'Feb 2019',
                'Mar 2019',
                'Apr 2019',
                'May 2019',
                'Jun 2019',
                'Jul 2019',
                'Aug 2019',
                'Sep 2019',
                'Oct 2019',
                'Nov 2019',
                'Dec 2019',
                'Jan 2020',
                'Feb 2020',
                'Mar 2020',
                'Apr 2020',
                'May 2020',
                'Jun 2020',
                'Jul 2020',
                'Aug 2020',
                'Sep 2020',
                'Oct 2020',
                'Nov 2020',
                'Dec 2020',
                'Jan 2021',
                'Feb 2021',
                'Mar 2021',
                'Apr 2021',
                'May 2021',
                'Jun 2021',
                'Jul 2021',
                'Aug 2021',
                'Sep 2021',
                'Oct 2021',
                'Nov 2021',
                'Dec 2021',
                'Jan 2022',
                'Feb 2022',
                'Mar 2022',
                'Apr 2022',
                'May 2022',
                'Jun 2022',
                'Jul 2022',
                'Aug 2022',
                'Sep 2022',
                'Oct 2022',
                'Nov 2022',
                'Dec 2022',
                'Jan 2023',
                'Feb 2023',
                'Mar 2023',
                'Apr 2023',
                'May 2023',
                'Jun 2023',
                'Jul 2023',
                'Aug 2023',
                'Sep 2023',
                'Oct 2023',
                'Nov 2023',
                'Dec 2023',
                'Jan 2024',
                'Feb 2024',
                'Mar 2024',
                'Apr 2024',
                'May 2024',
                'Jun 2024',
                'Jul 2024',
                'Aug 2024',
                'Sep 2024',
                'Oct 2024'
            ],
            "tickIntervalDesktop": 15,
            "tickIntervalMobile": 30
        },
        "yAxis": {
            "title": "Sales",
            "labelFormat": "{value:,.f}",
            "customReferenceLineValue": 5
        },
        "series": [
            {
                "name": 'CPIH',
                "data": [
                    1.3, 1.1, 0.7, 0.5, 0.4, 0.3, 0.3, 0.4, 0.3, 0.5, 0.4, 0.2, 0.2, 0.4, 0.5, 0.6,
                    0.6, 0.8, 0.7, 0.7, 0.8, 0.9, 1.0, 1.3, 1.3, 1.5, 1.8, 1.9, 2.3, 2.3, 2.6, 2.7,
                    2.6, 2.6, 2.7, 2.8, 2.8, 2.8, 2.7, 2.7, 2.5, 2.3, 2.2, 2.3, 2.3, 2.3, 2.4, 2.2,
                    2.2, 2.2, 2.0, 1.8, 1.8, 1.8, 2.0, 1.9, 1.9, 2.0, 1.7, 1.7, 1.5, 1.5, 1.4, 1.8,
                    1.7, 1.5, 0.9, 0.7, 0.8, 1.1, 0.5, 0.7, 0.9, 0.6, 0.8, 0.9, 0.7, 1.0, 1.6, 2.1,
                    2.4, 2.1, 3.0, 2.9, 3.8, 4.6, 4.8, 4.9, 5.5, 6.2, 7.8, 7.9, 8.2, 8.8, 8.6, 8.8,
                    9.6, 9.3, 9.2, 8.8, 9.2, 8.9, 7.8, 7.9, 7.3, 6.4, 6.3, 6.3, 4.7, 4.2, 4.2, 4.2,
                    3.8, 3.8, 3.0, 2.8, 2.8, 3.1, 3.1, 2.6, 3.2
                ]
            },
            {
                "name": 'Goods',
                "data": [
                    0.3, -0.2, -1.0, -1.5, -2.0, -2.1, -1.9, -1.8, -2.0, -1.8, -2.0, -2.4, -2.1,
                    -1.9, -2.1, -1.5, -1.6, -1.7, -1.6, -1.8, -1.7, -1.5, -1.4, -0.5, -0.4, 0.2,
                    0.7, 1.1, 1.9, 2.5, 2.4, 3.0, 2.6, 2.7, 3.1, 3.2, 3.3, 3.3, 3.4, 3.2, 3.0, 2.4,
                    2.6, 2.5, 2.5, 2.6, 2.7, 2.5, 2.3, 2.1, 1.8, 1.2, 1.3, 1.3, 1.4, 1.5, 1.5, 1.7,
                    1.2, 0.9, 0.4, 0.5, 0.6, 1.3, 1.0, 0.6, -0.4, -0.9, -0.5, 0.0, -0.2, -0.3, 0.1,
                    -0.7, -0.2, -0.2, -0.5, 0.1, 1.6, 2.3, 2.9, 2.5, 3.3, 3.5, 4.9, 6.5, 6.9, 7.2,
                    8.3, 9.4, 12.4, 12.4, 12.7, 13.6, 13.0, 13.2, 14.8, 14.1, 13.4, 13.3, 13.4,
                    12.7, 10.0, 9.7, 8.5, 6.1, 6.3, 6.2, 2.9, 2.0, 1.9, 1.8, 1.1, 0.9, -0.8, -1.3,
                    -1.4, -0.5, -0.9, -1.4, -0.3
                ]
            },
            {
                "name": 'Services',
                "data": [
                    2.2, 2.1, 2.1, 2.1, 2.2, 2.2, 2.0, 2.1, 2.1, 2.2, 2.2, 2.2, 2.1, 2.2, 2.5, 2.2,
                    2.3, 2.6, 2.4, 2.6, 2.7, 2.6, 2.7, 2.6, 2.5, 2.4, 2.5, 2.5, 2.6, 2.2, 2.8, 2.6,
                    2.5, 2.4, 2.5, 2.5, 2.4, 2.4, 2.2, 2.3, 2.1, 2.1, 1.9, 2.1, 2.0, 2.0, 2.2, 2.0,
                    2.1, 2.2, 2.1, 2.2, 2.2, 2.2, 2.5, 2.3, 2.2, 2.2, 2.0, 2.2, 2.2, 2.2, 1.9, 2.1,
                    2.2, 2.2, 1.9, 1.8, 1.7, 2.0, 1.0, 1.5, 1.5, 1.5, 1.6, 1.7, 1.6, 1.6, 1.7, 1.9,
                    2.1, 1.8, 2.7, 2.5, 2.9, 3.0, 3.1, 3.1, 3.2, 3.7, 4.1, 4.3, 4.5, 4.9, 5.1, 5.3,
                    5.3, 5.4, 5.8, 5.2, 5.6, 5.7, 6.0, 6.3, 6.3, 6.5, 6.1, 6.3, 6.2, 6.0, 6.0, 6.1,
                    6.0, 6.0, 6.0, 5.9, 6.0, 5.7, 5.9, 5.6, 5.6
                ]
            },
            {
                "name": 'CPIH excl energy, food, alcohol & tobacco',
                "data": [
                    1.5, 1.3, 1.4, 1.5, 1.4, 1.2, 1.1, 1.2, 1.0, 1.3, 1.2, 1.2, 1.3, 1.4, 1.5, 1.4,
                    1.4, 1.6, 1.5, 1.5, 1.6, 1.6, 1.5, 1.7, 1.6, 1.7, 1.8, 1.8, 2.1, 1.9, 2.4, 2.5,
                    2.4, 2.4, 2.6, 2.5, 2.5, 2.5, 2.3, 2.4, 2.2, 2.1, 2.0, 2.0, 1.8, 1.8, 1.9, 1.8,
                    1.8, 1.8, 1.8, 1.8, 1.8, 1.8, 1.7, 1.7, 1.7, 1.9, 1.5, 1.6, 1.7, 1.7, 1.4, 1.6,
                    1.7, 1.6, 1.5, 1.3, 1.5, 1.8, 1.0, 1.4, 1.5, 1.2, 1.5, 1.5, 1.1, 1.3, 1.5, 2.0,
                    2.3, 1.9, 2.9, 2.7, 3.1, 3.6, 3.8, 4.0, 4.6, 5.1, 5.4, 5.2, 5.2, 5.5, 5.6, 5.8,
                    5.8, 5.7, 5.8, 5.3, 5.7, 5.7, 6.2, 6.5, 6.4, 6.4, 5.9, 5.9, 5.6, 5.2, 5.2, 5.1,
                    4.8, 4.7, 4.4, 4.2, 4.2, 4.1, 4.3, 4.0, 4.1
                ]
            }
        ],
        "percentageHeightDesktop": 35,
        "percentageHeightMobile": 90
    })
}}

Nunjucks macro options

Name	Type	Required	Description
chartType	string	true if iframe not set	The type of chart to render. Supported types include: 'line', 'bar', 'column', 'scatter', 'columnrange', 'boxplot' and 'area'. Will be ignored if an iframe url is set.
unsupportedChartText	string	false	Optional text override to display after the chart type when it's not supported. Defaults to "chart type - chart type is not supported"
instructions	string	false	Instructions for keyboard users on how to interact with the chart. This text will be read aloud by screen readers to guide navigation and interaction.
theme	string	false	The theme to apply to the chart. Either `primary` or `alternate`. Defaults to `primary`. Will be ignored if an iframe url is set.
headingLevel	number	false	Number used to determine the heading level of the title. Use to ensure the title has a correct semantic order on the page. Accepts a value between 1 and 4, defaulting to 2 if not provided.
title	string	true	The main title of the chart.
subtitle	string	false	A subtitle that appears under the main title.
id	string	true	A unique identifier for the chart instance or iframe.
caption	string	false	A caption providing additional context for the chart.
description	string	true	A textual description of the chart for screen readers.
download	object	false	Object for (download)[#download] options.
legend	boolean	false	Whether the legend is displayed. Defaults to `true`. Note that legends are automatically hidden for single series charts. Will be ignored if an iframe url is set.
yAxis	object	true if iframe not set	Defines the vertical axis y-axis configuration parameters. Will be ignored if an iframe url is set.
xAxis	object	true if iframe not set	Defines the horizontal axis x-axis configuration parameters. Will be ignored if an iframe url is set.
series	array	true if iframe not set	The data series to be plotted, including labels and values. Will be ignored if an iframe url is set. Note: The number of series is limited by the selected theme - up to 6 series for the primary theme and 5 series for the alternate theme. Any additional series beyond these limits will be ignored and not displayed.
useStackedLayout	boolean	false	Determines whether the chart should use a stacked layout. It is useful only for bar and column charts. Will be ignored if an iframe url is set.
percentageHeightDesktop	integer	false	Sets the percentage plot height at desktop, relative to the width. If undefined the chart will fall back to the default height of 400px at desktop. Does not apply to bar charts. Will be ignored if an iframe url is set.
percentageHeightMobile	integer	false	Sets the percentage plot height at mobile, relative to the width. If undefined the chart will fall back to the default height of 400px at mobile. Does not apply to bar charts. Will be ignored if an iframe url is set.

annotations	array	false	An array of point annotations. Will be ignored if an iframe url is set.
rangeAnnotations	array	false	An array of range annotations. Will be ignored if an iframe url is set.
referenceLineAnnotations	array	false	An array of reference line annotations. Will be ignored if an iframe url is set.
estimateLineLabel	string	false	Label for the estimate line in the legend. Used in column charts with confidence intervals. Will be ignored if an iframe url is set.
uncertaintyRangeLabel	string	false	Label for the confidence interval in the legend. Used in column charts showing uncertainty ranges. Will be ignored if an iframe url is set.
iframeUrl	string	false	A url for a visualisation to display in an iframe instead of displaying a Highcharts chart.
footnotes	`Object<Footnotes>`	false	Footnotes to appear below the chart in a 'details' element
fallbackImageUrl	string	false	A url for a fallback image to display instead of the chart or iframe visualisation if JavaScript is disabled. If a fallback image is passed with an iframeUrl parameter, the iframe will be hidden for non-JavaScript users. If it is not passed, it is assumed the iframe content will provide a fallback image to be displayed inside the iframe.
fallbackImageAlt	string	false	Alt text for the fallback image - a short description only, as the description field describes the chart for screen readers. Defaults to "Fallback image for the chart as JavaScript is disabled"
iframeAspectRatio	string	false	Sets the aspect ratio for iframe charts. Only applicable when using an iframe chart. Acceptable values are 16-9, 4-3, 21-9, 1-1, 3-2, and 9-16. The value must be provided in the x-y format (e.g. 16-9). If an unsupported value is provided or a value is not provided, the aspect ratio will default to 16-9.

Download
Property	Type	Required	Description
title	string	false	The title displayed above the download options.
itemsList	array	false	An array of items available for download, each described by a (DownloadItem)[#DownloadItem].

DownloadItem
Property	Type	Required	Description
text	string	true	The label or description of the downloadable item.
url	string	true	The URL to the downloadable resource.

Y_Axis
Name	Type	Required	Description
title	string	true	The title text displayed on the y-axis. Note that for any chart type apart from bar charts, a maximum character limit of 50 characters is recommended to avoid the axis title being cut off at mobile.
labelFormat	string	false	A format string for the axis label. Examples of string formats can be found in these docs (opens in a new tab) .
tickIntervalMobile	number	false	The interval of the tick marks in axis units at mobile. Useful when you want to space out the labels (e.g. show every 2nd or 5th label).
tickIntervalDesktop	number	false	The interval of the tick marks in axis units at desktop. Useful when you want to space out the labels (e.g. show every 2nd or 5th label).
customReferenceLineValue	float or int	false	A custom value to display a darker reference line. If not supplied, the darker will appear at zero. The custom value is only used for column charts and line charts - for other chart types it will be ignored, and the darker line will appear at zero.
min	number	false	Sets the minimum value for the Y-axis. Relevant for Line, bar, area, column chart, column-range, boxplot and scatter charts.
max	number	false	Sets the maximum value for the Y-axis. Relevant for Line, bar, area, column chart, column-range, boxplot and scatter charts.
startOnTick	boolean	false	Align the axis to start on a tick. Relevant for Line, bar, area, column chart, column-range, boxplot and scatter charts.
endOnTick	boolean	false	Align the axis to end on a tick. Relevant for Line, bar, area, column chart, column-range, boxplot and scatter charts.

X_Axis
Name	Type	Required	Description
title	string	false	The title text displayed on the x-axis. Note: x-axis titles are not supported for bar chart types.
labelFormat	string	false	A format string for the x-axis label. Examples of string formats can be found in these docs (opens in a new tab) .
categories	array	false	Labels for each tick mark along the x-axis.
type	string	false	The type of axis. Can be one of `linear`, `logarithmic`, `datetime` or `category`. Defaults to linear.
tickIntervalMobile	number	false	The interval of the tick marks in axis units at mobile. Useful when you want to space out the labels (e.g. show every 2nd or 5th label).
tickIntervalDesktop	number	false	The interval of the tick marks in axis units at desktop. Useful when you want to space out the labels (e.g. show every 2nd or 5th label).
min	number	false	Sets the minimum value for the X-axis. Relevant only for scatter charts.
max	number	false	Sets the maximum value for the X-axis. Relevant only for scatter charts.
startOnTick	boolean	false	Align the axis to start on a tick. Relevant only for scatter charts.
endOnTick	boolean	false	Align the axis to end on a tick. Relevant only for scatter charts.

Series
Name	Type	Required	Description
name	string	true	The name of the series.
data	array	true	The data values for the series. Each value corresponds to a category on the x-axis.
dataLabels	boolean	false	Options for whether the DataLabel is displayed. Defaults to `false`. This option is only available for bar chart and clustered bar charts with two or fewer series, and 20 or fewer data points in any series.
marker	boolean	false	Options for whether the Marker is displayed on the data points. Defaults to `false`. This option is only available for line charts.
type	string	false	Specifies the configuration type to apply to the series. Supported types include 'line' and 'scatter'. By default, it aligns with the chart type. This is used when combining multiple chart types within a single chart. Note: Only the following chart type combinations are supported: "column with line" and "columnrange with scatter". For column with line, only one line series is supported. Additional line series will be ignored.
connectNulls	boolean	false	Whether to connect lines that have a data point missing. Only relevant for line charts.

Point annotations
Name	Type	Required	Description
text	string	true	The annotation text.
point	object	false	The x and y coordinates for the annotation
labelOffsetX (px)	int	true	The x offset in px of the label from the annotation point
labelOffsetY (px)	int	true	The y offset in px of the label from the annotation point

Point
Name	Type	Required	Description
xValue	float or int	true	The x axis value of the annotation. For category axes this is the zero based index of the x axis categories array. It must be an integer in this scenario.
yValue	float	true	The y axis value of the annotation

Range annotations
Name	Type	Required	Description
text	string	true	The annotation text.
range	Object	true	The xValue or yValue coordinates for the annotation
axis	string	true	The axis the range annotation should be applied to. Should be one of 'x' or 'y'. Note that for bar charts 'x' will be the vertical axis, and 'y' will be the horizontal axis.
labelInside	boolean	true	Whether the label for the range sits inside or outside the shaded area
labelOffsetX (px)	int	false	The horizontal offset in px of the label from it's default position. Ignored if labelInside is true.
labelOffsetY (px)	int	false	The vertical offset in px of the label from it's default position. Ignored if labelInside is true.
labelWidth (px)	int	false	The width of the label in pixels - the label text will wrap if it is wider than this value. If undefined, the label will be set to 150px wide.

Range
Name	Type	Required	Description
axisValue1	float or int	true	The starting point on the axis for the annotation. For category axes this is the zero based index of the categories array. It must be an integer in this scenario.
axisValue2	float or int	true	The ending pont on the axis for the annotation. For category axes this is the zero based index of the axis categories array. It must be an integer in this scenario.

Reference line annotations
Name	Type	Required	Description
text	string	true	The annotation text.
value	float or int	true	The x axis or y axis value for the annotation. For category axes this is the zero based index of the categories array. It must be an integer in this scenario.
axis	string	true	The axis the range annotation should be applied to. Should be one of 'x' or 'y'. Note that for bar charts 'x' will be the vertical axis, and 'y' will be the horizontal axis.
labelWidth (px)	int	false	The width of the label in pixels - the label text will wrap if it is wider than this value. If undefined, the label will be set to 150px wide.
labelOffsetX (px)	int	false	The horizontal offset in px of the label from it's default position.
labelOffsetY (px)	int	false	The vertical offset in px of the label from it's default position.

Footnotes
Name	Type	Required	Description
title	string	true	The title text for the footnotes heading
content	string	true	HTML content for the footnotes

HTML

<div data-highcharts-base-chart data-highcharts-type="line" data-highcharts-theme="primary"
  data-highcharts-title="Sales volumes and values saw moderate growth in July 2024" data-highcharts-id="id"
  data-highcharts-percentage-height-desktop="35" data-highcharts-percentage-height-mobile="90"
  data-highcharts-x-axis-tick-interval-mobile="30" data-highcharts-x-axis-tick-interval-desktop="15"
  data-highcharts-custom-reference-line-value="5">
  <figure class="ons-chart" aria-describedby="chart-audio-description-id">
    <h4 class="ons-chart__title">Sales volumes and values saw moderate growth in July 2024</h4>
    <h5 class="ons-chart__subtitle">Figure 6: Upward contribution from housing and household services (including energy)
      saw the annual CPIH inflation rate rise</h5>
    <p class="ons-u-vh" id="chart-audio-description-id">Line chart showing the annual rate of inflation for the Consumer
      Prices Index including owner occupiers’ housing costs (CPIH) and its components.</p>
    <div data-highcharts-chart-container class="ons-chart__container" tabindex="0" role="region"
      aria-label="chart container" aria-describedby="chart-instructions-id">
      <div id="chart-instructions-id" class="ons-u-vh">Use the Tab key to move focus into the chart. Once inside, use
        the arrow keys to navigate between data points. As you move, tooltips will be announced to describe each point.
        Touch device users, explore by touch or with swipe gestures.</div>
      <div data-highcharts-chart class="ons-chart__chart"></div>
    </div>
    <figcaption class="ons-chart__caption">Source: Monthly Business Survey, Retails Sales Inquiry from the Office for
      National Statistics</figcaption>
  </figure>
  <h6 class="ons-chart__download-title">Download Figure 1 data</h6>
  <ol class="ons-list">
    <li class="ons-list__item">
      <a href="#" class="ons-list__link">Excel spreadsheet (XLSX format, 18KB)</a>
    </li>
    <li class="ons-list__item">
      <a href="#" class="ons-list__link">Simple text file (CSV format, 25KB)</a>
    </li>
    <li class="ons-list__item">
      <a href="#" class="ons-list__link">Image (PNG format, 25KB)</a>
    </li>
  </ol>
  <!-- Set scripts to pass the config values as json to the JavaScript -->
  <!-- prettier-ignore-start -->
  <script type="application/json" data-highcharts-config--id>
    {
      "chart": {
        "type": "line"
      },
      "legend": {
        "enabled": true
      },
      "yAxis": {
        "title": {
          "text": "Sales"
        },
        "labels": {
          "format": "{value:,.f}"
        }
      },
      "xAxis": {
        "title": {
          "text": "Year"
        },
        "categories": ["Oct 2014", "Nov 2014", "Dec 2014", "Jan 2015", "Feb 2015", "Mar 2015", "Apr 2015", "May 2015",
          "Jun 2015", "Jul 2015", "Aug 2015", "Sep 2015", "Oct 2015", "Nov 2015", "Dec 2015", "Jan 2016", "Feb 2016",
          "Mar 2016", "Apr 2016", "May 2016", "Jun 2016", "Jul 2016", "Aug 2016", "Sep 2016", "Oct 2016", "Nov 2016",
          "Dec 2016", "Jan 2017", "Feb 2017", "Mar 2017", "Apr 2017", "May 2017", "Jun 2017", "Jul 2017", "Aug 2017",
          "Sep 2017", "Oct 2017", "Nov 2017", "Dec 2017", "Jan 2018", "Feb 2018", "Mar 2018", "Apr 2018", "May 2018",
          "Jun 2018", "Jul 2018", "Aug 2018", "Sep 2018", "Oct 2018", "Nov 2018", "Dec 2018", "Jan 2019", "Feb 2019",
          "Mar 2019", "Apr 2019", "May 2019", "Jun 2019", "Jul 2019", "Aug 2019", "Sep 2019", "Oct 2019", "Nov 2019",
          "Dec 2019", "Jan 2020", "Feb 2020", "Mar 2020", "Apr 2020", "May 2020", "Jun 2020", "Jul 2020", "Aug 2020",
          "Sep 2020", "Oct 2020", "Nov 2020", "Dec 2020", "Jan 2021", "Feb 2021", "Mar 2021", "Apr 2021", "May 2021",
          "Jun 2021", "Jul 2021", "Aug 2021", "Sep 2021", "Oct 2021", "Nov 2021", "Dec 2021", "Jan 2022", "Feb 2022",
          "Mar 2022", "Apr 2022", "May 2022", "Jun 2022", "Jul 2022", "Aug 2022", "Sep 2022", "Oct 2022", "Nov 2022",
          "Dec 2022", "Jan 2023", "Feb 2023", "Mar 2023", "Apr 2023", "May 2023", "Jun 2023", "Jul 2023", "Aug 2023",
          "Sep 2023", "Oct 2023", "Nov 2023", "Dec 2023", "Jan 2024", "Feb 2024", "Mar 2024", "Apr 2024", "May 2024",
          "Jun 2024", "Jul 2024", "Aug 2024", "Sep 2024", "Oct 2024"
        ],
        "type": "linear",
        "labels": {
          "format": "{value:,.f}"
        }
      },
      "series": [{
        "name": "CPIH",
        "data": [1.3, 1.1, 0.7, 0.5, 0.4, 0.3, 0.3, 0.4, 0.3, 0.5, 0.4, 0.2, 0.2, 0.4, 0.5, 0.6, 0.6, 0.8, 0.7, 0.7,
          0.8, 0.9, 1, 1.3, 1.3, 1.5, 1.8, 1.9, 2.3, 2.3, 2.6, 2.7, 2.6, 2.6, 2.7, 2.8, 2.8, 2.8, 2.7, 2.7, 2.5,
          2.3, 2.2, 2.3, 2.3, 2.3, 2.4, 2.2, 2.2, 2.2, 2, 1.8, 1.8, 1.8, 2, 1.9, 1.9, 2, 1.7, 1.7, 1.5, 1.5, 1.4,
          1.8, 1.7, 1.5, 0.9, 0.7, 0.8, 1.1, 0.5, 0.7, 0.9, 0.6, 0.8, 0.9, 0.7, 1, 1.6, 2.1, 2.4, 2.1, 3, 2.9,
          3.8, 4.6, 4.8, 4.9, 5.5, 6.2, 7.8, 7.9, 8.2, 8.8, 8.6, 8.8, 9.6, 9.3, 9.2, 8.8, 9.2, 8.9, 7.8, 7.9, 7.3,
          6.4, 6.3, 6.3, 4.7, 4.2, 4.2, 4.2, 3.8, 3.8, 3, 2.8, 2.8, 3.1, 3.1, 2.6, 3.2
        ],
        "marker": {
          "enabled": false
        },
        "dataLabels": {
          "enabled": false
        },
        "connectNulls": false,
        "type": "line"
      }, {
        "name": "Goods",
        "data": [0.3, -0.2, -1, -1.5, -2, -2.1, -1.9, -1.8, -2, -1.8, -2, -2.4, -2.1, -1.9, -2.1, -1.5, -1.6, -1.7,
          -1.6, -1.8, -1.7, -1.5, -1.4, -0.5, -0.4, 0.2, 0.7, 1.1, 1.9, 2.5, 2.4, 3, 2.6, 2.7, 3.1, 3.2, 3.3, 3.3,
          3.4, 3.2, 3, 2.4, 2.6, 2.5, 2.5, 2.6, 2.7, 2.5, 2.3, 2.1, 1.8, 1.2, 1.3, 1.3, 1.4, 1.5, 1.5, 1.7, 1.2,
          0.9, 0.4, 0.5, 0.6, 1.3, 1, 0.6, -0.4, -0.9, -0.5, 0, -0.2, -0.3, 0.1, -0.7, -0.2, -0.2, -0.5, 0.1, 1.6,
          2.3, 2.9, 2.5, 3.3, 3.5, 4.9, 6.5, 6.9, 7.2, 8.3, 9.4, 12.4, 12.4, 12.7, 13.6, 13, 13.2, 14.8, 14.1,
          13.4, 13.3, 13.4, 12.7, 10, 9.7, 8.5, 6.1, 6.3, 6.2, 2.9, 2, 1.9, 1.8, 1.1, 0.9, -0.8, -1.3, -1.4, -0.5,
          -0.9, -1.4, -0.3
        ],
        "marker": {
          "enabled": false
        },
        "dataLabels": {
          "enabled": false
        },
        "connectNulls": false,
        "type": "line"
      }, {
        "name": "Services",
        "data": [2.2, 2.1, 2.1, 2.1, 2.2, 2.2, 2, 2.1, 2.1, 2.2, 2.2, 2.2, 2.1, 2.2, 2.5, 2.2, 2.3, 2.6, 2.4, 2.6,
          2.7, 2.6, 2.7, 2.6, 2.5, 2.4, 2.5, 2.5, 2.6, 2.2, 2.8, 2.6, 2.5, 2.4, 2.5, 2.5, 2.4, 2.4, 2.2, 2.3, 2.1,
          2.1, 1.9, 2.1, 2, 2, 2.2, 2, 2.1, 2.2, 2.1, 2.2, 2.2, 2.2, 2.5, 2.3, 2.2, 2.2, 2, 2.2, 2.2, 2.2, 1.9,
          2.1, 2.2, 2.2, 1.9, 1.8, 1.7, 2, 1, 1.5, 1.5, 1.5, 1.6, 1.7, 1.6, 1.6, 1.7, 1.9, 2.1, 1.8, 2.7, 2.5,
          2.9, 3, 3.1, 3.1, 3.2, 3.7, 4.1, 4.3, 4.5, 4.9, 5.1, 5.3, 5.3, 5.4, 5.8, 5.2, 5.6, 5.7, 6, 6.3, 6.3,
          6.5, 6.1, 6.3, 6.2, 6, 6, 6.1, 6, 6, 6, 5.9, 6, 5.7, 5.9, 5.6, 5.6
        ],
        "marker": {
          "enabled": false
        },
        "dataLabels": {
          "enabled": false
        },
        "connectNulls": false,
        "type": "line"
      }, {
        "name": "CPIH excl energy, food, alcohol \u0026 tobacco",
        "data": [1.5, 1.3, 1.4, 1.5, 1.4, 1.2, 1.1, 1.2, 1, 1.3, 1.2, 1.2, 1.3, 1.4, 1.5, 1.4, 1.4, 1.6, 1.5, 1.5,
          1.6, 1.6, 1.5, 1.7, 1.6, 1.7, 1.8, 1.8, 2.1, 1.9, 2.4, 2.5, 2.4, 2.4, 2.6, 2.5, 2.5, 2.5, 2.3, 2.4, 2.2,
          2.1, 2, 2, 1.8, 1.8, 1.9, 1.8, 1.8, 1.8, 1.8, 1.8, 1.8, 1.8, 1.7, 1.7, 1.7, 1.9, 1.5, 1.6, 1.7, 1.7,
          1.4, 1.6, 1.7, 1.6, 1.5, 1.3, 1.5, 1.8, 1, 1.4, 1.5, 1.2, 1.5, 1.5, 1.1, 1.3, 1.5, 2, 2.3, 1.9, 2.9,
          2.7, 3.1, 3.6, 3.8, 4, 4.6, 5.1, 5.4, 5.2, 5.2, 5.5, 5.6, 5.8, 5.8, 5.7, 5.8, 5.3, 5.7, 5.7, 6.2, 6.5,
          6.4, 6.4, 5.9, 5.9, 5.6, 5.2, 5.2, 5.1, 4.8, 4.7, 4.4, 4.2, 4.2, 4.1, 4.3, 4, 4.1
        ],
        "marker": {
          "enabled": false
        },
        "dataLabels": {
          "enabled": false
        },
        "connectNulls": false,
        "type": "line"
      }]
    }
  </script>
  <!-- prettier-ignore-end -->
</div>

Line chart with markers

Use this when you need to include markers in your line chart.

Example Line Chart With Markers contents

Nunjucksfor Example Line Chart With Markers
Nunjucks macro optionsfor Example Line Chart With Markers
HTMLfor Example Line Chart With Markers

Nunjucks

{% from "components/chart/_macro.njk" import onsChart %}

{{
    onsChart({
        "chartType": "line",
        "description": "Line chart showing the annual rate of inflation for the Consumer Prices Index including owner occupiers’ housing costs (CPIH) and its components.",
        "theme": "primary",
        "title": "Sales volumes and values saw moderate growth in July 2024",
        "subtitle": "Figure 6: Upward contribution from housing and household services (including energy) saw the annual CPIH inflation rate rise",
        "id": "id",
        "headingLevel": 4,
        "caption": "Source: Monthly Business Survey, Retails Sales Inquiry from the Office for National Statistics",
        "download": {
            'title': 'Download Figure 1 data',
            'itemsList': [
            {
                "text": "Excel spreadsheet (XLSX format, 18KB)",
                "url": "#"
            },
            {
                "text": "Simple text file (CSV format, 25KB)",
                "url": "#"
            },
            {

                "text": "Image (PNG format, 25KB)",
                "url": "#"
            }
        ]},
        "legend": true,
        "xAxis": {
            "title": "Year",
            "type": "linear",
            "labelFormat": "{value:,.f}",
            "categories": [
                'Oct 2014',
                'Nov 2014',
                'Dec 2014',
                'Jan 2015',
                'Feb 2015',
                'Mar 2015'
            ]
        },
        "yAxis": {
            "title": "Sales",
            "labelFormat": "{value:,.f}"
        },
        "series": [
            {
                "name": 'CPIH',
                "data": [
                    1.3, null, 0.7, 0.5, 0.4, 0.3, 0.3, 0.4, 0.3, 0.5
                ],
                "marker": true,
                "connectNulls": true
            },
            {
                "name": 'Goods',
                "data": [
                    0.3, -0.2, -1.0, null, -2.0, -2.1, -1.9, -1.8, -2.0, -1.8
                ],
                "marker": true,
                "connectNulls": true
            },
            {
                "name": 'Services',
                "data": [
                    2.2, 2.1, 2.1, 2.1, 2.2, 2.2, 2.0, 2.1, 2.1, 2.2
                ],
                "marker": true,
                "connectNulls": true
            },
            {
                "name": 'CPIH excl energy, food, alcohol & tobacco',
                "data": [
                    1.5, 1.3, 1.4, 1.5, 1.4, 1.2, 1.1, 1.2, 1.0, 1.3
                ],
                "marker": true,
                "connectNulls": true
            }
            ,
            {
                "name": 'Extra test series 1',
                "data": [
                    3.2, 3.7, 3.8, 3.9, 3.2, 3.3, 3.4, 3.5, 3.6, 3.7
                ],
                "marker": true,
                "connectNulls": true
            },
            {
                "name": 'Extra test series 2',
                "data": [
                    4.5, 4.3, 4.4, 4.5, 4.4, 4.2, 4.1, 4.2, 4.0, 4.3
                ],
                "marker": true,
                "connectNulls": true
            }
        ],
        "percentageHeightDesktop": 35,
        "percentageHeightMobile": 90
    })
}}

Nunjucks macro options

Name	Type	Required	Description
chartType	string	true if iframe not set	The type of chart to render. Supported types include: 'line', 'bar', 'column', 'scatter', 'columnrange', 'boxplot' and 'area'. Will be ignored if an iframe url is set.
unsupportedChartText	string	false	Optional text override to display after the chart type when it's not supported. Defaults to "chart type - chart type is not supported"
instructions	string	false	Instructions for keyboard users on how to interact with the chart. This text will be read aloud by screen readers to guide navigation and interaction.
theme	string	false	The theme to apply to the chart. Either `primary` or `alternate`. Defaults to `primary`. Will be ignored if an iframe url is set.
headingLevel	number	false	Number used to determine the heading level of the title. Use to ensure the title has a correct semantic order on the page. Accepts a value between 1 and 4, defaulting to 2 if not provided.
title	string	true	The main title of the chart.
subtitle	string	false	A subtitle that appears under the main title.
id	string	true	A unique identifier for the chart instance or iframe.
caption	string	false	A caption providing additional context for the chart.
description	string	true	A textual description of the chart for screen readers.
download	object	false	Object for (download)[#download] options.
legend	boolean	false	Whether the legend is displayed. Defaults to `true`. Note that legends are automatically hidden for single series charts. Will be ignored if an iframe url is set.
yAxis	object	true if iframe not set	Defines the vertical axis y-axis configuration parameters. Will be ignored if an iframe url is set.
xAxis	object	true if iframe not set	Defines the horizontal axis x-axis configuration parameters. Will be ignored if an iframe url is set.
series	array	true if iframe not set	The data series to be plotted, including labels and values. Will be ignored if an iframe url is set. Note: The number of series is limited by the selected theme - up to 6 series for the primary theme and 5 series for the alternate theme. Any additional series beyond these limits will be ignored and not displayed.
useStackedLayout	boolean	false	Determines whether the chart should use a stacked layout. It is useful only for bar and column charts. Will be ignored if an iframe url is set.
percentageHeightDesktop	integer	false	Sets the percentage plot height at desktop, relative to the width. If undefined the chart will fall back to the default height of 400px at desktop. Does not apply to bar charts. Will be ignored if an iframe url is set.
percentageHeightMobile	integer	false	Sets the percentage plot height at mobile, relative to the width. If undefined the chart will fall back to the default height of 400px at mobile. Does not apply to bar charts. Will be ignored if an iframe url is set.

annotations	array	false	An array of point annotations. Will be ignored if an iframe url is set.
rangeAnnotations	array	false	An array of range annotations. Will be ignored if an iframe url is set.
referenceLineAnnotations	array	false	An array of reference line annotations. Will be ignored if an iframe url is set.
estimateLineLabel	string	false	Label for the estimate line in the legend. Used in column charts with confidence intervals. Will be ignored if an iframe url is set.
uncertaintyRangeLabel	string	false	Label for the confidence interval in the legend. Used in column charts showing uncertainty ranges. Will be ignored if an iframe url is set.
iframeUrl	string	false	A url for a visualisation to display in an iframe instead of displaying a Highcharts chart.
footnotes	`Object<Footnotes>`	false	Footnotes to appear below the chart in a 'details' element
fallbackImageUrl	string	false	A url for a fallback image to display instead of the chart or iframe visualisation if JavaScript is disabled. If a fallback image is passed with an iframeUrl parameter, the iframe will be hidden for non-JavaScript users. If it is not passed, it is assumed the iframe content will provide a fallback image to be displayed inside the iframe.
fallbackImageAlt	string	false	Alt text for the fallback image - a short description only, as the description field describes the chart for screen readers. Defaults to "Fallback image for the chart as JavaScript is disabled"
iframeAspectRatio	string	false	Sets the aspect ratio for iframe charts. Only applicable when using an iframe chart. Acceptable values are 16-9, 4-3, 21-9, 1-1, 3-2, and 9-16. The value must be provided in the x-y format (e.g. 16-9). If an unsupported value is provided or a value is not provided, the aspect ratio will default to 16-9.

Download
Property	Type	Required	Description
title	string	false	The title displayed above the download options.
itemsList	array	false	An array of items available for download, each described by a (DownloadItem)[#DownloadItem].

DownloadItem
Property	Type	Required	Description
text	string	true	The label or description of the downloadable item.
url	string	true	The URL to the downloadable resource.

Y_Axis
Name	Type	Required	Description
title	string	true	The title text displayed on the y-axis. Note that for any chart type apart from bar charts, a maximum character limit of 50 characters is recommended to avoid the axis title being cut off at mobile.
labelFormat	string	false	A format string for the axis label. Examples of string formats can be found in these docs (opens in a new tab) .
tickIntervalMobile	number	false	The interval of the tick marks in axis units at mobile. Useful when you want to space out the labels (e.g. show every 2nd or 5th label).
tickIntervalDesktop	number	false	The interval of the tick marks in axis units at desktop. Useful when you want to space out the labels (e.g. show every 2nd or 5th label).
customReferenceLineValue	float or int	false	A custom value to display a darker reference line. If not supplied, the darker will appear at zero. The custom value is only used for column charts and line charts - for other chart types it will be ignored, and the darker line will appear at zero.
min	number	false	Sets the minimum value for the Y-axis. Relevant for Line, bar, area, column chart, column-range, boxplot and scatter charts.
max	number	false	Sets the maximum value for the Y-axis. Relevant for Line, bar, area, column chart, column-range, boxplot and scatter charts.
startOnTick	boolean	false	Align the axis to start on a tick. Relevant for Line, bar, area, column chart, column-range, boxplot and scatter charts.
endOnTick	boolean	false	Align the axis to end on a tick. Relevant for Line, bar, area, column chart, column-range, boxplot and scatter charts.

X_Axis
Name	Type	Required	Description
title	string	false	The title text displayed on the x-axis. Note: x-axis titles are not supported for bar chart types.
labelFormat	string	false	A format string for the x-axis label. Examples of string formats can be found in these docs (opens in a new tab) .
categories	array	false	Labels for each tick mark along the x-axis.
type	string	false	The type of axis. Can be one of `linear`, `logarithmic`, `datetime` or `category`. Defaults to linear.
tickIntervalMobile	number	false	The interval of the tick marks in axis units at mobile. Useful when you want to space out the labels (e.g. show every 2nd or 5th label).
tickIntervalDesktop	number	false	The interval of the tick marks in axis units at desktop. Useful when you want to space out the labels (e.g. show every 2nd or 5th label).
min	number	false	Sets the minimum value for the X-axis. Relevant only for scatter charts.
max	number	false	Sets the maximum value for the X-axis. Relevant only for scatter charts.
startOnTick	boolean	false	Align the axis to start on a tick. Relevant only for scatter charts.
endOnTick	boolean	false	Align the axis to end on a tick. Relevant only for scatter charts.

Series
Name	Type	Required	Description
name	string	true	The name of the series.
data	array	true	The data values for the series. Each value corresponds to a category on the x-axis.
dataLabels	boolean	false	Options for whether the DataLabel is displayed. Defaults to `false`. This option is only available for bar chart and clustered bar charts with two or fewer series, and 20 or fewer data points in any series.
marker	boolean	false	Options for whether the Marker is displayed on the data points. Defaults to `false`. This option is only available for line charts.
type	string	false	Specifies the configuration type to apply to the series. Supported types include 'line' and 'scatter'. By default, it aligns with the chart type. This is used when combining multiple chart types within a single chart. Note: Only the following chart type combinations are supported: "column with line" and "columnrange with scatter". For column with line, only one line series is supported. Additional line series will be ignored.
connectNulls	boolean	false	Whether to connect lines that have a data point missing. Only relevant for line charts.

Point annotations
Name	Type	Required	Description
text	string	true	The annotation text.
point	object	false	The x and y coordinates for the annotation
labelOffsetX (px)	int	true	The x offset in px of the label from the annotation point
labelOffsetY (px)	int	true	The y offset in px of the label from the annotation point

Point
Name	Type	Required	Description
xValue	float or int	true	The x axis value of the annotation. For category axes this is the zero based index of the x axis categories array. It must be an integer in this scenario.
yValue	float	true	The y axis value of the annotation

Range annotations
Name	Type	Required	Description
text	string	true	The annotation text.
range	Object	true	The xValue or yValue coordinates for the annotation
axis	string	true	The axis the range annotation should be applied to. Should be one of 'x' or 'y'. Note that for bar charts 'x' will be the vertical axis, and 'y' will be the horizontal axis.
labelInside	boolean	true	Whether the label for the range sits inside or outside the shaded area
labelOffsetX (px)	int	false	The horizontal offset in px of the label from it's default position. Ignored if labelInside is true.
labelOffsetY (px)	int	false	The vertical offset in px of the label from it's default position. Ignored if labelInside is true.
labelWidth (px)	int	false	The width of the label in pixels - the label text will wrap if it is wider than this value. If undefined, the label will be set to 150px wide.

Range
Name	Type	Required	Description
axisValue1	float or int	true	The starting point on the axis for the annotation. For category axes this is the zero based index of the categories array. It must be an integer in this scenario.
axisValue2	float or int	true	The ending pont on the axis for the annotation. For category axes this is the zero based index of the axis categories array. It must be an integer in this scenario.

Reference line annotations
Name	Type	Required	Description
text	string	true	The annotation text.
value	float or int	true	The x axis or y axis value for the annotation. For category axes this is the zero based index of the categories array. It must be an integer in this scenario.
axis	string	true	The axis the range annotation should be applied to. Should be one of 'x' or 'y'. Note that for bar charts 'x' will be the vertical axis, and 'y' will be the horizontal axis.
labelWidth (px)	int	false	The width of the label in pixels - the label text will wrap if it is wider than this value. If undefined, the label will be set to 150px wide.
labelOffsetX (px)	int	false	The horizontal offset in px of the label from it's default position.
labelOffsetY (px)	int	false	The vertical offset in px of the label from it's default position.

Footnotes
Name	Type	Required	Description
title	string	true	The title text for the footnotes heading
content	string	true	HTML content for the footnotes

HTML

<div data-highcharts-base-chart data-highcharts-type="line" data-highcharts-theme="primary"
  data-highcharts-title="Sales volumes and values saw moderate growth in July 2024" data-highcharts-id="id"
  data-highcharts-percentage-height-desktop="35" data-highcharts-percentage-height-mobile="90">
  <figure class="ons-chart" aria-describedby="chart-audio-description-id">
    <h4 class="ons-chart__title">Sales volumes and values saw moderate growth in July 2024</h4>
    <h5 class="ons-chart__subtitle">Figure 6: Upward contribution from housing and household services (including energy)
      saw the annual CPIH inflation rate rise</h5>
    <p class="ons-u-vh" id="chart-audio-description-id">Line chart showing the annual rate of inflation for the Consumer
      Prices Index including owner occupiers’ housing costs (CPIH) and its components.</p>
    <div data-highcharts-chart-container class="ons-chart__container" tabindex="0" role="region"
      aria-label="chart container" aria-describedby="chart-instructions-id">
      <div id="chart-instructions-id" class="ons-u-vh">Use the Tab key to move focus into the chart. Once inside, use
        the arrow keys to navigate between data points. As you move, tooltips will be announced to describe each point.
        Touch device users, explore by touch or with swipe gestures.</div>
      <div data-highcharts-chart class="ons-chart__chart"></div>
    </div>
    <figcaption class="ons-chart__caption">Source: Monthly Business Survey, Retails Sales Inquiry from the Office for
      National Statistics</figcaption>
  </figure>
  <h6 class="ons-chart__download-title">Download Figure 1 data</h6>
  <ol class="ons-list">
    <li class="ons-list__item">
      <a href="#" class="ons-list__link">Excel spreadsheet (XLSX format, 18KB)</a>
    </li>
    <li class="ons-list__item">
      <a href="#" class="ons-list__link">Simple text file (CSV format, 25KB)</a>
    </li>
    <li class="ons-list__item">
      <a href="#" class="ons-list__link">Image (PNG format, 25KB)</a>
    </li>
  </ol>
  <!-- Set scripts to pass the config values as json to the JavaScript -->
  <!-- prettier-ignore-start -->
  <script type="application/json" data-highcharts-config--id>
    {
      "chart": {
        "type": "line"
      },
      "legend": {
        "enabled": true
      },
      "yAxis": {
        "title": {
          "text": "Sales"
        },
        "labels": {
          "format": "{value:,.f}"
        }
      },
      "xAxis": {
        "title": {
          "text": "Year"
        },
        "categories": ["Oct 2014", "Nov 2014", "Dec 2014", "Jan 2015", "Feb 2015", "Mar 2015"],
        "type": "linear",
        "labels": {
          "format": "{value:,.f}"
        }
      },
      "series": [{
        "name": "CPIH",
        "data": [1.3, null, 0.7, 0.5, 0.4, 0.3, 0.3, 0.4, 0.3, 0.5],
        "marker": {
          "enabled": true
        },
        "dataLabels": {
          "enabled": false
        },
        "connectNulls": true,
        "type": "line"
      }, {
        "name": "Goods",
        "data": [0.3, -0.2, -1, null, -2, -2.1, -1.9, -1.8, -2, -1.8],
        "marker": {
          "enabled": true
        },
        "dataLabels": {
          "enabled": false
        },
        "connectNulls": true,
        "type": "line"
      }, {
        "name": "Services",
        "data": [2.2, 2.1, 2.1, 2.1, 2.2, 2.2, 2, 2.1, 2.1, 2.2],
        "marker": {
          "enabled": true
        },
        "dataLabels": {
          "enabled": false
        },
        "connectNulls": true,
        "type": "line"
      }, {
        "name": "CPIH excl energy, food, alcohol \u0026 tobacco",
        "data": [1.5, 1.3, 1.4, 1.5, 1.4, 1.2, 1.1, 1.2, 1, 1.3],
        "marker": {
          "enabled": true
        },
        "dataLabels": {
          "enabled": false
        },
        "connectNulls": true,
        "type": "line"
      }, {
        "name": "Extra test series 1",
        "data": [3.2, 3.7, 3.8, 3.9, 3.2, 3.3, 3.4, 3.5, 3.6, 3.7],
        "marker": {
          "enabled": true
        },
        "dataLabels": {
          "enabled": false
        },
        "connectNulls": true,
        "type": "line"
      }, {
        "name": "Extra test series 2",
        "data": [4.5, 4.3, 4.4, 4.5, 4.4, 4.2, 4.1, 4.2, 4, 4.3],
        "marker": {
          "enabled": true
        },
        "dataLabels": {
          "enabled": false
        },
        "connectNulls": true,
        "type": "line"
      }]
    }
  </script>
  <!-- prettier-ignore-end -->
</div>

Help improve this page

Let us know how we could improve this page, or share your user research findings. Discuss this page on GitHub (opens in a new tab)

Cookies on ons.gov.uk

Charts Line charts

Overview

Line chart

Example Line Chart contents

Nunjucks

Nunjucks macro options

HTML

Annotations

Line chart with annotations

Example Line Chart With Annotations contents

Nunjucks

Nunjucks macro options

HTML

Line chart with reference line annotations

Example Line Chart With Reference Line Annotations contents

Nunjucks

Nunjucks macro options

HTML

Line chart with range annotations inside

Example Line Chart With Range Annotations Inside contents

Nunjucks

Nunjucks macro options

HTML

Line chart with range annotations outside left right

Example Line Chart With Range Annotations Outside Left Right contents

Nunjucks

Nunjucks macro options

HTML

Line chart with range annotations outside top bottom

Example Line Chart With Range Annotations Outside Top Bottom contents

Nunjucks

Nunjucks macro options

HTML

Options

Line chart with axis min and max values

Example Line Chart With Axis Min And Max Values contents

Nunjucks

Nunjucks macro options

HTML

Line chart with custom reference line value

Example Line Chart With Custom Reference Line Value contents

Nunjucks

Nunjucks macro options

HTML

Line chart with markers

Example Line Chart With Markers contents

Nunjucks

Nunjucks macro options

HTML

Help improve this page