JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container-1"></div>
</figure>CSS
.highcharts-figure, .highcharts-data-table table {
min-width: 360px;
max-width: 800px;
margin: 1em auto;
}
.highcharts-data-table table {
font-family: Verdana, sans-serif;
border-collapse: collapse;
border: 1px solid #EBEBEB;
margin: 10px auto;
text-align: center;
width: 100%;
max-width: 500px;
}
.highcharts-data-table caption {
padding: 1em 0;
font-size: 1.2em;
color: #555;
}
.highcharts-data-table th {
font-weight: 600;
padding: 0.5em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
padding: 0.5em;
}
.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
background: #f8f8f8;
}
.highcharts-data-table tr:hover {
background: #f1f7ff;
}JavaScript
Highcharts.chart('container-1', {
series: [{
name: '7-day rolling average',
lineWidth: 7,
color: "#0284f3",
pointStart: Date.UTC(2020, 3, 1), // with UTC, 3 = 4th month
pointInterval: 24 * 3600 * 1000, // one day
data: [
// April 1, 2020
17.98,
17.42,
19.5,
19.32,
18.79,
19.59,
20.4,
20.63,
21.6,
23.8,
24.87,
26.53,
27.68,
26.03,
25.65,
24.55,
22.65,
23.24,
24.14,
22.89,
27.09,
27.64,
26.67,
26.32,
25.32,
23.53,
24.48,
20.91,
19.88,
19.23,
// May 1, 2020
17.72,
16.35,
16.16,
13.74,
12.31,
11.39,
8.84,
7.31,
6.96,
7,
6.29,
5.46,
5.27,
5.96,
6.22,
5.89,
5.66,
5.63,
6.28,
6.24,
6.13,
6.26,
6.21,
6.52,
6.05,
6.97,
7.18,
6.78,
6.56,
6.57,
6.35,
// June 1, 2020
7.01,
6.12,
6.32,
6.95,
7.15,
7.39,
7.38,
7.13,
7.17,
7.61,
7.05,
7.08,
7.6,
7.6,
8.49,
9.61,
9.75,
10.02,
10.87,
10.66,
10.84,
10.65,
10.58,
10.89,
10.56,
10.4,
10.77,
10.62,
10.25,
10.19,
// July 1, 2020
10.22,
10.77,
11.58,
11.09,
11.87,
12.73,
13.17,
14.35,
16.36,
17.81,
19.81,
21.85,
23.49,
25.98,
27.62,
28.65,
27.97,
27.72,
26.59,
27.08,
25.72,
25.06,
25.13,
25.2,
// July 25, 2020
25.26,
// July 26, 2020
26.09
]
}],
chart: {
zoomType: 'x',
margin: [80, 0, 50, 55],
backgroundColor: '#ffffff',
spacingTop: 0,
spacingRight: 0,
spacingBottom: 0,
spacingLeft: 0,
style: {
fontFamily: 'sans-serif'
}
},
title: {
text: ''
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%b %d...