unable to click when horizontal bar value is 0 in RGraph

Question

I am using RGraph in my Angular 7 application.

while using horizontal bar graph i am unable to click when the bar value is zero.

i have tried tooltipsHotspotYonly: true and tooltipsHotspotXonly: true

Please let me know if anyone have answer for this.

Answer 1

The Bar chart has the tooltipsHotspotXOnly to facilitate this. The HBar has no such property though - so I've added one in - tooltipsHotspotYOnly. The replacement getShape() function is this:

//
// This function can be used to get the appropriate bar information (if any)
// 
// @param  e Event object
// @return   Appriate bar information (if any)
//
this.getShape = function (e)
{
    var mouseXY = RGraph.getMouseXY(e);

    //
    // Loop through the bars determining if the mouse is over a bar
    //
    for (var i=0,len=this.coords.length; i<len; i++) {

        var mouseX = mouseXY[0],  // In relation to the canvas
            mouseY = mouseXY[1],  // In relation to the canvas
            left   = this.coords[i][0],
            top    = this.coords[i][1],
            width  = this.coords[i][2],
            height = this.coords[i][3],
            idx    = i;



        // Recreate the path/rectangle so that it can be tested
        //  ** DO NOT STROKE OR FILL IT **
        if (properties.tooltipsHotspotYonly) {
            this.path(
                'b r % % % %',
                this.marginLeft, top, this.canvas.width - this.marginRight - this.marginLeft, height
            );
        } else {
            this.path(
                'b r % % % %',
                left,top,width,height
            );
        }

        if (this.context.isPointInPath(mouseX, mouseY)) {

            if (RGraph.parseTooltipText) {
                var tooltip = RGraph.parseTooltipText(properties.tooltips, i);
            }

            var indexes = RGraph.sequentialIndexToGrouped(idx, this.data);
            var group   = indexes[0];
            var index   = indexes[1];

            return {
                object: this,
                     x: left,
                     y: top,
                 width: width,
                height: height,
       sequentialIndex: idx,
               dataset: group,
                 index: index,
                 label:  properties.yaxisLabels && typeof  properties.yaxisLabels[group] === 'string' ?  properties.yaxisLabels[group] : null,
               tooltip: typeof tooltip === 'string' ? tooltip : null
            };
        }
    }
};

Now you can either:

1. If you're comfortable editing the HBar library, take the code here and replace the getShape() function in your RGraph.hbar.js file.

2. Download the updated library from here:

   https://www.rgraph.net/tests/canvas.hbar/RGraph.hbar.js

   (it will remain until the next version is available at least - at which point you can get the new HBar library from the standard RGraph download: https://www.rgraph.net/download.html#stable )

3. Wait until version 5.27 comes out and the tooltipsHotspotYOnly option it will be a part of RGraph (use the link above).