Charts Bar charts

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

{{
    onsChart({
        "chartType": "bar",
        "description": "Volume sales, seasonally adjusted, Great Britain, January 2022 to January 2025",
        "theme": "primary",
        "title": "Food stores showed a strong rise on the month, while non-food stores fell",
        "subtitle": "Figure 6: Upward contribution from housing and household services (including energy) saw the annual CPIH inflation rate rise",
        "id": "uuid",
        "caption": "Source: Monthly Business Survey, Retail 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>"
        },
        "xAxis": {
            "categories": [
                "All retailing",
                "All retailing excluding Automotive fuel",
                "Food stores",
                "Department stores",
                "Other non-food stores",
                "Textile clothing \u0026 footwear stores",
                "Household goods stores",
                "Non-store retailing",
                "Automotive fuel"
            ],
            "type": "linear"
        },
        "yAxis": {
            "title": "Percent (%)"
        },
        "series": [
            {
                "data": [1.7, 2.1, 5.6, 0, -0.6, -2.7, -1.7, 2.4, -1.2],
                "dataLabels": true,
                "name": "Jan-25"
            }
        ]
    })
}}

<div data-highcharts-base-chart data-highcharts-type="bar" data-highcharts-theme="primary"
  data-highcharts-title="Food stores showed a strong rise on the month, while non-food stores fell"
  data-highcharts-id="uuid">
  <figure class="ons-chart" aria-describedby="chart-audio-description-uuid">
    <h2 class="ons-chart__title">Food stores showed a strong rise on the month, while non-food stores fell</h2>
    <h3 class="ons-chart__subtitle">Figure 6: Upward contribution from housing and household services (including energy)
      saw the annual CPIH inflation rate rise</h3>
    <p class="ons-u-vh" id="chart-audio-description-uuid">Volume sales, seasonally adjusted, Great Britain, January 2022
      to January 2025</p>
    <div data-highcharts-chart-container class="ons-chart__container" tabindex="0" role="region"
      aria-label="chart container" aria-describedby="chart-instructions-uuid">
      <div id="chart-instructions-uuid" 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, Retail Sales Inquiry from the Office for
      National Statistics</figcaption>
  </figure>
  <h4 class="ons-chart__download-title">Download Figure 1 data</h4>
  <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--uuid" class="ons-details ons-js-details ons-u-mt-xl">
    <div class="ons-details__heading ons-js-details-heading" role="button">
      <h4 class="ons-details__title ons-u-fs-r--b">Footnotes</h4>
      <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--uuid-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--uuid>
    {
      "chart": {
        "type": "bar"
      },
      "legend": {
        "enabled": true
      },
      "yAxis": {
        "title": {
          "text": "Percent (%)"
        },
        "labels": {}
      },
      "xAxis": {
        "title": {},
        "categories": ["All retailing", "All retailing excluding Automotive fuel", "Food stores", "Department stores",
          "Other non-food stores", "Textile clothing u0026 footwear stores", "Household goods stores",
          "Non-store retailing", "Automotive fuel"
        ],
        "type": "linear",
        "labels": {}
      },
      "series": [{
        "name": "Jan-25",
        "data": [1.7, 2.1, 5.6, 0, -0.6, -2.7, -1.7, 2.4, -1.2],
        "marker": {
          "enabled": false
        },
        "dataLabels": {
          "enabled": true
        },
        "connectNulls": false,
        "type": "bar"
      }]
    }
  </script>
  <!-- prettier-ignore-end -->
</div>

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

