c3js / c3

:bar_chart: A D3-based reusable chart library
http://c3js.org
MIT License
9.33k stars 1.39k forks source link

Bar Chart: Tooltip Each Bar #2830

Closed jonnjasperejoc closed 3 years ago

jonnjasperejoc commented 3 years ago

This is not an issue but I just want to share this, In Bar Chart I wanted each bar to have it's own tooltip, this is what I did. Hope this will help others too. image and here's the code

var chart = c3.generate({
    data: {
        columns: [
            ['A', 120, null, null, null, null, null, null, null, null],
            ['B', null, 30, null, null, null, null, null, null, null],
            ['C', null, null, 100, null, null, null, null, null, null],
            ['D', null, null, null, 76, null, null, null, null, null],
            ['E', null, null, null, null, 50, null, null, null, null, null],
            ['F', null, null, null, null, null, 45, null, null, null, null],
            ['G', null, null, null, null, null, null, 80, null, null, null],
            ['H', null, null, null, null, null, null, null, 23, null, null],
            ['I', null, null, null, null, null, null, null, null, 10, null],
            ['J', null, null, null, null, null, null, null, null, null, 89]
        ],
        groups: [
            ['A', 'B', 'C', 'D', 'E', 'F','G','H','I','J']
        ],
        type: 'bar'
    },
    bar: {
        width: {
            ratio: .5 // this makes bar width 50% of length between ticks
        }
    },
    axis: {
        x: {
            type: 'category', 
            categories: ['A', 'B', 'C', 'D', 'E', 'F','G','H','I','J']
        }
    },
    legend: { show: false },
    tooltip: {
        format: {
            title: function (x, index) { return 'Jan 19 ' }
        }
    }
});
jonnjasperejoc commented 3 years ago

This is not an issue but I just wanted to share this.