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

  data: {
    x: 'Letter',
    columns:
    [
      ['Letter', 'A','B','C','D'],
      ['value', 25,50,75,100]
    ],

    type: 'bar',
    
		colors: {
      value: function(d) {
        return '#'+(0xff0000+(d.value-25)*256*3).toString(16);
      }
    },

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