In c3js, how can I fire a click event on a legend item?

Question

I'm using c3js's stacked area chart. When you click on a legend item, it toggles the area for that item in the chart.

I'd like to kick off this toggle functionality in a different html element outside of the c3 chart. So I'd like to fire the click event for the legend item.

Now I know you can already subscribe to the legend item's click event

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

But I'd like to fire the event, not listen for when it happens.

I noticed that the legend item is an SVG <g> node that looks like this:

<g class="c3-legend-item c3-legend-item-MyItem"...>

So I tried using jQuery to click it like so

$(".c3-legend-item_myItem").click()

But that didn't seem to work.

Any thoughts?

Edit I found a solution in this How to invoke "click" event programmatically in d3?

Turns out you can't fire a click event on d3 using JQuery the way I'm doing it. I used the answer that created a jQuery.d3Click() function. The other solution which uses d3 to select the element and click didn't work for me because there were other event listeners and calling the onclick function directly would break some assumptions in the c3 code.

@Robert I'm not sure I understand your suggestion or if you understand my problem. c3 is calling a function when a click is registered. I don't know what the function is but I want to call it. Not sure how your suggestion helps. Please clarify for me. Thanks — kane, Mar 25 '16 at 17:44
I found my answer in this http://stackoverflow.com/questions/9063383/how-to-invoke-click-event-programmatically-in-d3 — kane, Mar 25 '16 at 18:01

In c3js, how can I fire a click event on a legend item?

0 Answers0