@oliasoft-open-source/charts-library 2.5.3 → 2.5.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oliasoft-open-source/charts-library",
-  "version": "2.5.3",
+  "version": "2.5.4",
   "description": "React Chart Library (based on Chart.js and react-chart-js-2)",
   "main": "index.js",
   "files": [

package/release-notes.md

@@ -1,5 +1,9 @@
 # Charts Library Release Notes
 
+## 2.5.4
+
+- Fixed onPointHover event
+
 ## 2.5.3
 
 - Fixed datalabels position, set labels position inside chart area

package/src/components/line-chart/line-chart.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useReducer, useRef } from 'react';
+import React, { useEffect, useReducer, useRef, useState } from 'react';
 import {
   CategoryScale,
   Chart as ChartJS,
@@ -94,7 +94,7 @@ ChartJS.register(
 const LineChart = (props) => {
   setDefaultTheme();
   const chartRef = useRef(null);
-  let pointHover = false;
+  const [hoveredPoint, setHoveredPoint] = useState(null);
   const chart = getDefaultProps(props);
   const { options, testId } = chart;
   const { headerComponent, subheaderComponent, table } = props;
@@ -276,18 +276,19 @@ const LineChart = (props) => {
   };
 
   const onHover = (evt, hoveredItems, chartInstance) => {
-    if (pointHover && !hoveredItems?.length) {
-      pointHover = false;
-      if (interactions.onPointUnhover) {
-        interactions.onPointUnhover(evt);
-      }
+    if (!hoveredItems?.length && interactions.onPointUnhover && hoveredPoint) {
+      setHoveredPoint(null);
+      interactions.onPointUnhover(evt);
     }
-    if (!pointHover && hoveredItems?.length) {
-      pointHover = true;
-      if (interactions.onPointHover) {
-        const { index, datasetIndex } = hoveredItems[0];
-        const generatedDataset = generatedDatasets;
-        interactions.onPointHover(evt, datasetIndex, index, generatedDataset);
+
+    if (hoveredItems?.length && interactions.onPointHover) {
+      const { index, datasetIndex } = hoveredItems[0];
+      const dataset = generatedDatasets[datasetIndex];
+      const point = dataset?.data[index];
+
+      if (point && hoveredPoint !== point) {
+        setHoveredPoint(point);
+        interactions.onPointHover(evt, datasetIndex, index, generatedDatasets);
       }
     }
   };

package/src/components/line-chart/line-chart.stories.jsx

@@ -593,3 +593,22 @@ SquareAspectRatioFillContainer.decorators = [
     </div>
   ),
 ];
+
+export const OnPointHover = Template.bind({});
+OnPointHover.args = {
+  chart: {
+    ...basicChart,
+    options: {
+      ...basicChart.options,
+      interactions: {
+        onPointHover: (evt, datasetIndex, pointIndex, datasets) => {
+          console.log({ evt });
+          console.log(datasets[datasetIndex].data[pointIndex]);
+        },
+        onPointUnhover: () => {
+          console.log('No point hovered');
+        },
+      },
+    },
+  },
+};