JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css">
<body>
    <div id="chart"></div>
</body>

<pre id="data">
A,B,C,D
25,50,75,100
</pre>

CSS

pre { display:none; }

JavaScript

var unparsedData = d3.select("pre#data").text();
var data = d3.csv.parseRows( unparsedData );
data[0].splice (0,0,"Letter");
data[1].splice (0,0,"Data");
console.log ("data", data);

var chart = c3.generate({
  bar: {
    width: 15
  },
  padding: {
    left: 60
  },
  data: {
    columns: data,
		x: "Letter",
    type: 'bar',
    onclick: function(e) { console.log(ylist[e.x]);a = this;}

  },
  axis: {
      x: {
          type: 'category'
       }
   },
  legend: {
    show: false
  }
});