codesuki / react-d3-components

D3 Components for React
http://codesuki.github.io/react-d3-components/example.html
MIT License
1.63k stars 206 forks source link

Tooltip doesn't appear in BarChart #132

Closed FRodrigues21 closed 6 years ago

FRodrigues21 commented 7 years ago

Hello, I'm trying to create a BarChart with tooltip activate but it isn't working for some reason.

The Barchart appears but the tooltip doesn't show on bar hoover. Here is the code:

import React, {
    Component
} from 'react';
import BarChart from 'react-d3-components/lib/BarChart';

export default class OpenIssuesGraph extends Component {

    constructor(props) {
        super(props);
        this.state = {
            list: [{
                label: 'Open Issues',
                values: [{
                    x: 'nothing',
                    y: 0
                }]
            }]
        }
    }

    componentDidMount() {
        this.fetchData();
    }

    fetchData() {
        fetch("urlgoeshere", {
            method: "GET"
        }).then(response => response.text()).then(json => {
            let tmp = [];
            const data = JSON.parse(json).rows;
            for (let row in data) {
                tmp.push({
                    x: data[row].abbrev,
                    y: parseInt(data[row].nrOpenIssues)
                })
            }
            let fill = [{
                label: 'Open Issues',
                values: tmp
            }];
            this.setState({
                list: fill
            });
        });
    }

    render() {
        var tooltip = function(x, y0, y, total) {
            return y.toString();
        };
        return <div > < BarChart data = {
            this.state.list
        }
        width = {
            800
        }
        height = {
            400
        }
        margin = {
            {
                top: 10,
                bottom: 50,
                left: 50,
                right: 10
            }
        }
        tooltipHtml = {
            tooltip
        }
        colorByLabel = {
            false
        }
        />,</div > ;
    }

}

Do I need to link some .js on the index.html or something!??!

Thanks in advance.

codesuki commented 7 years ago

I don't see anything obviously wrong with the code. Have you tried it in another browser? Can you check if the html is correct as in the screenshot? Can you try setting a breakpoint on the tooltip() function or even inside the tooltip in the library?

screen shot 2017-05-10 at 10 01 09
FRodrigues21 commented 7 years ago

The event does trigger and the html is being generated like the ss and I can even see it change on hoover, it's just the tooltip that doesn't appear :/ Well the problem is definitely on my side.

Thanks anyway.

codesuki commented 7 years ago

Sorry to hear that! Did you set some CSS? https://github.com/codesuki/react-d3-components/blob/master/example/style.css#L87-L95 Maybe the tool tip is just invisible.

FRodrigues21 commented 7 years ago

@codesuki Ahah that was exactly the problem xD Solved, thanks for the help and for developing the components.

codesuki commented 7 years ago

Good! Thank you :)