c3js / c3

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

Tooltips in reverse order #2098

Open magicl opened 6 years ago

magicl commented 6 years ago

See this thread from news group https://groups.google.com/forum/#!searchin/c3js/tooltip$20reverse%7Csort:relevance/c3js/OGP3FXYlOxo/HGAPt9LNh7sJ

This happens for me with stacked bars when I set 'order' to null. Setting order to null makes both the graph and the tooltiop respect the order of the input, but the tooltip shows the elements in the reverse order of the stacked graph

I am using versions: C3: 0.4.14 D3: 3.5.17

panthony commented 6 years ago

Hi,

Could you provide a JSFiddle or Plunkr highlighting the issue?

It makes reproduction much easier for everyone.

Thank you!

ornic commented 5 years ago

https://c3js.org/samples/data_order.html

there is a great example :)

image

image

order of data and tooltip are not the same

in fact, the problem with data.order=null and stacked bars/areas is in order of data, not the tooltip or legend

if you paste this code into link above you will see that legend and tooltip have both the same order, but the data order is reversed

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 130, 200, 320, 400, 530, 750],
            ['data2', -130, 10, 130, 200, 150, 250],
            ['data5', 200, 300, 450, 600, 520, 820]
        ],
        type: 'bar',
        groups: [
            ['data1', 'data2', 'data5']
        ],
//        order: 'desc' // stack order by sum of values descendantly. this is default.
//      order: 'asc'  // stack order by sum of values ascendantly.
      order: null   // stack order by data definition.
    },
        legend: {position: 'right'},
    grid: {
        y: {
            lines: [{value:0}]
        }
    }
});

image

danmangit commented 3 years ago

I have the same issue, which affects our users. The stack in the chart looks good, but the order in tooltip and legend is reversed.

Order

Maybe this issue was introduced when this one was fixed: https://github.com/c3js/c3/issues/650. As initially requested there, ideally we should have an option to reverse the order of the items in legend and tooltip. This would solve both cases.

legend: { reverse: true }

Please help. Thanks!

georgebuzoianu commented 3 years ago

I have the same issue, which affects our users. The stack in the chart looks good, but the order in tooltip and legend is reversed.

Order

Maybe this issue was introduced when this one was fixed: #650. As initially requested there, ideally we should have an option to reverse the order of the items in legend and tooltip. This would solve both cases.

legend: { reverse: true }

Please help. Thanks!

Hi! There is also possibile to actually define your own tooltip, even the html code of it. Maybe you can do some workaround for your issue. I've done an example a few years back https://codepen.io/georgebuzoianu/pen/djoMKR Maybe it helps