{{
    onsChart({
        "chartType": "columnrange",
        "description": "Volume sales, seasonally adjusted, Great Britain, January 2022 to January 2025",
        "title": "Food stores showed a strong rise on the month, while non-food stores fell",
        "subtitle": "Figure 6: Upward contribution from housing and household services (including energy) saw the annual CPIH inflation rate rise",
        "id": "uuid",
        "caption": "Source: Monthly Business Survey, Retail 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": {
            "categories": [
                'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
            ],
            "type": "linear",
            "title": "Categories"
        },
        "yAxis": {
            "title": "Temperature ( °C )"
        },
        "series": [
            {
                "data": [
                    [-9.5, 8.0],
                    [-7.8, 8.3],
                    [-13.1, 9.2],
                    [-4.4, 15.7],
                    [-1.0, 20.8],
                    [3.1, 28.4],
                    [5.9, 27.0],
                    [4.6, 23.0],
                    [4.9, 19.3],
                    [-5.2, 11.6],
                    [],
                    [-10.5, 12.0],
                    [-12.1, 18.5]
                ],
                "name": "Values"
            },
            {
                "data": [1,2,3,4,5,6,7,8,9,10,3,11,12],
                "name": "Another test data source",
                "type": "scatter"
            }
        ]
    })
}}

<div data-highcharts-base-chart data-highcharts-type="columnrange" data-highcharts-theme=""
  data-highcharts-title="Food stores showed a strong rise on the month, while non-food stores fell"
  data-highcharts-id="uuid">
  <figure class="ons-chart" aria-describedby="chart-audio-description-uuid">
    <h2 class="ons-chart__title">Food stores showed a strong rise on the month, while non-food stores fell</h2>
    <h3 class="ons-chart__subtitle">Figure 6: Upward contribution from housing and household services (including energy)
      saw the annual CPIH inflation rate rise</h3>
    <p class="ons-u-vh" id="chart-audio-description-uuid">Volume sales, seasonally adjusted, Great Britain, January 2022
      to January 2025</p>
    <div data-highcharts-chart-container class="ons-chart__container" tabindex="0" role="region"
      aria-label="chart container" aria-describedby="chart-instructions-uuid">
      <div id="chart-instructions-uuid" 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, Retail Sales Inquiry from the Office for
      National Statistics</figcaption>
  </figure>
  <h4 class="ons-chart__download-title">Download Figure 1 data</h4>
  <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--uuid>
    {
      "chart": {
        "type": "columnrange"
      },
      "legend": {
        "enabled": true
      },
      "yAxis": {
        "title": {
          "text": "Temperature ( °C )"
        },
        "labels": {}
      },
      "xAxis": {
        "title": {
          "text": "Categories"
        },
        "categories": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
        "type": "linear",
        "labels": {}
      },
      "series": [{
        "name": "Values",
        "data": [
          [-9.5, 8],
          [-7.8, 8.3],
          [-13.1, 9.2],
          [-4.4, 15.7],
          [-1, 20.8],
          [3.1, 28.4],
          [5.9, 27],
          [4.6, 23],
          [4.9, 19.3],
          [-5.2, 11.6],
          [],
          [-10.5, 12],
          [-12.1, 18.5]
        ],
        "marker": {
          "enabled": false
        },
        "dataLabels": {
          "enabled": false
        },
        "connectNulls": false,
        "type": "columnrange"
      }, {
        "name": "Another test data source",
        "data": [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 3, 11, 12],
        "marker": {
          "enabled": true
        },
        "dataLabels": {
          "enabled": false
        },
        "connectNulls": false,
        "type": "scatter"
      }]
    }
  </script>
  <!-- prettier-ignore-end -->
</div>

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

{{
    onsChart({
        "chartType": "bar",
        "description": "Volume sales, seasonally adjusted, Great Britain, January 2022 to January 2025",
        "theme": "primary",
        "title": "Food stores showed a strong rise on the month, while non-food stores fell",
        "subtitle": "Figure 6: Upward contribution from housing and household services (including energy) saw the annual CPIH inflation rate rise",
        "id": "uuid",
        "caption": "Source: Monthly Business Survey, Retail 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,
        "series": [
            {
                "data": [-6.2, 1.5, -15.9, 1.7],
                "dataLabels": false,
                "name": "2022"
            },
            {
                "data": [-2.9, -2.7, -2.9, -3.5],
                "dataLabels": false,
                "name": "2023"
            },
            {
                "data": [-1.6, 1.2, 3.2, 3.8],
                "dataLabels": false,
                "name": "2024"
            }
        ],
        "xAxis": {
            "categories": [
                "Food stores",
                "Non-food stores",
                "Non-store retailing ",
                "Automotive fuel"
            ],
            "type": "linear"
        },
        "yAxis": {
            "title": "Percent (%)"
        }
    })
}}

