is there a way to make onClick hanlder on a bar on Nivo charts?

I’m new to Nivo.rocks, a react based charts library. Im trying to add a click handler to a bar to just console.log the data on that bar. currently the component comes with its own ‘tool tip’ that shows this data when you hover over a bar but i dont want that.

I’ve looked at the documentation but it doesnt show how to do this clearly, is it even possible? so far I’ve made a button that logs out the data from both of the bars

The main code is identical to this sandbox: https://codesandbox.io/s/nivo-0xy2m?file=/src/index.js

My button:

const clickHandler = () =>{
    console.log(
        `all the people that disagreed for ${data[0].statement} = ${data[0].disagree}`
    )
}

JavaScript
​x
 
const clickHandler = () =>{
    console.log(
        `all the people that disagreed for ${data[0].statement} = ${data[0].disagree}`
    )
}
​

Answer

You can use the onClick props :

onClick={(data) => {
    console.log(
    `all the people that ${data["id"]} for ${data["key"]} = ${data["value"]}`
    );
}}

JavaScript
 
onClick={(data) => {
    console.log(
    `all the people that ${data["id"]} for ${data["key"]} = ${data["value"]}`
    );
}}
​

sandbox example

Advertisement

Answer