title: c3.js set onClick property in chart generated from another function
body: <p>My goal is to get 3 charts, with the most recently selected series in the first chart updating the second chart, and the most recently selected series in the second chart updating the third chart. </p>
  
  <p>I start by setting up 3 divs: </p>
  
  <pre><code>&lt;div id="chart1"&gt;&lt;/div&gt;
  &lt;div id="chart2"&gt;&lt;/div&gt;
  &lt;div id="chart3"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I then generate 3 charts like so (essentially the same, but with different detail levels in the source data): </p>
  
  <pre><code>var chart1 = c3.generate({
      bindto: document.getElementById('chart1'),
      data: {
          x: 'date',
          url: 'file1.csv'
      },
      axis: {
          x: {
              type: 'timeseries',
              tick: {
                  format: '%Y-%m-%d',
                  count: 8
              },
              label: "Date"
          },
          y: {
              label: "Y Label"
          }
      },
      // irrelevant options removed
      legend: {
          item: {
              onclick: (id) =&gt; {
                  chart1.toggle(id);
                  chart_options2.data.url = 'file2_'+ id +'.csv';
                  if(chart1.data.shown(id).length == 1 ){
                      generateChart2(id);
                  }
              }
          }
      }
  });
  
  var chart2 = c3.generate({
      bindto: document.getElementById('chart2'),
  // etc.
  
  var chart3 = c3.generate({
      bindto: document.getElementById('chart3'),
  // etc.
  </code></pre>
  
  <p>The function <code>generateChart2()</code> will use the <code>id</code> of the selected series in chart1 to generate a new chart in the place of chart2. Likewise I have a similar function <code>generateChart3()</code> which will use the <code>id</code> of the selected series in chart2 to generate a new chart in the place of chart3. These functions look like this: </p>
  
  <pre><code>    function generateChart2(id) {
          c3.generate(chart_options2);
      };
  </code></pre>
  
  <p>With <code>chart_options</code> being identical to the original set up options, except for the updated file source (see <code>chart_options2.data.url = 'file2_'+ id +'.csv';</code> above). </p>
  
  <p>Initially, these all seem to work ok. The problem arises when a new chart2 is created using the <code>generateChart2()</code> function, and the <code>onclick</code> property no longer seems to work for certain things. Testing with <code>console.log</code>, the <code>onclick</code> still seems to be called, and I can update the chart options var, but I can't use any of the other commands: </p>
  
  <pre><code>                onclick: function (id) {
                      console.log('test'); // returns 'test'
                      chart2.toggle(id); // doesn't work
                      chart_options3.data.url = 'file3_'+ id +'.csv'; // works
                      if(chart2.data.shown(id).length == 1 ){
                          generateChart3(id); // doesn't work
                      }
  </code></pre>
  
  <p>I <em>suspect</em> it has something to do with the namespace, or how I'm using the chart names, or how I'm calling the function. I've spent a couple of days looking at this problem, but all my research hasn't really made it much clearer which direction I should be looking in. </p>
  
  <p><strong>EDIT:</strong> I found a workaround, which makes sense for my use case, but doesn't help me learn what I was doing wrong. Now instead of reusing <code>c3.generate</code> to dynamically create a new chart every time a series is selected in the previous chart, I am using <code>unload()</code> and <code>load()</code>. This seems to be working well, but I would very much appreciate an explanation or clarification of what I was doing wrong the first time. Updated code: </p>
  
  <pre><code>            onclick: function (id) {
                  chart1.toggle(id);
                  if(chart1.data.shown(id).length == 1 ){
                      chart2.unload();
                      setTimeout(function () {
                          chart2.load({
                              url: 'file2_'+ id +'.csv'
                          });
                      }, 1000);
                  }
              }
  </code></pre>