Is it possible to add context menu on the data point when user does a right click on the mouse?

[darewreck54]

Hi,

I'm trying to enable the ability to right click on a data point on the chart. It seems to implement this feature two things need to happen:

1. Add a listener for the right click even "context menu" event. l looked at double click handler implementation #1952 where they added a listener for the double click event. I'm assuming that you would do that same.

2. Once there is a hook for it, I can then get the x and y coordinate and overlay a custom dev menu.

Question:

1. Is this the best approach for this or is there any easier way?
2. Is there a way to extend c3 vs modifying the original code base. I took a look at https://github.com/c3js/c3/releases/tag/0.3.0 and it's not really clear what I would do.

Would i just do something like this:

c3.chart.internal.generateEventRectsForSingleX = (eventRectEnter) => {
       const $$ = this, d3 = $$.d3, config = $$.config;
       eventRectEnter.append("rect")
           .attr("class", $$.classEvent.bind($$))
           .style("cursor", config.data_selection_enabled && config.data_selection_grouped ? "pointer" : null)
           .on('mouseover', function (d) {
               ....
           })
           .on('mouseout', function (d) {
              ....
           })
           .on('mousemove', function (d) {
             ...
           })
           .on('click', function (d) {
             ...
           })
           .on('contextmenu', function (d) {
              < Add Logic for call back to render the menu >
           })
           .call(
               config.data_selection_draggable && $$.drag ? (
                   d3.behavior.drag().origin(Object)
                       .on('drag', function () { $$.drag(d3.mouse(this)); })
                       .on('dragstart', function () { $$.dragstart(d3.mouse(this)); })
                       .on('dragend', function () { $$.dragend(); })
               ) : function () {}
           );
     };

3. I'm also doing this in typescript so i'm having issue with the first line since none of these are defined in the scope of my class and not sure how I would keep the underlying implementation but extend it.

const $$ = this, d3 = $$.d3, config = $$.config;

Thanks,
Derek

[panthony]

Hi,

The issue queue is to be used for reporting defects and problems with C3.js, in addition to feature requests and ideas.

It is not a catch-all support forum.

For general support enquiries, please use the Google Group at https://groups.google.com/forum/#!forum/c3js.

All questions involving the interplay between C3.js and any other library (such as AngularJS) should be posted there first!

Thank you !