Tooltip is showing odd behaviour after hover out also showing the same

[spatil77937]

Code: Select all

import React from "react";
import { render } from "react-dom";
import { Grid } from "@material-ui/core";
import $ from "zeptojs";
// Import Highcharts
import Highcharts from "highcharts/highstock";
import HighchartsReact from "highcharts-react-official";
import { ChartWrapper } from "components";
import { useTheme } from "@material-ui/core/styles";
(function (H) {
  H.Pointer.prototype.reset = function () {
    return undefined;
  };

  /**
   * Highlight a point by showing tooltip, setting hover state and draw crosshair
   */
  H.Point.prototype.highlight = function (event) {
    event = this.series.chart.pointer.normalize(event);
    this.onMouseOver(); // Show the hover marker
    this.series.chart.tooltip.refresh(this); // Show the tooltip
    this.series.chart.xAxis[0].drawCrosshair(event, this); // Show the crosshair
  };

  H.syncExtremes = function (e) {
    var thisChart = this.chart;

    if (e.trigger !== "syncExtremes") {
      // Prevent feedback loop
      Highcharts.each(Highcharts.charts, function (chart) {
        if (chart && chart !== thisChart) {
          if (chart.xAxis[0].setExtremes) {
            // It is null while updating
            chart.xAxis[0].setExtremes(e.min, e.max, undefined, false, {
              trigger: "syncExtremes",
            });
          }
        }
      });
    }
  };
})(Highcharts);

