C3: Disable legend clicking option

[BenjaminRH]

Clicking the legends to show or hide the data in the graph is great -- mostly. It's terrible when there's just one, for example. It would be great if there was an option to disable that when there's only one.

[IslamAzab]

I had to use the 'Hide Legend' option. It's not the best thing to do, but assuming that the legend in such cases is not that important it was fine by me. http://c3js.org/samples/options_legend.html

[BenjaminRH]

Thanks! I noticed that, but unfortunately I needed to display the legend.

[masayuki0812]

Hi, please try legend.item.onclick = function () {}. Actually, an option to disable seems natural, but this solution can work.

[masayuki0812]

It seems working, so please let me close.

[artemisclyde]

@masayuki0812 your solution overwrites the onclick function, but I still think it's misleading that the user can click the legend and the cursor changes on hover. An option to disable the onclick for legends would be great

[romain-gilliotte]

IMHO this is still a problem.
A workaround, is to use CSS to hide the button

.c3-legend-item {
  display: none;
}

[Hypersapien]

This would be better

    .c3-legend-item {
        cursor:default !important;
    }

[ravithumar]

.c3-legend-item
{
pointer-events: none;
}

[jeffreycastro]

Ended up doing a combination of the comments. Hovering on the legend still works, and clicking wont do anything, as well as the cursor pointer.

chart init:

c3.generate({
  ...
  legend: {
    item: { onclick: function () {} }
  }
});  

css:

.c3-legend-item {
  cursor:default !important;
}