Displaying the overall count for a bar chart within the tooltip title of a c3js visualization

Question

I have a bar chart that looks similar to the one presented in this example.

There are two specific features I am interested in adding to this bar chart:

Instead of numeric values, I would like the tooltip title to show the sum of the counts represented by the bars at a particular coordinate.
I hope to have the percentage displayed in the tooltip rather than the actual count value.

If anyone is able to assist me with achieving these changes, I would greatly appreciate it.

Answer 1

Answer №1

To achieve this functionality, you can set up the tooltip.format.title property like so:

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

Similarly, for the tooltip.format.value:

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

It is important to calculate the total values of your data groups as shown below:

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

Check out this example for reference.

Answer 2

To achieve this functionality, you can set up the tooltip.format.title property like so:

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

Similarly, for the tooltip.format.value:

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

It is important to calculate the total values of your data groups as shown below:

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

Check out this example for reference.