function SeaTrialReusable({
  AutologsPowerDeviationData,
  AutologsRPMDeviationData,
  AutologsFOC24DeviationData,
  AutologsSFOCDeviationData,
  dateAuto,
}) {
  const theme = useTheme();
  const options = {
    chart: {
      height: "140",
      backgroundColor: theme.palette.type === "light" ? "white" : "black",
      //backgroundColor: theme.palette.background.paper,
      type: "column",
      zoomType: "x",
      panning: true,
      panKey: "shift",
    },
    title: {
      text: "Corrected Deviation from Model/Shop Test (Auto Logs)",
      style: {
        color: theme.palette.text.secondary,
      },
    },
    credits: {
      enabled: false,
    },
    xAxis: {
      visible: false,
      crosshair: true,
      title: { enabled: false },
      labels: {
        style: {
          color: theme.palette.text.secondary,
        },
      },
      // type: "datetime",
      categories: dateAuto,
      tickWidth: 0,
      tickLength: 0,
      events: {
        setExtremes: function (e) {
          Highcharts.syncExtremes(e);
        },
      },
    },
    yAxis: {
      title: {
        text: "% Power Deviation",
        style: {
          color: theme.palette.text.secondary,
        },
      },
      labels: {
        formatter: function () {
          return this.value;
        },
        style: {
          color: theme.palette.text.secondary,
        },
      },
    },
    legend: { enabled: false },
    marker: { enabled: false },
    plotOptions: {
      column: {
        stacking: "normal",
        lineColor: "#666666",
        lineWidth: 1,
      },
    },
    tooltip: {
      enabled: true,
      useHTML: true,
      shared: true,
      //borderRadius: 3,
      //shape: "rectangle",
      shadow: false,
      //padding: 20
    },
    series: [
      {
        type: "line",
        name: "Power(%)",
        data: AutologsPowerDeviationData,
        marker: { enabled: false },
        color: "red",
      },
    ],
  };
  const options1 = {
    chart: {
      height: "140",
      backgroundColor: theme.palette.type === "light" ? "white" : "black",
      //backgroundColor: theme.palette.background.paper,
      type: "column",
      zoomType: "x",
      panning: true,
      panKey: "shift",
    },
    title: {
      text: null,
    },
    credits: {
      enabled: false,
    },
    xAxis: {
      visible: false,
      title: { enabled: false },
      labels: {
        style: {
          color: theme.palette.text.secondary,
        },
      },
      crosshair: true,
      // type: "datetime",
      categories: dateAuto,
      tickWidth: 0,
      tickLength: 0,
      events: {
        setExtremes: function (e) {
          Highcharts.syncExtremes(e);
        },
      },
    },
    yAxis: {
      title: {
        text: "% RPM Deviation",
        style: {
          color: theme.palette.text.secondary,
        },
      },
      labels: {
        formatter: function () {
          return this.value;
        },
        style: {
          color: theme.palette.text.secondary,
        },
      },
    },

    legend: { enabled: false },
    marker: { enabled: false },
    plotOptions: {
      column: {
        stacking: "normal",
        lineColor: "#666666",
        lineWidth: 1,
      },
    },
    tooltip: {
      enabled: true,
      useHTML: true,
      shared: true,
      //borderRadius: 3,
      //shape: "rectangle",
      shadow: false,
      //padding: 20
    },
    series: [
      {
        type: "line",
        name: "RPM (%)",
        data: AutologsRPMDeviationData,
        marker: { enabled: false },
        color: "green",
      },
    ],
  };
  const options2 = {
    chart: {
      height: "140",
      backgroundColor: theme.palette.type === "light" ? "white" : "black",
      //backgroundColor: theme.palette.background.paper,
      type: "column",
      zoomType: "x",
      panning: true,
      panKey: "shift",
    },
    title: {
      text: null,
    },
    credits: {
      enabled: false,
    },
    xAxis: {
      visible: false,
      title: { enabled: false },
      labels: {
        style: {
          color: theme.palette.text.secondary,
        },
      },
      crosshair: true,
      // type: "datetime",
      categories: dateAuto,
      tickWidth: 0,
      tickLength: 0,
      events: {
        setExtremes: function (e) {
          Highcharts.syncExtremes(e);
        },
      },
    },
    yAxis: {
      title: {
        text: "% FOC/24Hrs Deviation",
        style: {
          color: theme.palette.text.secondary,
        },
      },
      labels: {
        formatter: function () {
          return this.value;
        },
        style: {
          color: theme.palette.text.secondary,
        },
      },
    },
    legend: { enabled: false },
    marker: { enabled: false },
    plotOptions: {
      column: {
        stacking: "normal",
        lineColor: "#666666",
        lineWidth: 1,
      },
    },
    tooltip: {
      enabled: true,
      useHTML: true,
      shared: true,
      // borderRadius: 3,
      // shape: "rectangle",
      shadow: false,
      // padding: 20
    },
    series: [
      {
        type: "line",
        name: "FOC24 (%)",
        data: AutologsFOC24DeviationData,
        marker: { enabled: false },
        color: "orange",
      },
    ],
  };
  const options3 = {
    chart: {
      height: "140",
      backgroundColor: theme.palette.type === "light" ? "white" : "black",
      //backgroundColor: theme.palette.background.paper,
      type: "column",
      zoomType: "x",
      panning: true,
      panKey: "shift",
    },
    title: {
      text: null,
    },
    credits: {
      enabled: false,
    },
    xAxis: {
      visible: true,
      crosshair: true,
      title: { enabled: false },
      labels: {
        style: {
          color: theme.palette.text.secondary,
        },
      },
      // type: "datetime",
      categories: dateAuto,
      tickWidth: 0,
      tickLength: 0,
      events: {
        setExtremes: function (e) {
          Highcharts.syncExtremes(e);
        },
      },
    },
    yAxis: {
      title: {
        text: "% SFOC ISO Deviation",
        style: {
          color: theme.palette.text.secondary,
        },
      },
      labels: {
        formatter: function () {
          return this.value;
        },
        style: {
          color: theme.palette.text.secondary,
        },
      },
    },
    legend: { enabled: false },
    marker: { enabled: false },
    plotOptions: {
      column: {
        stacking: "normal",
        lineColor: "#666666",
        lineWidth: 1,
      },
    },
    tooltip: {
      enabled: true,
      useHTML: true,
      shared: true,
      // borderRadius: 3,
      //shape: "rectangle",
      shadow: false,
      // padding: 20
    },
    series: [
      {
        type: "line",
        name: "SFOC (%)",
        data: AutologsSFOCDeviationData,
        marker: { enabled: false },
      },
    ],
  };

  ["mousemove", "touchmove", "touchstart"].forEach(function (eventType) {
    $("#container");
    window.addEventListener(eventType, (e) => {
      var chart, point, i, event;
      for (i = 0; i < Highcharts.charts.length; i = i + 1) {
        chart = Highcharts.charts[i];
        if (chart) {
          // Find coordinates within the chart
          event = chart.pointer.normalize(e);
          // Get the hovered point
          chart.series.forEach((series) => {
            const point = series.searchPoint(event, true);
            if (point) {
              try {
                point.highlight(e);
              } catch (err) {
                // pass;
              }
            }
          });
        }
      }
    });
  });

  return (
    <div
      id="container"
      style={{
        borderColor: theme.palette.type === "light" ? "grey" : "#ffffff",
        borderWidth: 1,
      }}
    >
      <Grid item lg={12}>
        {/* <ChartWrapper
            height={570}
            title={"Corrected Deviation from Model/Shop Test (Telemetry Logs)"}
          >    */}
        <Grid item lg={12}>
          <HighchartsReact
            constructorType={"chart"}
            highcharts={Highcharts}
            options={options}
          />
        </Grid>
        <Grid item lg={12}>
          <HighchartsReact
            constructorType={"chart"}
            highcharts={Highcharts}
            options={options1}
          />
        </Grid>
        <Grid item lg={12}>
          <HighchartsReact
            constructorType={"chart"}
            highcharts={Highcharts}
            options={options2}
          />
        </Grid>
        <Grid item lg={12}>
          <HighchartsReact
            constructorType={"chart"}
            highcharts={Highcharts}
            options={options3}
          />
        </Grid>
        {/* </ChartWrapper> */}
      </Grid>
    </div>
  );
}
export default SeaTrialReusable;

