JSFiddle - React, Tailwind, and code Playground

by rexbul

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css">
<body>
    <div id="chart"></div>
</body>

JavaScript

var date= ['x', ' 2023-01-22#00:00:01', ' 2023-01-22#00:10:03', ' 2023-01-22#00:20:05', ' 2023-01-22#00:30:07', ' 2023-01-22#00:40:09', ' 2023-01-22#00:50:13', ' 2023-01-22#01:00:15', ' 2023-01-22#01:10:17', ' 2023-01-22#01:20:19', ' 2023-01-22#01:30:21', ' 2023-01-22#01:40:22', ' 2023-01-22#01:50:25', ' 2023-01-22#02:00:27', ' 2023-01-22#02:10:29', ' 2023-01-22#02:20:33', ' 2023-01-22#02:30:35', ' 2023-01-22#02:40:37', ' 2023-01-22#02:50:39', ' 2023-01-22#03:00:41', ' 2023-01-22#03:10:43', ' 2023-01-22#03:20:45', ' 2023-01-22#03:30:46', ' 2023-01-22#03:40:51', ' 2023-01-22#03:50:53', ' 2023-01-22#04:00:00', ' 2023-01-22#04:10:57', ' 2023-01-22#04:20:59', ' 2023-01-22#04:31:01', ' 2023-01-22#04:41:03', ' 2023-01-22#04:51:07', ' 2023-01-22#05:01:09', ' 2023-01-22#05:11:11', ' 2023-01-22#05:21:13', ' 2023-01-22#05:31:15', ' 2023-01-22#05:41:17', ' 2023-01-22#05:51:19', ' 2023-01-22#06:00:00', ' 2023-01-22#06:10:13', ' 2023-01-22#06:20:15', ' 2023-01-22#06:30:17', ' 2023-01-22#06:40:19', ' 2023-01-22#06:50:21', ' 2023-01-22#07:00:00', ' 2023-01-22#07:10:25'];
var conso=['Conso', 1600, 1572, 1459, 1313.6, 1245.2, 3385.6, 1191, 501.6, 527.4, 511, 503.6, 505.2, 489.2, 465.4, 458.6, 443, 467, 468.2, 472, 505.2, 512.4, 501, 508.8, 947, 3584.2, 2623, 1707.6, 1366, 2042.2, 586.8, 597.2, 579.4, 612.4, 699.2, 542.6, 446.2, 477.04545454545456, 468.6, 453.2, 580.4, 2374.6, 1024, 980.8, 1079.8];
var cat_colors=['LightGray', 'LightGray', 'LightGray', 'LightGray', 'LightGray', 'LightGray', 'LightGray', 'LightGray', 'LightGray', 'LightGray', 'LightGray', 'LightGray', 'LightGray', 'LightGray', 'LightGray', 'LightGray', 'LightGray', 'LightGray', 'LightGray', 'LightGray', 'LightGray', 'LightGray', 'LightGray', 'LightGray', 'LightGray', 'LightGray', 'LightGray', 'LightGray', 'LightGray', 'LightGray', 'LightGray', 'LightGray', 'LightGray', 'LightGray', 'LightGray', 'LightGray', 'Blue', 'Blue', 'Blue', 'Blue', 'Blue', 'Blue', 'Blue', 'Blue'];
var chart = c3.generate({
    bindto:...