<div data-highcharts-base-chart data-highcharts-type="bar" data-highcharts-theme="primary"
  data-highcharts-title="Food stores showed a strong rise on the month, while non-food stores fell"
  data-highcharts-id="uuid">
  <figure class="ons-chart" aria-describedby="chart-audio-description-uuid">
    <h2 class="ons-chart__title">Food stores showed a strong rise on the month, while non-food stores fell</h2>
    <h3 class="ons-chart__subtitle">Figure 6: Upward contribution from housing and household services (including energy)
      saw the annual CPIH inflation rate rise</h3>
    <p class="ons-u-vh" id="chart-audio-description-uuid">Volume sales, seasonally adjusted, Great Britain, January 2022
      to January 2025</p>
    <div data-highcharts-chart-container class="ons-chart__container" tabindex="0" role="region"
      aria-label="chart container" aria-describedby="chart-instructions-uuid">
      <div id="chart-instructions-uuid" 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, Retail Sales Inquiry from the Office for
      National Statistics</figcaption>
  </figure>
  <h4 class="ons-chart__download-title">Download Figure 1 data</h4>
  <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--uuid>
    {
      "chart": {
        "type": "bar"
      },
      "legend": {
        "enabled": true
      },
      "yAxis": {
        "title": {
          "text": "Percent (%)"
        },
        "labels": {}
      },
      "xAxis": {
        "title": {},
        "categories": ["Food stores", "Non-food stores", "Non-store retailing ", "Automotive fuel"],
        "type": "linear",
        "labels": {}
      },
      "series": [{
        "name": "2022",
        "data": [-6.2, 1.5, -15.9, 1.7],
        "marker": {
          "enabled": false
        },
        "dataLabels": {
          "enabled": false
        },
        "connectNulls": false,
        "type": "bar"
      }, {
        "name": "2023",
        "data": [-2.9, -2.7, -2.9, -3.5],
        "marker": {
          "enabled": false
        },
        "dataLabels": {
          "enabled": false
        },
        "connectNulls": false,
        "type": "bar"
      }, {
        "name": "2024",
        "data": [-1.6, 1.2, 3.2, 3.8],
        "marker": {
          "enabled": false
        },
        "dataLabels": {
          "enabled": false
        },
        "connectNulls": false,
        "type": "bar"
      }]
    }
  </script>
  <!-- prettier-ignore-end -->
</div>

{% from "components/chart/_macro.njk" import onsChart %}
{{
    onsChart({
        "chartType": "bar",
        "description": "Volume sales, seasonally adjusted, Great Britain, January 2022 to January 2025",
        "theme": "primary",
        "title": "Food stores showed a strong rise on the month, while non-food stores fell",
        "subtitle": "Figure 6: Upward contribution from housing and household services (including energy) saw the annual CPIH inflation rate rise",
        "id": "uuid",
        "useStackedLayout": true,
        "caption": "Source: Monthly Business Survey, Retail 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,
        "series": [
            {
                "data": [5, 3, 4, 6],
                "dataLabels": false,
                "name": "2022"
            },
            {
                "data": [2, 2, 3, 7],
                "dataLabels": false,
                "name": "2023"
            },
            {
                "data": [3, 4, 4, 1],
                "dataLabels": false,
                "name": "2024"
            }
        ],
        "xAxis": {
            "categories": [
                "Food stores",
                "Non-food stores",
                "Non-store retailing ",
                "Automotive fuel"
            ],
            "type": "linear"
        },
        "yAxis": {
            "title": "Percent (%)"
        }
    })
}}