[mateusz.b]

Hi,

Thanks for contacting us with your issue.
Could you try to reproduce your issue in simplified working demo? You can start here: https://codesandbox.io/s/highcharts-react-demo-e1ue3

Best regards!

[spatil77937]

///please check the reproduced bug...

import React from "react";
import { render } from "react-dom";
// Import Highcharts
import Highcharts from "highcharts/highstock";
import HighchartsReact from "highcharts-react-official";
(function (H) {
H.Pointer.prototype.reset = function () {
return undefined;
};

/**
* Highlight a point by showing tooltip, setting hover state and draw crosshair
*/
H.Point.prototype.highlight = function (event) {
event = this.series.chart.pointer.normalize(event);
this.onMouseOver(); // Show the hover marker
this.series.chart.tooltip.refresh(this); // Show the tooltip
this.series.chart.xAxis[0].drawCrosshair(event, this); // Show the crosshair
};

H.syncExtremes = function (e) {
var thisChart = this.chart;

if (e.trigger !== "syncExtremes") {
// Prevent feedback loop
Highcharts.each(Highcharts.charts, function (chart) {
if (chart && chart !== thisChart) {
if (chart.xAxis[0].setExtremes) {
// It is null while updating
chart.xAxis[0].setExtremes(e.min, e.max, undefined, false, {
trigger: "syncExtremes",
});
}
}
});
}
};
})(Highcharts);

class App extends React.Component {
constructor(props) {
super(props);

this.state = {
options: {
chart: {
height: "37.8%",
// backgroundColor: theme.palette.background.paper,
zoomType: "x",
panning: true,
panKey: "shift",
},
xAxis: {
visible: false,
crosshair: true,
title: { enabled: false },
type: "datetime",
tickWidth: 0,
tickLength: 0,
events: {
setExtremes: function (e) {
Highcharts.syncExtremes(e);
},
},
},
series: [
{
data: [1, 2, 3]
},

],
},
options1: {
chart: {
height: "37.8%",
// backgroundColor: theme.palette.background.paper,
zoomType: "x",
panning: true,
panKey: "shift",
},
xAxis: {
//visible: false,
title: { enabled: false },
crosshair: true,
type: "datetime",
tickWidth: 0,
tickLength: 0,
events: {
setExtremes: function (e) {
Highcharts.syncExtremes(e);
},
},
},
series: [
{
data: [1, 2, 3]
},
],
}
};

["mousemove", "touchmove", "touchstart"].forEach(function (eventType) {
document.getElementById("container");
window.addEventListener(eventType, (e) => {
var chart, point, i, event;
for (i = 0; i < Highcharts.charts.length; i = i + 1) {
chart = Highcharts.charts;
if (chart) {
// Find coordinates within the chart
event = chart.pointer.normalize(e);
// Get the hovered point
chart.series.forEach((series) => {
const point = series.searchPoint(event, true);
if (point) {
try {
point.highlight(e);
} catch (err) {
// pass;
}
}
});
}
}
});
});
}



render() {
return (
<div id="container">
<HighchartsReact
highcharts={Highcharts}
options={this.state.options}
/>
<HighchartsReact
highcharts={Highcharts}
options={this.state.options1}
/>
</div>
);
}
}

render(<App />, document.getElementById("root"));

[mateusz.b]

Hello,

It seems to me that adding event listener to window might be the cause of the issue. You should probably choose smaller element like container div or even specific chart area. I wish I could help more, but first I need you to provide me with simplified working demo, informations about the issue and results you want to achieve.

Feel free to ask any further questions.
Best regards!