JSFiddle - React, Tailwind, and code Playground

by Henry

CSS

body {
    font: 10px sans-serif;
}
.axis path, .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}
.x.axis path {
    display: none;
}
.line {
    fill: none;
    stroke: steelblue;
    stroke-width: 1.5px;
}

JavaScript

var phonedata = [{
    "groupName": "Casio GzOne",
        "caseCount": 8,
        "caseCreatedMonth": "10-2014"
}, {
    "groupName": "GALAXY",
        "caseCount": 80,
        "caseCreatedMonth": "10-2014"
}, {
    "groupName": "HTC ",
        "caseCount": 14,
        "caseCreatedMonth": "10-2014"
}, {
    "groupName": "LG Mobile Phones",
        "caseCount": 27,
        "caseCreatedMonth": "10-2014"
}, {
    "groupName": "Motorola",
        "caseCount": 29,
        "caseCreatedMonth": "10-2014"
}, {
    "groupName": "Nokia Lumia",
        "caseCount": 3,
        "caseCreatedMonth": "10-2014"
}, {
    "groupName": "Sony Ericsson Xperia",
        "caseCount": 4,
        "caseCreatedMonth": "10-2014"
}, {
    "groupName": "Verizon Ellipsis",
        "caseCount": 18,
        "caseCreatedMonth": "10-2014"
}, {
    "groupName": "iPhone 5",
        "caseCount": 29,
        "caseCreatedMonth": "10-2014"
}, {
    "groupName": "iPhone 6",
        "caseCount": 33,
        "caseCreatedMonth": "10-2014"
}, {
    "groupName": "Casio GzOne",
        "caseCount": 4,
        "caseCreatedMonth": "11-2014"
}, {
    "groupName": "DEFAULT",
        "caseCount": 32,
        "caseCreatedMonth": "11-2014"
}, {
    "groupName": "GALAXY",
        "caseCount": 83,
        "caseCreatedMonth": "11-2014"
}, {
    "groupName": "HTC",
        "caseCount": 14,
        "caseCreatedMonth": "11-2014"
}, {
    "groupName": "HTC ",
        "caseCount": 7,
        "caseCreatedMonth": "11-2014"
}, {
    "groupName": "LG Mobile Phones",
        "caseCount": 14,
        "caseCreatedMonth": "11-2014"
}, {
    "groupName": "Motorola",
        "caseCount": 29,
        "caseCreatedMonth": "11-2014"
}, {
    "groupName": "Nokia Lumia",
        "caseCount": 3,
        "caseCreatedMonth": "11-2014"
}, {
    "groupName": "Sony Ericsson Xperia",
        "caseCount": 3,
        "caseCreatedMonth": "11-2014"
}, {
    "groupName": "Verizon Ellipsis",
        "caseCount": 3,
        "caseCreatedMonth":...