<div data-highcharts-base-chart data-highcharts-type="bar" data-highcharts-theme="primary"
  data-highcharts-title="Food stores showed a strong rise on the month, while non-food stores fell"
  data-highcharts-id="uuid" data-highcharts-use-stacked-layout="true">
  <figure class="ons-chart" aria-describedby="chart-audio-description-uuid">
    <h2 class="ons-chart__title">Food stores showed a strong rise on the month, while non-food stores fell</h2>
    <h3 class="ons-chart__subtitle">Figure 6: Upward contribution from housing and household services (including energy)
      saw the annual CPIH inflation rate rise</h3>
    <p class="ons-u-vh" id="chart-audio-description-uuid">Volume sales, seasonally adjusted, Great Britain, January 2022
      to January 2025</p>
    <div data-highcharts-chart-container class="ons-chart__container" tabindex="0" role="region"
      aria-label="chart container" aria-describedby="chart-instructions-uuid">
      <div id="chart-instructions-uuid" 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, Retail Sales Inquiry from the Office for
      National Statistics</figcaption>
  </figure>
  <h4 class="ons-chart__download-title">Download Figure 1 data</h4>
  <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--uuid>
    {
      "chart": {
        "type": "bar"
      },
      "legend": {
        "enabled": true
      },
      "yAxis": {
        "title": {
          "text": "Percent (%)"
        },
        "labels": {}
      },
      "xAxis": {
        "title": {},
        "categories": ["Food stores", "Non-food stores", "Non-store retailing ", "Automotive fuel"],
        "type": "linear",
        "labels": {}
      },
      "series": [{
        "name": "2022",
        "data": [5, 3, 4, 6],
        "marker": {
          "enabled": false
        },
        "dataLabels": {
          "enabled": false
        },
        "connectNulls": false,
        "type": "bar"
      }, {
        "name": "2023",
        "data": [2, 2, 3, 7],
        "marker": {
          "enabled": false
        },
        "dataLabels": {
          "enabled": false
        },
        "connectNulls": false,
        "type": "bar"
      }, {
        "name": "2024",
        "data": [3, 4, 4, 1],
        "marker": {
          "enabled": false
        },
        "dataLabels": {
          "enabled": false
        },
        "connectNulls": false,
        "type": "bar"
      }]
    }
  </script>
  <!-- prettier-ignore-end -->
</div>

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

{{
    onsChart({
        "chartType": "bar",
        "description": "Volume sales, seasonally adjusted, Great Britain, January 2022 to January 2025",
        "theme": "primary",
        "title": "Food stores showed a strong rise on the month, while non-food stores fell",
        "subtitle": "Figure 6: Upward contribution from housing and household services (including energy) saw the annual CPIH inflation rate rise",
        "id": "uuid",
        "caption": "Source: Monthly Business Survey, Retail 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": "#"
                }
            ]
        },
        "xAxis": {
            "categories": [
                "All retailing",
                "All retailing excluding Automotive fuel",
                "Food stores",
                "Department stores",
                "Other non-food stores",
                "Textile clothing \u0026 footwear stores",
                "Household goods stores",
                "Non-store retailing",
                "Automotive fuel"
            ],
            "type": "linear"
        },
        "yAxis": {
            "title": "Percent (%)"
        },
        "series": [
            {
                "data": [1.7, 2.1, 5.6, 0, -0.6, -2.7, -1.7, 2.4, -1.2],
                "dataLabels": true,
                "name": "Jan-25"
            }
        ],
        "annotations": [
            {
                "text": "A test point annotation",
                "point": {"x": 2, "y": 3},
                "labelOffsetX": 40,
                "labelOffsetY": -30
            }
        ]
    })
}}

