JSFiddle - React, Tailwind, and code Playground

by Chetan Hanumantha

HTML

<script src="http://c3js.org/js/c3.min-991cb5cf.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http:////ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<body>
    <div class="container">
        <div class="row">
            <div class="col-xs-4">
                <div id="donutChart">

                </div>
            </div>
            <div class="col-xs-8" id="taskChart">
                <ul class="nav nav-pills">
                    <li class="active"><a href="#taskChart_A" data-toggle="tab">Venere</a></li>
                    <li><a href="#taskChart_B" data-toggle="tab">Marte</a></li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane fade in active" id="taskChart_A">
                    </div>
                    <div class="tab-pane fade" id="taskChart_B">
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

CSS

/*-- Chart --*/

.c3 svg {
  font: 10px sans-serif;
}
.c3 path, .c3 line {
  fill: none;
  stroke: #000;
}
.c3 text {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.c3-legend-item-tile,
.c3-xgrid-focus,
.c3-ygrid,
.c3-event-rect,
.c3-bars path {
  shape-rendering: crispEdges;
}

.c3-chart-arc path {
  stroke: #fff;

}
.c3-chart-arc text {
  fill: #fff;
  font-size: 13px;
}

/*-- Axis --*/

.c3-axis-x .tick {
}
.c3-axis-x-label {
}

.c3-axis-y .tick {
}
.c3-axis-y-label {
}

.c3-axis-y2 .tick {
}
.c3-axis-y2-label {
}

/*-- Grid --*/

.c3-grid line {
  stroke: #aaa;
}
.c3-grid text {
  fill: #aaa;
}
.c3-xgrid, .c3-ygrid {
  stroke-dasharray: 3 3;
}
.c3-xgrid-focus {
}

/*-- Text on Chart --*/

.c3-text {
}

/*-- Line --*/

.c3-line {
  stroke-width: 1px;
}
/*-- Point --*/

.c3-circle._expanded_ {
  stroke-width: 1px;
  stroke: white;
}
.c3-selected-circle {
  fill: white;
  stroke-width: 2px;
}

/*-- Bar --*/

.c3-bar._expanded_ {
  fill-opacity: 0.75;
}

/*-- Arc --*/

.c3-chart-arcs-title {
  font-size: 1.3em;
}

/*-- Focus --*/

.c3-target.c3-focused path.c3-line {
  stroke-width: 2px;
}

/*-- Region --*/

.c3-region {
  fill: steelblue;
  fill-opacity: .1;
}

/*-- Brush --*/

.c3-brush .extent {
  fill-opacity: .1;
}

/*-- Select - Drag --*/

.c3-dragarea {
}

/*-- Legend --*/

.c3-legend-item {
  font-size: 12px;
}

/*-- Tooltip --*/

.c3-tooltip {
  border-collapse:collapse;
  border-spacing:0;
  background-color:#fff;
  empty-cells:show;
  -webkit-box-shadow: 7px 7px 12px -9px rgb(119,119,119);
     -moz-box-shadow: 7px 7px 12px -9px rgb(119,119,119);
          box-shadow: 7px 7px 12px -9px rgb(119,119,119);
  opacity: 0.9;
}
.c3-tooltip tr {
  border:1px solid #CCC;
}
.c3-tooltip th {
  background-color: #aaa;
  font-size:14px;
  padding:2px 5px;
  text-align:left;
  color:#FFF;
}
.c3-tooltip td {
  font-size:13px;
  padding: 3px 6px;
  background-color:#fff;
  border-left:1px dotted #999;
}
.c3-tooltip td > span...

JavaScript

c3.generate({
                bindto: "#donutChart",
                data: {
                    columns: [
                        ['data1', 30],
                        ['data2', 120],
                    ],
                    type: 'donut'
                },
                donut: {
                    title: "Iris Petal Width",
                    onclick: function (d, i) { console.log(d, i); },
                    onmouseover: function (d, i) { console.log(d, i); },
                    onmouseout: function (d, i) { console.log(d, i); }
                }
            });
            c3.generate({
                bindto: "#taskChart_A",
                data: {
                    xs: {
                        'data1': 'x1',
                        'data2': 'x2',
                    },
                    columns: [
                        ['x1', 10, 30, 45, 50, 70, 100],
                        ['x2', 30, 50, 75, 100, 120],
                        ['data1', 30, 200, 100, 400, 150, 250],
                        ['data2', 20, 180, 240, 100, 190]
                    ],
                    type: 'bar'}
                });
            c3.generate({
                bindto: "#taskChart_B",
                data: {
                    xs: {
                        'data1': 'x1',
                        'data2': 'x2',
                    },
                    columns: [
                        ['x1', 10, 30, 45, 50, 70, 100],
                        ['x2', 30, 50, 75, 100, 120],
                        ['data1', 30, 200, 100, 400, 150, 250],
                        ['data2', 20, 180, 240, 100, 190]
                    ],
                    type: 'bar'}
                });