CODEWITHSUNDEEP
javascriptjqueryc3.js
adp
adp

Reputation: 291

On C3js, how to make the tooltip on a bar chart display the data for just that bar as you hover over it?

I have the following chart using C3.js and some JSON data. How can I make the tooltip display each individual bar's data, and not all the bars data on a table?

var chart = [
 {'0-9': 249.8740575482693,
   '10-19': 238.2744788358169,
   '20-29': 369.10362988529357,
   '30-39': 156.9635033529556,
   '40-49': 266.00448275832673,
   '50-59': 283.5138392550998,
   '60-69': 211.16877917295733,
   '70-79': 154.08326897057742,
   '80+': 148.8063871481496},
]

chart = c3.generate({
 bindto: '#chart',
 data: {
    json: chart,
    keys: {
        value: ['0-9', '10-19', '20-29', '30-39', '40-49', '50-59', '60-69', '70-79', '80+']
    },
    type: 'bar'
},
color: {
    pattern: ['#E39920', '#53B5B5', '#CD249A', '#F56223', '#6FAAD6','#A33E54', '#27668D','#75AB36', '#6E37B6']
  },
  tooltip: {
    format: {
        title: function (d) { return 'Data'},
        value: function (value, ratio, id) {
            var format = id === 'data1' ? d3.format(',') : d3.format('$');
            return format(value);
        }
    }
}
});

Upvotes: 0

Views: 2506

Answers (1)

InfinityStar
InfinityStar

Reputation: 26

You can use grouped: false to separate out the values of the tooltip so they display only what you have moused over, like so:

    tooltip: {
grouped: false,
    format: {
        title: function (d) { return 'Data'},
        value: function (value, ratio, id) {
            var format = id === 'data1' ? d3.format(',') : d3.format('$');
            return format(value);
        }
    }
}

By default, c3 groups tooltip values together, and this option separates them :)

Upvotes: 1

Related Questions