<div data-highcharts-base-chart data-highcharts-type="bar" data-highcharts-theme="primary"
  data-highcharts-title="Food stores showed a strong rise on the month, while non-food stores fell"
  data-highcharts-id="uuid">
  <figure class="ons-chart" aria-describedby="chart-audio-description-uuid">
    <h2 class="ons-chart__title">Food stores showed a strong rise on the month, while non-food stores fell</h2>
    <h3 class="ons-chart__subtitle">Figure 6: Upward contribution from housing and household services (including energy)
      saw the annual CPIH inflation rate rise</h3>
    <p class="ons-u-vh" id="chart-audio-description-uuid">Volume sales, seasonally adjusted, Great Britain, January 2022
      to January 2025</p>
    <div data-highcharts-chart-container class="ons-chart__container" tabindex="0" role="region"
      aria-label="chart container" aria-describedby="chart-instructions-uuid">
      <div id="chart-instructions-uuid" 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>
    </ul>
    <figcaption class="ons-chart__caption">Source: Monthly Business Survey, Retail Sales Inquiry from the Office for
      National Statistics</figcaption>
  </figure>
  <h4 class="ons-chart__download-title">Download Figure 1 data</h4>
  <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--uuid>
    {
      "chart": {
        "type": "bar"
      },
      "legend": {
        "enabled": true
      },
      "yAxis": {
        "title": {
          "text": "Percent (%)"
        },
        "labels": {}
      },
      "xAxis": {
        "title": {},
        "categories": ["All retailing", "All retailing excluding Automotive fuel", "Food stores", "Department stores",
          "Other non-food stores", "Textile clothing u0026 footwear stores", "Household goods stores",
          "Non-store retailing", "Automotive fuel"
        ],
        "type": "linear",
        "labels": {}
      },
      "series": [{
        "name": "Jan-25",
        "data": [1.7, 2.1, 5.6, 0, -0.6, -2.7, -1.7, 2.4, -1.2],
        "marker": {
          "enabled": false
        },
        "dataLabels": {
          "enabled": true
        },
        "connectNulls": false,
        "type": "bar"
      }]
    }
  </script>
  <script type="application/json" data-highcharts-annotations--uuid>
    [{
      "text": "A test point annotation",
      "point": {
        "x": 2,
        "y": 3
      },
      "labelOffsetX": 40,
      "labelOffsetY": -30
    }]
  </script>
  <!-- prettier-ignore-end -->
</div>

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

{{
    onsChart({
        "chartType": "bar",
        "description": "Volume sales, seasonally adjusted, Great Britain, January 2022 to January 2025",
        "theme": "primary",
        "title": "Food stores showed a strong rise on the month, while non-food stores fell",
        "subtitle": "Figure 6: Upward contribution from housing and household services (including energy) saw the annual CPIH inflation rate rise",
        "id": "uuid",
        "caption": "Source: Monthly Business Survey, Retail 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": "#"
                }
            ]
        },
        "xAxis": {
            "categories": [
                "All retailing",
                "All retailing excluding Automotive fuel",
                "Food stores",
                "Department stores",
                "Other non-food stores",
                "Textile clothing \u0026 footwear stores",
                "Household goods stores",
                "Non-store retailing",
                "Automotive fuel"
            ],
            "type": "linear"
        },
        "yAxis": {
            "title": "Percent (%)"
        },
        "series": [
            {
                "data": [1.7, 2.1, 5.6, 0, -0.6, -2.7, -1.7, 2.4, -1.2],
                "dataLabels": false,
                "name": "Jan-25"
            }
        ],
        "annotations": [
            {
                "text": "A test point annotation",
                "point": {"x": 2, "y": 3},
                "labelOffsetX": 50,
                "labelOffsetY": 60
            }
        ],
        "rangeAnnotations": [
            {
                "text": "A test x axis range annotation",
                "range": {"axisValue1": 1, "axisValue2": 2},
                "axis": "x",
                "labelOffsetX": 10,
                "labelOffsetY": -60
            },
            {
                "text": "A test y axis range annotation with a width of 80px",
                "range": {"axisValue1": 5, "axisValue2": 6},
                "axis": "y",
                "labelOffsetX": -80,
                "labelOffsetY": 230,
                "labelWidth": 80
            }
        ],
        "referenceLineAnnotations": [
            {
                "text": "A test x axis reference line annotation",
                "value": 8,
                "axis": "x",
                "labelOffsetY": -30
            },
            {
                "text": "A test y axis reference line annotation",
                "value": 1.5,
                "axis": "y",
                "labelWidth": 100,
                "labelOffsetX": 10,
                "labelOffsetY": 170
            }
        ]
    })
}}

