Chart.Js条形图未在React App中显示Toolip

Question

i ran intro some trouble using chart.js in an electron wrapped react app. For some reason the tool tip on the created charts suddenly stopped working (it has already worked just fine). The chart seems to be drawn correctly, only the tooltip upon hovering is not working. The following code snippet defines the data of the chart in a react component:
Component

 class App extends Component {
  constructor() {
        super();
    this.state = {
    value: 'Click to Upload File',
    filepath: 'No File selected!',
        foundIssues: "",
        foundIssuesFixableWithUpdate: "",
        chartData:{
            labels: ['1', '2', '3', '4','55','6'],
            datasets:[
                                        {
                    label: 'Vulnerabilities',
                    data:[12,14,15,16,18,19],
                                        }
                                ]}}}

In the actual render function, the chart is implemented as following:

Render

 render() {
     return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
        </div>
         <div className ="Chart">
            <Bar data={this.state.chartData}/>
         </div>
   </div>
    );
  }

As ive already mentioned, the graph gets displayed correctly, as you can see in the following picture:

But unfortunately the tooltip on hovering does not work. Can anyone help me out?

Answer 1

I was able to narrow down the problem. My electron app config, in which i set the window to be borderless, seems to interfere with the tooltips.

This is the function which create the electron app:

electron.js

function createWindow() {
  mainWindow = new BrowserWindow({frame: false, titleBarStyle: 'hidden' ,width: 800, height: 1000, backgroundColor: '#FFFFFF' });
  mainWindow.loadURL(
    isDev
      ? "http://localhost:3000"
      : `file://${path.join(__dirname, "../build/index.html")}`
  );

After the changing the window frame option to the following, the tooltips are working again:

frame: false

So, for some reason, to have working tooltips with chartjs in an electron wrapped react app you need to enable the border window for the actual application.