如何在c3js图表中只显示点击图例数据？

Question

I have a line chart with multiple data. Here is the sample of my chart.

Normally legend data are automatically show/hide if I click that legend on chart.

But after I adding a function in legend like this,

legend: {
        position: 'right',
        item: {
                onclick: function (d) { 
                            console.log("onclick", d); 
                            show(d); //when I click legend show some data
                }
            }
},

I don't get automatically show/hide if I click that legend on chart. But its not important for me.

Instead of this, I want to show only clicking legend data in chart. if I click data1 legend, I want to show only data1 line in chart and hide another data2 , data3 and data4 line in chart.

But, I don't have any idea how to do this. I'm very appreciate for any suggestion.

Answer 1

Now, I can solve my problem. Here is the code.

legend: {
        position: 'right',
        item: {
                onclick: function (d) { 
                        console.log("onclick", d); //data1
                        show(d); //when I click legend show some data
                        chart.hide();
                        chart.show(d);
                }
            }
},

First, I use chart.hide() . This function will hide all data on chart.

After that, I use chart.show(d) and it can show only data of user click because I add user clicking legend as an argument.

Note: show(d) is not related with chart.show(d) . Just a function that I create for my need.

Answer 2

For those of you stumbling across this like I did while looking for a way to focus on a single series from a legend click (I'm used to a double-click doing this), it seems c3 added the ability to use alt-click to focus on a single legend item. See the commit here . It turns out this works in billboard.js as well, which is a fork of c3 .