JSFiddle - React, Tailwind, and code Playground

by Chetan Hanumantha

HTML

<script src="https://rawgit.com/masayuki0812/c3/master/c3.js"></script>
<link rel="stylesheet" href="https://rawgit.com/masayuki0812/c3/master/c3.css">
<div id="chart1"></div>

CSS

.report {
  width: 10px;
}

JavaScript

var barTitle = ["Course1", "Course2", "Course3", "Course4", "Course5", "Course6", "Course7", "Course8", "Course9", "Course10"];
var width = 600, height = 500;
var graphData = {
            hide:["data1", "data3"],
            columns: [
              ["data1", 30, 20, 50, 40, 60, 50, 50, 40, 60, 50],
              ["data2", 200, 130, 90, 240, 130, 220, 50, 40, 60, 50],
              ["data3", 300, 200, 160, 400, 250, 250, 50, 40, 60, 50],
              ["data4", 200, 130, 90, 240, 130, 220, 50, 40, 60, 50],
              ["data5", 130, 120, 150, 140, 160, 150, 50, 40, 60, 50],
              ["data6", 130, 120, 150, 140, 160, 150, 50, 40, 60, 50],
              ["data7", 130, 120, 150, 140, 160, 150, 50, 40, 60, 50],
              ["lineData", .50, .86, .97, .84, .552, .90, .728, .83, .95, .64]
            ],
            names: {
                "data1": "Courses Completed",
                "data2": "Courses Incomplete",
                "data3": "Courses Incomplete And Started",
                "data4": "Courses Incomplete And Not Started",
                "data5": "Courses Started",
                "data6": "Courses Not Started",
                "data7": "Courses Enrolled",
                "lineData": "Course Effectiveness"
            },
            colors: {            
                "data1": "#50CC6D", 
                "data2": "#E5AC2C", 
                "data3": "#F47F5B",
                "data4": "#6C80BE", 
                "data5": "#2B709C",
                "data6": "#E35359",
                "data7": "#2BADD0", 
                "lineData": "#cccccc"
            },
            axes: {
                "data1": "y",
                "data2": "y",
                "data3": "y",
                "data4": "y",
                "data5": "y",
                "data6": "y",
                "data7": "y",
                "lineData": "y2"
            },
            type: "bar",
            types: {
                lineData: "line"
            },
            empty: {...