Tooltip missing when you hover mouse over a datapoint

[hrixhi]

When a mouse pointer hovers over any of the data points in a graph, it fails to display a tooltip. It's a weird issue consistent throughout all graphs I am using in my web app - piecharts, line charts, bar graphs, etc. Using React 16.

Also, there is a slight offset on where the hover occurs and where the tooltip displays (refer to image - the highlighted area was the position of the mouse when the tooltip showed up)

Works fine on mobile - when you click on a data point the tooltip shows up correctly.

Thanks for the help and making an awesome library otherwise!

[ankane]

Hey @hrixhi, I'm not sure how to reproduce. Can you put together a minimal reproducible example?

[hrixhi]

import 'chart.js' import React from 'react'; import { PieChart } from 'react-chartkick' import { Card } from 'reactstrap'

import { fetchGraphQL } from 'services/graphql/GraphQL';

export default class DashboardPieCharts extends React.Component< { [label: string]: any }, { [label: string]: any }> { constructor(props) { super(props) this.state = { chart1Data: [], chart2Data: [] } }

public componentDidMount() {
    fetchGraphQL(`
    query {
        event {
            totalAllocated(eventId:"${this.props.eventId}")
        }
    }
    `).then(res => {
        if (res !== undefined && res !== null) {
            if (res.event !== undefined && res.event !== null) {
                if (res.event.totalAllocated !== null && res.event.totalAllocated !== undefined) {
                    this.setState({
                        chart1Data: [
                            ['Capacity Remaining', Number(this.props.capacity) - Number(res.event.totalAllocated)],
                            ['Capacity Used', Number(res.event.totalAllocated)]
                        ],
                        chart2Data: [
                            ['Private Tickets Sold', Number(this.props.totalPrivate)],
                            ['Public Tickets Sold', Number(this.props.totalPublic)]
                        ]
                    })
                }
            }
        }
    })
}

public render() {

    if (this.state.loading) {
        return null
    }

    // Show only to hosts
    return <div>
        <Card>
            <p />
            <div className='big-split-768' style={{ width: '100%' }}>
                <div style={{ float: 'left', width: '50%', paddingLeft: '11%', paddingRight: '11%' }}>
                    <PieChart data={this.state.chart1Data} colors={['#e9ecef', '#cab793']}
                    />
                </div>
                <div style={{ float: 'right', width: '50%', paddingLeft: '11%', paddingRight: '11%' }}>
                    <PieChart data={this.state.chart2Data} colors={['#2b4162', '#439a86']}
                    />
                </div>
            </div>

            <div className='small-split-768'>
                <div style={{ paddingLeft: '11%', paddingRight: '11%' }}>
                    <PieChart data={this.state.chart1Data} colors={['#e9ecef', '#cab793']}
                    />
                </div>
                <p />
                <div style={{ paddingLeft: '11%', paddingRight: '11%' }}>
                    <PieChart data={this.state.chart2Data} colors={['#2b4162', '#439a86']}
                    />
                </div>
            </div>
            <p />
        </Card>
        <p><br /></p>
    </div>
}

}

[hrixhi]

This is the exact code I am using for the pie chart shown in my first comment. @ankane

[ankane]

Hey @hrixhi, unfortunately, that example isn't very minimal. Try to get it down to a single chart with no other dependencies besides Chart.js and React Chartkick.

[hrixhi]

So now I have made a react component that only uses this and am still experiencing the same issue. Not experiencing it on mobile, its perfectly fine on touch screen devices.

// imports import 'chart.js' import React from 'react'; import { PieChart } from 'react-chartkick'

// data const data = [['Promoter Tickets Sold', 5], ['General Tickets Sold', 6]]

// rendering this without any other divs <PieChart data={data} colors={['#e9ecef', '#cab793']} />

[ankane]

Hey @hrixhi, unfortunately, I'm unable to reproduce with that code. I'd recommend forking the library to try to debug it.

[ankane]

Cleaning up stale issues