JSFiddle - React, Tailwind, and code Playground

by forivall

HTML

<script src="https://rawgit.com/masayuki0812/c3/master/c3.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.1/d3.js"></script>
<script src="https://rawgit.com/liquidpele/nvd3/gh-pages/examples/lib/stream_layers.js"></script>
<!-- <div style="height: 100px"></div> -->
<button id="toggle">toggle grouping</button>

<button id="toggle2">toggle type</button>
<span id="chart-type-name"></span>
<!-- <div style="position: absolute; top: 0, height: 400px, width: 400px"><div id="chart"></div></div> -->
<div id="chart">

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 {
}

.c3-text.c3-empty {
  fill: #808080;
  font-size: 2em;
}

/*-- 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 {
  stroke-width: 0;
}
.c3-bar._expanded_ {
  fill-opacity: 0.75;
}

/*-- Arc --*/

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

/*-- Focus --*/

.c3-target.c3-focused {
  opacity: 1;
}
.c3-target.c3-focused path.c3-line, .c3-target.c3-focused path.c3-step {
  stroke-width: 2px;
}
.c3-target.c3-defocused {
  opacity: 0.3 !important;
}


/*-- 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;
}
.c3-legend-item-hidden {
  opacity: 0.15;
}

.c3-legend-background {
  opacity: 0.75;
  fill: white;
  stroke: lightgray;
  stroke-width: 1
}

/*-- Tooltip --*/

.c3-tooltip-container {
  z-index: 10;
}
.c3-tooltip {
  border-collapse:collapse;
  border-spacing:0;
  background-color:#fff;
  empty-cells:show;
  -webkit-box-shadow: 7px 7px 12px -9px...

CoffeeScript

test_data = stream_layers(3,12,0.1)
names = test_data.map((data, i) -> "Stream#{i}")


chart = c3.generate
    size: {height: 400}
    padding: {top:0,bottom:140,left:30,right:0}
    bar: {width: {ratio: 1}}
    data: {
        x: 'x'
        rows: [['x', 'stream1']].concat(test_data[0].map((d) -> [d.x, d.y]))
        ###
        x: 'name',
        rows: [
            ['name', 'data1', 'data2', 'data3']
            ['adsfas',100,400,400]
            ['asdfsadfb',200,500,400]
            ['casdfasdfasdfasdfasdfasasdfasdfdfasdfasdfasdf',150,250,400]
            ['sadfasdfd',300,700,400]
            ['e',200,300,400]
        ]
        ###
        type: 'bar'
    }
    axis: {x: {tick: {rotate: -60, fit: true, width: 80}}}
###
chart.load({
    json: test_data[0]
    keys: {x: 'x', y: 'y'}
})
###
chart.load({
    rows: [['x', 'stream2']].concat(test_data[1].map((d) -> [d.x, d.y]))
})
chart.load({
    rows: [['x', 'stream3']].concat(test_data[2].map((d) -> [d.x, d.y]))
})

d3.select('#toggle').on 'click', -> chart.groups(if chart.groups()?.length then [] else [['stream1', 'stream2', 'stream3']])

t = 0;
chart_types = ['bar', 'area', 'pie', 'donut', 'line', 'area-step', 'spline', 'area-spline']
d3.select('#toggle2').on 'click', -> chart.transform(chart_type = chart_types[t=(t+1)%chart_types.length]); d3.select('#chart-type-name').text(chart_type)


###
###

###
chart = c3.generate({
    data: {
        x : 'x',
        rows: [
             ['x', 'download', 'loading']
             ['www.site1.com',  30, 90]
             ['www.site2.com',  200, 100]
             ['www.site3.com',  100, 140]
             ['www.site4.com',  400, 200]
        ]
        groups: [
            ['download', 'loading']
        ],
        type: 'bar'
    },
    axis: {
        x: {
            type: 'category'
        }
    }
});
###