JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="network" style="height: 370px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
JavaScript
var chart4 = new CanvasJS.Chart("network", {
culture: "se",
animationEnabled: true,
theme: "light1",
zoomEnabled: true,
legend: {
cursor: "pointer",
itemclick: toggleDataSeries
},
axisX: {
type: 'dateTime'
},
data:
[
{
"type": "stackedColumn",
"xValueType": "dateTime",
"lineThickness": 10,
"name": "Arbetsf\u00f6rmedlingen",
"showInLegend": "true",
"dataPoints": [
{
"x": new Date("2020-03-02"),
"y": 31
},
{
"x": new Date("2020-03-03"),
"y": 22
},
{
"x": new Date("2020-03-04"),
"y": 26
},
{
"x": new Date("2020-03-05"),
"y": 32
},
{
"x": new Date("2020-03-06"),
"y": 27
},
{
"x": new Date("2020-03-07"),
"y": 4
},
{
"x": new Date("2020-03-08"),
"y": 3
},
{
"x": new Date("2020-03-09"),
"y": 67
},
{
"x": new Date("2020-03-10"),
"y": 95
},
{
"x": new Date("2020-03-11"),
"y": 70
},
{
"x": new Date("2020-03-12"),
"y": 63
},
{
"x": new Date("2020-03-13"),
"y": 61
},
{
"x": new Date("2020-03-14"),
"y": 3
},
{
"x": new Date("2020-03-15"),
"y": 4
},
{
"x": new Date("2020-03-16"),
"y": 56
},
{
"x": new Date("2020-03-17"),
"y": 51
},
{
"x": new Date("2020-03-18"),
"y": 74
},
{
"x": new Date("2020-03-19"),
"y": 65
},
{
"x": new Date("2020-03-20"),
"y": 58
},
{
"x": new Date("2020-03-21"),
"y": 9
},
...