CODEWITHSUNDEEP
javascriptchartstooltiptimelineapexcharts
PerpetuallyConfusedDev
PerpetuallyConfusedDev

Reputation: 21

ApexCharts - "opts.ctx.rangeBar.getTooltipValues is not a function"

I'm using ApexCharts to create a timeline chart that has multiple series and grouped rows. It's very similar to their example chart in their docs located here: https://apexcharts.com/javascript-chart-demos/timeline-charts/multiple-series-group-rows/

The problem I'm facing is in regards to their tooltip - hovering over any section of any bar does not display a tooltip and returns the error "opts.ctx.rangeBar.getTooltipValues is not a function" to the console. This is actually happening to me on their example page as well.

My current workaround is that I've created a custom tooltip function but it doesn't include all the data I need and I'm not sure where to pull that information. For example, I need the name of the current section of the bar to appear as the header of the tooltip but not sure how to do that using a custom method. The equivalent to this in their example would be seeing "George Washington" at the top of the tooltip when hovering over the George Washington section of the President bar.

I've tried this on multiple machines and the error persists. Any help or insight would be appreciated, thanks.

Upvotes: 2

Views: 327

Answers (1)

Agustín Tamayo Quiñones
Agustín Tamayo Quiñones

Reputation: 306

After seeing people's comments and doing a little research, I think this code will help you do what you need.

tooltip: {
            custom: function({ series, seriesIndex, dataPointIndex, w, y1, y2}) {
                const padTime = (time) => {
                    return String(time).padStart(2, '0');
                };
                const from = `${padTime(new Date(y1).getHours())}:${padTime(new Date(y1).getMinutes())}`;
                const to = `${padTime(new Date(y2).getHours())}:${padTime(new Date(y2).getMinutes())}`;
                return (
                    '<div class="apexcharts-tooltip-rangebar">' +
                    '<div> <span class="series-name" style="color:' + w.globals.colors[seriesIndex] + '">' +
                    (w.globals.seriesNames[seriesIndex] ? w.globals.seriesNames[seriesIndex] : '') +
                    '</span></div>' +
                    '<div> <span class="category">' +
                    w.globals.seriesX[seriesIndex][dataPointIndex] +
                    ' </span> <span class="value start-value">' +
                    from +
                    '</span> <span class="separator">-</span> <span class="value end-value">' +
                    to +
                    '</span></div>' +
                    '</div>'
                );

            }
        }

Upvotes: 0

Related Questions