<div data-highcharts-base-chart data-highcharts-type="bar" data-highcharts-theme="primary"
  data-highcharts-title="Food stores showed a strong rise on the month, while non-food stores fell"
  data-highcharts-id="uuid">
  <figure class="ons-chart" aria-describedby="chart-audio-description-uuid">
    <h2 class="ons-chart__title">Food stores showed a strong rise on the month, while non-food stores fell</h2>
    <h3 class="ons-chart__subtitle">Figure 6: Upward contribution from housing and household services (including energy)
      saw the annual CPIH inflation rate rise</h3>
    <p class="ons-u-vh" id="chart-audio-description-uuid">Volume sales, seasonally adjusted, Great Britain, January 2022
      to January 2025</p>
    <div data-highcharts-chart-container class="ons-chart__container" tabindex="0" role="region"
      aria-label="chart container" aria-describedby="chart-instructions-uuid">
      <div id="chart-instructions-uuid" 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> A test x axis range annotation
      </li>
      <li class="ons-chart__annotations-footnotes_item">
        <span class="ons-chart__annotations-footnotes-number">3</span> A test y axis range annotation with a width of
        80px
      </li>
      <li class="ons-chart__annotations-footnotes_item">
        <span class="ons-chart__annotations-footnotes-number">4</span> A test x axis reference line annotation
      </li>
      <li class="ons-chart__annotations-footnotes_item">
        <span class="ons-chart__annotations-footnotes-number">5</span> A test y axis reference line annotation
      </li>
    </ul>
    <figcaption class="ons-chart__caption">Source: Monthly Business Survey, Retail Sales Inquiry from the Office for
      National Statistics</figcaption>
  </figure>
  <h4 class="ons-chart__download-title">Download Figure 1 data</h4>
  <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--uuid>
    {
      "chart": {
        "type": "bar"
      },
      "legend": {
        "enabled": true
      },
      "yAxis": {
        "title": {
          "text": "Percent (%)"
        },
        "labels": {}
      },
      "xAxis": {
        "title": {},
        "categories": ["All retailing", "All retailing excluding Automotive fuel", "Food stores", "Department stores",
          "Other non-food stores", "Textile clothing u0026 footwear stores", "Household goods stores",
          "Non-store retailing", "Automotive fuel"
        ],
        "type": "linear",
        "labels": {}
      },
      "series": [{
        "name": "Jan-25",
        "data": [1.7, 2.1, 5.6, 0, -0.6, -2.7, -1.7, 2.4, -1.2],
        "marker": {
          "enabled": false
        },
        "dataLabels": {
          "enabled": false
        },
        "connectNulls": false,
        "type": "bar"
      }]
    }
  </script>
  <script type="application/json" data-highcharts-annotations--uuid>
    [{
      "text": "A test point annotation",
      "point": {
        "x": 2,
        "y": 3
      },
      "labelOffsetX": 50,
      "labelOffsetY": 60
    }]
  </script>
  <script type="application/json" data-highcharts-range-annotations--uuid>
    [{
      "text": "A test x axis range annotation",
      "range": {
        "axisValue1": 1,
        "axisValue2": 2
      },
      "axis": "x",
      "labelOffsetX": 10,
      "labelOffsetY": -60
    }, {
      "text": "A test y axis range annotation with a width of 80px",
      "range": {
        "axisValue1": 5,
        "axisValue2": 6
      },
      "axis": "y",
      "labelOffsetX": -80,
      "labelOffsetY": 230,
      "labelWidth": 80
    }]
  </script>
  <script type="application/json" data-highcharts-reference-line-annotations--uuid>
    [{
      "text": "A test x axis reference line annotation",
      "value": 8,
      "axis": "x",
      "labelOffsetY": -30
    }, {
      "text": "A test y axis reference line annotation",
      "value": 1.5,
      "axis": "y",
      "labelWidth": 100,
      "labelOffsetX": 10,
      "labelOffsetY": 170
    }]
  </script>
  <!-- prettier-ignore-end -->
