C3: How can I drag the tooltip on mobile?

[Huc91]

On desktop is very clever and good that you can just hover to change the point in the chart that will display information on the tooltip. How can I achieve the same on mobile? Tapping on the chart is not so comfortable, especially if you have a lot of points, is there a way to drag or "slide" on the chart to do the same as hover do on desktop? I searched all the web, didn't find a solution. Could you help me? I love this library.

EDIT:
Added a visual example of what I mean:

[netil]

C3 isn't mobile friendly. To implement showing tooltip on touchmove drag, you need to bind event manually.

I made a simple example, checkout on mobile(or mobile mode from your desktop browser)

• http://output.jsbin.com/satecu

    var element = document.querySelector("#chart")
    var chart = c3.generate({
        "bindto": element,
        "data": {
            "type": "line",
            "x": "x",
            "columns": [
                ["x", "18-24", "25-34", "35-44", "45-54", "65+"],
                ["data", 22, 25, 20, 18, 15]
            ]
        },
        "axis": {
            "x": {
                "type": "category"
            }
        },
        tooltip: {
            position: function() {
                // x and y coordination are taken from touch event
                return {
                    top: touchY,
                    left: touchX
                };
            }
        }
    });

    // bind touchmove event
    d3.select(element)
        .select(".c3-event-rects")
        .on("touchmove", function() {
            var $$ = chart.internal;
            var touch = d3.event.changedTouches[0];

            // coordinate value used for tooltip position
            touchY = touch.clientY;
            touchX = touch.clientX;

            var $rect = document.elementFromPoint(touchX, touchY);
            var className;

            if ($rect && (className = $rect.getAttribute("class"))) {
                // get the current rect area index
                var index = ~~className.match(/\d+$/);

                // get the data according index
                var selectedData = $$.filterTargetsToShow($$.data.targets).map(function(t) {
                    return $$.addName($$.getValueOnIndex(t.values, index));
                });

                $$.showTooltip(selectedData, $rect);
            }
        });

• JS Bin: https://jsbin.com/satecu/edit?html,js,output

[Huc91]

Hey netil, thanks for you're answer and you're time. I made an animation to explain my self, I looked at you're example but it's not what I would like to do, but maybe is a good starting point.

[netil]

Here is the implementation.

• http://output.jsbin.com/satecu/5/

When touch drags happens, it shows the grid line, change point style and show tooltip.

• Editable code: https://jsbin.com/satecu/5/edit?html,js,output

[Huc91]

You're just amazing. Thanks for your help, you made my day. I'll dive into your code and ubderstand It. I hope this will be a standard feature of this library.

[netil]

@Huc91, I'm glad that helped.
I'll try fork and start new project based on tha latest version of C3.js, due to the discontinuing situation of the project.

And mobile friendly feature will be implemented on that version. Hope to see you on there.

[Huc91]

@netil that's interesting, I'll follow up!

[Huc91]

@netil
Hey I add a feature to your code. The expanded circle wasn't working correctly when the drag happens. Now it works like a charm.
The implementation:
https://jsbin.com/qedohod/edit?html,js,output

The code:

//Code added
var strCircle=".c3-circle-"
var strIndex= index.toString();
var currentCircle=strCircle.concat(strIndex);
$(".c3-circle").removeClass("_expanded_");
$(currentCircle).addClass("_expanded_");