JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/masayuki0812/c3/master/c3.js"></script>
<link rel="stylesheet" href="https://rawgit.com/masayuki0812/c3/master/c3.css">
<div id="chart"></div>

JavaScript

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 30, 20, 50, 40, 60, 50]

        ],
        type: 'bar',
        colors: {
            data1: function (d) {
                return (d.value >= 45) ? '#00ff00' : '#ff0000';
            }
        }
    },
    legend: {
        show: false
    },
    tooltip: {
        contents: function (d, defaultTitleFormat, defaultValueFormat, color) {
            color = function() {
                return (d[0].value >= 45) ? '#00ff00' : '#ff0000';
            };
            return chart.internal.getTooltipContent.call(this, d, defaultTitleFormat, defaultValueFormat, color)
        }
    }
});