c3 charts custom tooltip

by A B Jones

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>

CSS

.fixed{
  position:fixed;
  top:0;
  left:0;
}

JavaScript

// c3 - custom tooltip
var chart = c3.generate({
    data: {
        columns: [
            ['data1', 100, 200, 150, 300, 200],
            ['data2', 400, 500, 250, 700, 300], ]
    },
    tooltip: {
        contents: function (d, defaultTitleFormat, defaultValueFormat, color) {
            return "<font color='red'>" + d[0].value + "</font>" +
                "<br>" +
                "<font color='red'>" + d[1].value + "</font>";
        },
        position: function () {
            var position = c3.chart.internal.fn.tooltipPosition.apply(this, arguments);
            position.top = 0;
            return position;
        }
    }
});