CODEWITHSUNDEEP
bar-chartc3.jsstacked-chart
Appstarter
Appstarter

Reputation: 59

Total Count in c3js tooltip title

I have the following code in c3.js to create a stacked bar chart.

    x=['a','b','c'];
    var chart = c3.generate({
    data: {

    columns: [
        ['data1', -30, 200, 200],
        ['data2', 130, 100, -100],

    ],
    type: 'bar',
    groups: [
        ['data1', 'data2']
    ]
    },

    });

I was wondering how to implement the feature to show the total count in the tool tip title which has been implemented here

Upvotes: 0

Views: 905

Answers (1)

krsmith88
krsmith88

Reputation: 91

The easiest way to do this would be to simply write your own tooltip HTML. You can do this with the code below.

var chart = c3.generate({
  .......
  tooltip: {
    contents: function (d, defaultTitleFormat, defaultValueFormat, color) {
      return ...... Your HTML as a string here .......
    }
  }
});

Then you will need to sum up the values of all the points that have the same index as the one you have hovered over with something like this:

var sum = 0;
for (var i = 0; i < chart.data.targets.length; i++) {
  sum += chart.data.targets[i].values[d[0].index].value;
}

I have created a fiddle that gives an example of how to do it, and should do what you are need. The important thing to remember when doing this is to style the tooltip the way you want, otherwise it will be plain. I have also seperated the function to generate the HTML into another function to keep things neat.

Upvotes: 2

Related Questions