</div>

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

{{
    onsChart({
        "chartType": "bar",
        "description": "Volume sales, seasonally adjusted, Great Britain, January 2022 to January 2025",
        "theme": "primary",
        "title": "Food stores showed a strong rise on the month, while non-food stores fell",
        "subtitle": "Figure 6: Upward contribution from housing and household services (including energy) saw the annual CPIH inflation rate rise",
        "id": "uuid",
        "caption": "Source: Monthly Business Survey, Retail 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": "#"
                }
            ]
        },
        "xAxis": {
            "categories": [
                "All retailing",
                "All retailing excluding Automotive fuel",
                "Food stores",
                "Department stores",
                "Other non-food stores",
                "Textile clothing \u0026 footwear stores",
                "Household goods stores",
                "Non-store retailing",
                "Automotive fuel"
            ],
            "type": "linear"
        },
        "yAxis": {
            "title": "Percent (%)",
            "min": -5,
            "max": 10,
            "startOnTick": true,
            "endOnTick": false
        },
        "series": [
            {
                "data": [1.7, 2.1, 5.6, 0, -0.6, -2.7, -1.7, 2.4, -1.2],
                "dataLabels": true,
                "name": "Jan-25"
            }
        ]
    })
}}

<div data-highcharts-base-chart data-highcharts-type="bar" data-highcharts-theme="primary"
  data-highcharts-title="Food stores showed a strong rise on the month, while non-food stores fell"
  data-highcharts-id="uuid">
  <figure class="ons-chart" aria-describedby="chart-audio-description-uuid">
    <h2 class="ons-chart__title">Food stores showed a strong rise on the month, while non-food stores fell</h2>
    <h3 class="ons-chart__subtitle">Figure 6: Upward contribution from housing and household services (including energy)
      saw the annual CPIH inflation rate rise</h3>
    <p class="ons-u-vh" id="chart-audio-description-uuid">Volume sales, seasonally adjusted, Great Britain, January 2022
      to January 2025</p>
    <div data-highcharts-chart-container class="ons-chart__container" tabindex="0" role="region"
      aria-label="chart container" aria-describedby="chart-instructions-uuid">
      <div id="chart-instructions-uuid" 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, Retail Sales Inquiry from the Office for
      National Statistics</figcaption>
  </figure>
  <h4 class="ons-chart__download-title">Download Figure 1 data</h4>
  <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--uuid>
    {
      "chart": {
        "type": "bar"
      },
      "legend": {
        "enabled": true
      },
      "yAxis": {
        "title": {
          "text": "Percent (%)"
        },
        "labels": {},
        "min": -5,
        "max": 10,
        "startOnTick": true,
        "endOnTick": false
      },
      "xAxis": {
        "title": {},
        "categories": ["All retailing", "All retailing excluding Automotive fuel", "Food stores", "Department stores",
          "Other non-food stores", "Textile clothing u0026 footwear stores", "Household goods stores",
          "Non-store retailing", "Automotive fuel"
        ],
        "type": "linear",
        "labels": {}
      },
      "series": [{
        "name": "Jan-25",
        "data": [1.7, 2.1, 5.6, 0, -0.6, -2.7, -1.7, 2.4, -1.2],
        "marker": {
          "enabled": false
        },
        "dataLabels": {
          "enabled": true
        },
        "connectNulls": false,
        "type": "bar"
      }]
    }
  </script>
  <!-- prettier-ignore-end -->
</div>