Charts Area charts

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

{{
    onsChart({
        "chartType": "area",
        "description": "Area chart showing the annual rate of inflation for the Consumer Prices Index including owner occupiers’ housing costs (CPIH) and its components.",
        "theme": "alternate",
        "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",
        "series": [
        {
                "data": [
                    39.2, 47.1, 44.0, 46, 65.3, 53.2, 49.1, 49.3, 50.4, 48.1,
                    43.9, 41.8
                ],
                "name": "Test series 3"
            },
            {
                "data": [
                    28.8, 23.2, 33.0, 25.8, 20.8, 39.8, 37.9, 28.2, 37.6, 46.7,
                    43.9, 41.8
                ],
                "name": "Test series 2"
            },
            {
                "data": [
                    37.8, 41.0, 43.0, 42.9, 41.8, 39.8, 37.9, 38.2, 37.6, 36.7,
                    33.9, 31.8
                ],
                "name": "Test series 1"
            }
        ],
        "xAxis": {
            "categories": [
                "Mar 1901", "Mar 1902", "Mar 1903", "Mar 1904", "Mar 1905", "Mar 1906", "Mar 1907", "Mar 1908", "Mar 1909", "Mar 1910",
                "Mar 1911", "Mar 1912"
            ],
            "title":  "Years",
            "type": "linear"
        },
        "yAxis": {
            "title": "Y axis title"
        },
        "percentageHeightDesktop": 50,
        "percentageHeightMobile": 120,
        "fallbackImageUrl": '/img/small/area-chart-screenshot.png'
    })
}}

<div data-highcharts-base-chart data-highcharts-type="area" data-highcharts-theme="alternate"
  data-highcharts-title="Sales volumes and values saw moderate growth in July 2024" data-highcharts-id="id"
  data-highcharts-percentage-height-desktop="50" data-highcharts-percentage-height-mobile="120">
  <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">Area 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/area-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>
  <!-- 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": "area"
      },
      "legend": {
        "enabled": true
      },
      "yAxis": {
        "title": {
          "text": "Y axis title"
        },
        "labels": {}
      },
      "xAxis": {
        "title": {
          "text": "Years"
        },
        "categories": ["Mar 1901", "Mar 1902", "Mar 1903", "Mar 1904", "Mar 1905", "Mar 1906", "Mar 1907", "Mar 1908",
          "Mar 1909", "Mar 1910", "Mar 1911", "Mar 1912"
        ],
        "type": "linear",
        "labels": {}
      },
      "series": [{
        "name": "Test series 3",
        "data": [39.2, 47.1, 44, 46, 65.3, 53.2, 49.1, 49.3, 50.4, 48.1, 43.9, 41.8],
        "marker": {
          "enabled": false
        },
        "dataLabels": {
          "enabled": false
        },
        "connectNulls": false,
        "type": "area"
      }, {
        "name": "Test series 2",
        "data": [28.8, 23.2, 33, 25.8, 20.8, 39.8, 37.9, 28.2, 37.6, 46.7, 43.9, 41.8],
        "marker": {
          "enabled": false
        },
        "dataLabels": {
          "enabled": false
        },
        "connectNulls": false,
        "type": "area"
      }, {
        "name": "Test series 1",
        "data": [37.8, 41, 43, 42.9, 41.8, 39.8, 37.9, 38.2, 37.6, 36.7, 33.9, 31.8],
        "marker": {
          "enabled": false
        },
        "dataLabels": {
          "enabled": false
        },
        "connectNulls": false,
        "type": "area"
      }]
    }
  </script>
  <!-- prettier-ignore-end -->
</div>

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

{{
    onsChart({
        "chartType": "area",
        "description": "Area 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",
        "series": [
        {
                "data": [
                    39.2, 47.1, 44.0, 46, 65.3, 53.2, 49.1, 49.3, 50.4, 48.1,
                    43.9, 41.8
                ],
                "name": "Test series 3"
            },
            {
                "data": [
                    28.8, 23.2, 33.0, 25.8, 20.8, 39.8, 37.9, 28.2, 37.6, 46.7,
                    43.9, 41.8
                ],
                "name": "Test series 2"
            },
            {
                "data": [
                    37.8, 41.0, 43.0, 42.9, 41.8, 39.8, 37.9, 38.2, 37.6, 36.7,
                    33.9, 31.8
                ],
                "name": "Test series 1"
            }
        ],
        "xAxis": {
            "categories": [
                "Mar 1901", "Mar 1902", "Mar 1903", "Mar 1904", "Mar 1905", "Mar 1906", "Mar 1907", "Mar 1908", "Mar 1909", "Mar 1910",
                "Mar 1911", "Mar 1912"
            ],
            "title":  "Years",
            "type": "linear"
        },
        "yAxis": {
            "title": "Y axis title",
            "min": -25,
            "max": 150,
            "startOnTick": true,
            "endOnTick": false
        },
        "percentageHeightDesktop": 50,
        "percentageHeightMobile": 120
    })
}}

<div data-highcharts-base-chart data-highcharts-type="area" 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="50" data-highcharts-percentage-height-mobile="120">
  <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">Area 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": "area"
      },
      "legend": {
        "enabled": true
      },
      "yAxis": {
        "title": {
          "text": "Y axis title"
        },
        "labels": {},
        "min": -25,
        "max": 150,
        "startOnTick": true,
        "endOnTick": false
      },
      "xAxis": {
        "title": {
          "text": "Years"
        },
        "categories": ["Mar 1901", "Mar 1902", "Mar 1903", "Mar 1904", "Mar 1905", "Mar 1906", "Mar 1907", "Mar 1908",
          "Mar 1909", "Mar 1910", "Mar 1911", "Mar 1912"
        ],
        "type": "linear",
        "labels": {}
      },
      "series": [{
        "name": "Test series 3",
        "data": [39.2, 47.1, 44, 46, 65.3, 53.2, 49.1, 49.3, 50.4, 48.1, 43.9, 41.8],
        "marker": {
          "enabled": false
        },
        "dataLabels": {
          "enabled": false
        },
        "connectNulls": false,
        "type": "area"
      }, {
        "name": "Test series 2",
        "data": [28.8, 23.2, 33, 25.8, 20.8, 39.8, 37.9, 28.2, 37.6, 46.7, 43.9, 41.8],
        "marker": {
          "enabled": false
        },
        "dataLabels": {
          "enabled": false
        },
        "connectNulls": false,
        "type": "area"
      }, {
        "name": "Test series 1",
        "data": [37.8, 41, 43, 42.9, 41.8, 39.8, 37.9, 38.2, 37.6, 36.7, 33.9, 31.8],
        "marker": {
          "enabled": false
        },
        "dataLabels": {
          "enabled": false
        },
        "connectNulls": false,
        "type": "area"
      }]
    }
  </script>
  <!-- prettier-ignore-end -->
</div>