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>

JavaScript

var chart = c3.generate({
  bar: {
    width: 15
  },
  padding: {
    left: 60
  },
  data: {
    x: 'Letter',
    columns:
    [
      ['Letter', 'A','B','C','D'],
      ['value', 25,50,75,100]
    ],

    type: 'bar',
    onclick: function(e) { console.log(ylist[e.x]);a = this;}

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