I am using a React library to implement a bar chart and what I am trying to achieve is to show the tooltip only when I click on a series. I am trying to achieve this by toggling between display block and none, but currently, the tooltip is not showing up. What am I doing wrong here? Here is my code:
import React, { useState } from 'react';
import * as ReactDOM from 'react-dom';
import {
Chart,
ChartTooltip,
ChartSeries,
ChartSeriesItem,
ChartSeriesItemTooltip,
} from '@progress/kendo-react-charts';
import 'hammerjs';
const seriesData = [1, 2, 3];
const ChartContainer = () => {
let [isVisible] = React.useState('none');
return (
<Chart
onSeriesClick={(e) => {
// let positionX = e.originalEvent.x.client;
// let positionY = e.originalEvent.y.client;
// let value = e.value;
// alert(positionX, positionY, value);
let positionX = e.nativeEvent.x;
let positionY = e.nativeEvent.y;
let value = e.value;
let myTooltip = document.querySelector('.k-chart-tooltip-wrapper');
console.log(myTooltip);
myTooltip.style.display = 'block' != 'none';
}}
>
<ChartTooltip className="my-tooltip" />
<ChartSeries>
<ChartSeriesItem data={seriesData} />
<ChartSeriesItem data={seriesData}>
<ChartSeriesItemTooltip background="green" />
</ChartSeriesItem>
</ChartSeries>
</Chart>
);
};
ReactDOM.render(<ChartContainer />, document.querySelector('my-app'));
and here is an example that can be tested:
https://stackblitz.com/edit/react-ahypjv-xtf7nr?file=app/main.jsx
This won't work:
myTooltip.style.display = 'block' != 'none';
'block' != 'none' is a comparison that produces a boolean value, so this is equivalent to:
myTooltip.style.display = true;
It looks almost sensible, but as you know, that's not how the display CSS property works.
If you're trying to toggle it, just check the current value and change it to its opposite:
myTooltip.style.display = myTooltip.style.display == 'block' ? 'none' : 'block';
It might be nice to introduce a CSS class for it, for example .tooltip-visible, so that you can write:
myTooltip.classList.toggle('tooltip-visible');
The property display: none prevents an element from being included in the DOM during the render phase. You either need to change to visibility:hide (not ideal for tooltips) or use React to inject the element.
<Chart
onSeriesClick={()=>{this.setState({tooltipVisible:true}}>
{ this.state.tooltipVisible ? <Tooltip /> : <></> }
</Chart>
Managing the state of tooltips could become cumbersome if you have many of them, so you might consider a library to handle it for you such as Bootstrap.
To both hide an element and remove it from the document layout, set the
displayproperty tononeinstead of usingvisibility. -"visibility - CSS: Cascading Style Sheets | MDN"
set a state with the value "none"
const [display, setDisplay] = useState("none")
Put an onClick envent on the button that calls to the followin function:
function toggleDisplay() {
if (display === "none") {
setDisplay("block")
else {
setDisplay("none")
}
}
this way when your button is clicked you toggle that state between the values you need.
Then in the element you way to set the display porperty add the style prop and set your display state as the display CSS value:
<MyComponent style={{display: display}} />