JSFiddle - React, Tailwind, and code Playground

by sqiudward

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.10/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<h1>
  hi
</h1>
<div id='myPlot'></div>

JavaScript

var elementID = "#myPlot";
	var myData = {};

	myData.x = 'x';
	myData.xFormat = "%Y-%m-%d";
	myData.type = 'bar';
	myX = ["2015-11-20", "2015-11-21", "2015-11-22", "2015-11-23", "2015-11-24"];
	myY = [1, 2, 3, 4, 5];
	myX.splice(0, 0, 'x');
	myY.splice(0, 0, 'New Reports');
	myData.columns = [];
	myData.columns.push(myX);
	myData.columns.push(myY);
  console.log();
	var chart = c3.generate({
	  bindto: elementID,
	  data: myData,
	  size: {
	    height: 480,
	    width: 400,
	  },
	  bar: {
	    width: {
	      ratio: 0.5 // this makes bar width 50% of length between ticks
	    }
	    // or
	    //width: 100 // this makes bar width 100px
	  },
	  axis: {
	    x: {
	      type: 'timeseries',
        tick: {
                format: "%b-%d"
            }
	    },
      
	  }
	})