How to change tooltip content in c3js
If you use the function getTooltipContent from https://github.com/masayuki0812/c3/blob/master/src/tooltip.js#L27 and add it in the chart declaration, in tooltip.contents, you'll have the same tooltip content that the default one.
You can make changes on this code and customize it as you like. One detail, as CLASS is not defined in the current scope, but it's part chart object, I substituted CLASS for $$.CLASS, maybe you don't even need this Object in your code.
var chart = c3.generate({ /*...*/ tooltip: { format: { /*...*/ }, contents: function (d, defaultTitleFormat, defaultValueFormat, color) { var $$ = this, config = $$.config, titleFormat = config.tooltip_format_title || defaultTitleFormat, nameFormat = config.tooltip_format_name || function (name) { return name; }, valueFormat = config.tooltip_format_value || defaultValueFormat, text, i, title, value, name, bgcolor; for (i = 0; i < d.length; i++) { if (! (d[i] && (d[i].value || d[i].value === 0))) { continue; } if (! text) { title = titleFormat ? titleFormat(d[i].x) : d[i].x; text = "<table class='" + $$.CLASS.tooltip + "'>" + (title || title === 0 ? "<tr><th colspan='2'>" + title + "</th></tr>" : ""); } name = nameFormat(d[i].name); value = valueFormat(d[i].value, d[i].ratio, d[i].id, d[i].index); bgcolor = $$.levelColor ? $$.levelColor(d[i].value) : color(d[i].id); text += "<tr class='" + $$.CLASS.tooltipName + "-" + d[i].id + "'>"; text += "<td class='name'><span style='background-color:" + bgcolor + "'></span>" + name + "</td>"; text += "<td class='value'>" + value + "</td>"; text += "</tr>"; } return text + "</table>"; } }});
If you want to control tooltip render and use default rendering depending on data value you can use something like this:
tooltip: { contents: function (d, defaultTitleFormat, defaultValueFormat, color) { if (d[1].value > 0) { // Use default rendering return this.getTooltipContent(d, defaultTitleFormat, defaultValueFormat, color); } else { return '<div>Show what you want</div>'; } }, format: { /**/ }}
In my case i had to add the day for the date value(x axis) in tool tip. Finally i came came up with the below solution
References for js and css
https://code.jquery.com/jquery-3.2.1.js
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.jshttps://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.jshttps://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css
function toDate(dateStr){ var numbers = dateStr.match(/\d+/g); return new Date(numbers[0], numbers[1]-1, numbers[2]);}function GetMonthFromString(month){ var months = {'Jan' : '01','Feb' : '02','Mar':'03','Apr':'04', 'May':'05','Jun':'06','Jul':'07','Aug':'08','Sep':'09', 'Oct':'10','Nov':'11','Dec':'12'}; return months[month];}function GetFullDayName(formatteddate){ var weekday = new Array(7); weekday[0] = "Sunday"; weekday[1] = "Monday"; weekday[2] = "Tuesday"; weekday[3] = "Wednesday"; weekday[4] = "Thursday"; weekday[5] = "Friday"; weekday[6] = "Saturday"; var dayofdate = weekday[formatteddate.getDay()]; return dayofdate;}//Chart Data for x-axis, OnHours and AvgHoursfunction CollectChartData(){ var xData = new Array(); var onHoursData = new Array(); var averageHoursData = new Array(); var instanceOccuringDatesArray = ["2017-04-20","2017-04-21","2017-04-22","2017-04-23","2017-04-24","2017-04-25","2017-04-26","2017-04-27","2017-04-28","2017-04-29","2017-04-30","2017-05-01","2017-05-02","2017-05-03","2017-05-04","2017-05-05","2017-05-06","2017-05-07","2017-05-08","2017-05-09","2017-05-10","2017-05-11","2017-05-12","2017-05-13","2017-05-14","2017-05-15","2017-05-16","2017-05-17","2017-05-18","2017-05-19","2017-05-20"]; var engineOnHoursArray = ["4.01","14.38","0.10","0.12","0.01","0.24","0.03","6.56","0.15","0.00","1.15","0.00","1.21","2.06","8.55","1.41","0.03","1.42","0.00","3.35","0.02","3.44","0.05","5.41","4.06","0.02","0.04","7.26","1.02","5.09","0.00"]; var avgUtilizationArray = ["2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29"]; xData.push('x'); onHoursData.push('OnHours'); averageHoursData.push('Project Average'); for(var index=0;index<instanceOccuringDatesArray.length;index++) { xData.push(instanceOccuringDatesArray[index]); } for(var index=0;index<engineOnHoursArray.length;index++) { onHoursData.push(engineOnHoursArray[index]); } for(var index=0;index<avgUtilizationArray.length;index++) { averageHoursData.push(avgUtilizationArray[index]); } var Data = [xData, onHoursData, averageHoursData]; return Data; }function tooltip_contents(d, defaultTitleFormat, defaultValueFormat, color) { var $$ = this, config = $$.config, CLASS = $$.CLASS, titleFormat = config.tooltip_format_title || defaultTitleFormat, nameFormat = config.tooltip_format_name || function (name) { return name; }, valueFormat = config.tooltip_format_value || defaultValueFormat, text, i, title, value, name, bgcolor; // You can access all of data like this: //$$.data.targets; for (i = 0; i < d.length; i++) { if (! text) { title = titleFormat ? titleFormat(d[i].x) : d[i].x; var arr = title.split(" "); var datestr = new Date().getFullYear().toString() + "-"+ GetMonthFromString(arr[1]) + "-"+ arr[0]; var formatteddate = toDate(datestr); var dayname = GetFullDayName(formatteddate); title = title + " (" + dayname + ")"; text = "<table class='" + $$.CLASS.tooltip + "'>" + (title || title === 0 ? "<tr><th colspan='2'>" + title + "</th></tr>" : ""); } name = nameFormat(d[i].name); var initialvalue = valueFormat(d[i].value, d[i].ratio, d[i].id, d[i].index); if (initialvalue.toString().indexOf('.') > -1) { var arrval = initialvalue.toString().split("."); value = arrval[0] + "h " + arrval[1] + "m"; } else { value = initialvalue + "h " + "00m"; } bgcolor = $$.levelColor ? $$.levelColor(d[i].value) : color(d[i].id); text += "<tr class='" + CLASS.tooltipName + "-" + d[i].id + "'>"; text += "<td class='name'><span style='background-color:" + bgcolor + "'></span>" + name + "</td>"; text += "<td class='value'>" + value + "</td>"; text += "</tr>"; } return text + "</table>"; }$(document).ready(function () { var Data = CollectChartData(); var chart = c3.generate({ data: { x: 'x', columns: Data }, axis: { x: { type: 'timeseries', tick: { rotate: 75, //format: '%d-%m-%Y' format: '%d %b' } }, y : { tick : { format: function (y) { if (y < 0) { } return y; } }, min : 0, padding : { bottom : 0 } } }, tooltip: { contents: tooltip_contents } });}); <script src="https://code.jquery.com/jquery-3.2.1.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" /><div id="chart"></div>