Showing total count for bar chart in c3js tooltip title

Question

I have a bar chart similar to the one shown in this link .

I wanted to add two features to this bar chart

1. Instead of numbers, I want the tooltip title to display the sum of the count displayed by the bars at the given cordinate.

2. I wanted to display the % in the tooltip instead of the actual count.

Could someone please help me with this?

Answer 1

This can be done by configuring tooltip.format.title :

   tooltip: {
      format: {
        title: function (index) {
          return totals[index]
        }

and tooltip.format.value :

        value: function (value, ratio, id, index) {
          return d3.format("%")(value / totals[index])
        }
     }
  }

And as you can see above, you need to calculate total values of your data groups:

var totals = [390, 500, 500, 900, 550, 550]

See example .