JSFiddle - React, Tailwind, and code Playground
by Sergey Ivanov
CSS
svg rect.bar {
fill: #510FAD;
}
.axis {
font: 14px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
display: none;
}
JavaScript
var dataset = [
{
"label" : "01-10-2014",
"data" : 1526
},
{
"label" : "02-10-2014",
"data" : 880
},
{
"label" : "03-10-2014",
"data" : 336.5
},
{
"label" : "04-10-2014",
"data" : 501
},
{
"label" : "05-10-2014",
"data" : 123
},
{
"label" : "06-10-2014",
"data" : 287
},
{
"label" : "07-10-2014",
"data" : 784
},
{
"label" : "08-10-2014",
"data" : 1010
},
{
"label" : "09-10-2014",
"data" : 2599
},
{
"label" : "10-10-2014",
"data" : 470
},
{
"label" : "11-10-2014",
"data" : 323
},
{
"label" : "12-10-2014",
"data" : 517
},
{
"label" : "13-10-2014",
"data" : 641
},
{
"label" : "14-10-2014",
"data" : 160
},
{
"label" : "15-10-2014",
"data" : 8200
},
{
"label" : "16-10-2014",
"data" : 765
},
{
"label" : "17-10-2014",
"data" : 12535
},
{
"label" : "18-10-2014",
"data" : 550
},
{
"label" : "19-10-2014",
"data" : 855
},
{
"label" : "20-10-2014",
"data" : 988
},
{
"label" : "21-10-2014",
"data" : 654
},
{
"label" : "22-10-2014",
"data" : 3660
},
{
"label" : "23-10-2014",
"data" : 1010
},
{
"label" : "24-10-2014",
"data" : 722
},
{
"label" : "25-10-2014",
"data" : 690
},
{
"label" : "26-10-2014",
"data" : 439
},
{
"label" : "27-10-2014",
"data" : 383
},
{
"label" : "28-10-2014",
"data" : 488
},
{
"label" : "29-10-2014",
"data" : 912
},
{
"label" : "30-10-2014",
"data" :...