I'm creating a redmine plugin that needs a chart, so I decided for billboard.js. The chart is drawn perfectly but the problem is that the events are not or not fully working such as

• hover the first legend item highlights both series

• click the first legend item toggles both series visbility

• hover the second legend item fades both series (see screenshot)

• click the second series has no effect (althouh cursor changes)

• tooltip is not working at all

  

  <% content_for :header_tags do %>
  <%= javascript_include_tag "d3.v4.min.js",:plugin => 'redmine_performance_charts'%>
  <%= javascript_include_tag"billboard.min.js", :plugin =>redmine_performance_charts'%>
  <%= stylesheet_link_tag "insight.min.css", :plugin => 'redmine_performance_charts' %>
  <script type="text/javascript">
      $(document).ready(function() {
          var chart = bb.generate({
              data: {
                  columns: [
                  ["data1", 300, 350, 300, 0, 0, 120],
                  ["data2", 130, 100, 140, 200, 150, 50]
                  ],
                  types: {
                  data1: "area-spline", // for ESM specify as: areaSpline()
                  data2: "area-spline", // for ESM specify as: areaSpline()
                  },
                  groups: [["data1","data2"]]
              },
              bindto: "#areaChart"
          });
      });
  </script>
  <% end %>
  
  <div id="areaChart"></div>