JSFiddle - React, Tailwind, and code Playground

by oysteinmoseng

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>EU Inflation Rate Chart</title>
  <!-- Include the Highcharts library -->
  <script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>

<div id="container" style="width: 600px; height: 400px;"></div>

<script>
document.addEventListener('DOMContentLoaded', function () {
  Highcharts.chart('container', {
    chart: {
      type: 'line'
    },
    title: {
      text: 'EU Inflation Rate by Year'
    },
    subtitle: {
      text: 'Dotted line indicates the onset of COVID-19 (2020)'
    },
    xAxis: {
      categories: ['2016', '2017', '2018', '2019', '2020', '2021', '2022', '2023'],
      // plotLines draws a line across the plot area at a specific value.
      // value corresponds to the X-axis index if categories are used.
      plotLines: [{
        color: '#FF0000',     // Line color
        width: 2,             // Line width
        value: 4,             // Index of "2020" in categories array
        dashStyle: 'ShortDot', // Make it a dotted line
        label: {
          text: 'COVID-19',
          verticalAlign: 'top',
          textAlign: 'right',
          rotation: 0,
          y: 15
        }
      }]
    },
    yAxis: {
      title: {
        text: 'Inflation Rate (%)'
      }
    },
    tooltip: {
      valueSuffix: '%'
    },
    series: [{
      name: 'Inflation',
      // Example EU inflation data; replace with your actual values
      data: [0.2, 1.7, 1.7, 1.1, 0.7, 2.6, 7.0, 6.3]
    }]
  });
});
</script>

</body>
</html>