JSFiddle - React, Tailwind, and code Playground

by Michel Penke

HTML

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/annotations.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container"></div>

<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">

JavaScript

var chart = Highcharts.chart('container', {
  chart: {
    type: 'column',
    zoomType: 'x',
    selectionMarkerFill: 'rgb(217, 217, 217, .5)',
    resetZoomButton: {
      theme: {
        style: {
          fontFamily: 'Open Sans',
          fontWeight: '400',
          color: '#373737',
          fontSize: "14px"
        },
        fill: 'white',
        stroke: 'rgb(217, 217, 217, .3)',
        r: 0
      }
    },
    height: 550,
    spacingBottom: 50,
    spacingRight: 50,
    panning: true,
    panKey: 'shift',
  },


  title: {
    text: 'Wie viele sich täglich infizieren',
    align: 'left',
    y: 20,
    style: {
      color: '#292929',
      fontWeight: '700',
      fontWeight: '600',
      fontSize: '22px',
      fontFamily: 'Open Sans,sans-serif'
    }
  },

  subtitle: {
    text: 'Entwicklung der Zahl der Neuinfektionen pro Tag in Deutschland',
    align: 'left',
    style: {
      fontFamily: 'Open Sans',
      fontWeight: '400',
      color: '#373737',
      fontSize: "14px"
    }
  },

  exporting: {
    buttons: {
      contextButton: {
        enabled: false
      }
    }
  },

  xAxis: {
    /*     plotBands: [{
          zIndex: 1,
          to: Date.UTC(2020, 4, 6),
          from: Date.UTC(2020, 3, 30),
          color: 'rgb(217, 217, 217, .4)',
        
        }], */
    plotLines: [{
      zIndex: 1,
      width: 1,
      value: Date.UTC(2020, 2, 23),
      label: {
        zIndex: 10,
        style: {
          fontFamily: 'Open Sans',
          fontWeight: '400',
          color: '#373737',
          fontSize: "12px"
        },
        text: '23. März<br><b>offizielle Kontaktbeschränkungen</b>',
        verticalAlign: 'top',
        textAlign: 'left',
        rotation: 0,
        x: 5,
        y: 5
      }
    }],
    type: 'datetime',
    tickInterval: 30 * 24 * 60 * 60 * 1000,
    tickLength: 10,
    labels: {
      formatter: function() {
        return Highcharts.dateFormat("%B", this.value);
      },
      style: {
       ...