JSFiddle - React, Tailwind, and code Playground
by Osvaldo
HTML
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.bundle.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-deferred@1.0.2" defer></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation@0.5.7/chartjs-plugin-annotation.min.js" defer></script>
<div class="chart-container" lang="es-ES" style="position: relative; height:auto; width:100%">
<canvas id="covid_chart_1" width="350" height="250"></canvas>
</div>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
var chartData = {
labels: ['mar 2019', 'feb 2020', '10 mar', '11 mar', '12 mar', '13 mar', '14 mar', '15 mar', '16 mar', '17 mar', '18 mar', '19 mar', '20 mar', '21 mar', '22 mar', '23 mar', '24 mar', '25 mar', '26 mar'],
datasets: [
{
type: 'line',
label: 'max',
borderColor: 'rgba(255, 77, 22, 1)',
borderWidth: 2,
fill: false,
data: [, ,
87,
81,
72,
56,
35,
27,
24,
28,
42,
35,
26,
17,
15,
28,
22,
22,
36,
]
}, {
type: 'line',
label: 'min',
borderColor: 'rgba(255, 160, 0, 1)',
borderWidth: 2,
fill: false,
data: [, ,
25,
26,
22,
15,
8,
6,
8,
4,
14,
11,
7,
4,
4,
5,
2,
6,
9,
]
}, {
type: 'bar',
label: 'media',
backgroundColor: 'rgba(134, 139, 134, 1)',
data: [
36,
45,
66,
65,
54,
40,
21,
15,
16,
...