Add Non-Hovered State Styling for Chart Data Points

[ZahidChandio]

When hovering over a specific data point (e.g., a circle) in a chart, it would be helpful to have the option to style or adjust the visibility of non-hovered data points. This feature would allow developers to emphasize the hovered point while dimming or styling the remaining points, improving focus and user interaction.

I've tried achieving this effect using dataPointMouseEnter and dataPointMouseLeave events. While I can apply new colors to non-hovered points during hover, this approach results in an unintended re-render, which causes the tooltip to misbehave.

const options: ApexOptions = {
    chart: {
      id: id,
      type: 'radialBar',
      parentHeightOffset: 0,
      events: {
        dataPointMouseEnter(e, chart, options) {
          const dataIndex = options.dataPointIndex;
          const newColors = [...colors];
          newColors.fill('#d2d5db', 0, dataIndex);
          newColors.fill('#d2d5db', dataIndex + 1, newColors.length);
          setColors(newColors);
        },
        dataPointMouseLeave(e, chart, options) {
          setColors(initialColors);
        },
        mouseLeave(e, chart, options) {
          setColors(initialColors);
        }
      }
    },
    labels: myLabelsHere,
    legend: {
      show: false
    },
    stroke: {
      lineCap: 'round'
    },
    tooltip: {
      enabled: true,
      theme: 'dark',
      style: {
        fontSize: '12px',
        fontFamily: 'Inter, sans-serif'
      },
      custom: function ({ series, seriesIndex, dataPointIndex, w }) {
        const { globals } = w;
        const { seriesPercent } = globals;
        return (
          '<div class="apexcharts" style="text-align: center; padding: 5px 8px; color: white; font-size: 12px; font-weight: 500;">' +
          parseInt(seriesPercent[seriesIndex])?.toFixed(0) +
          '%</div>'
        );
      }
    },
    states: {
      hover: {
        filter: {
          type: 'none',
          value: 1
        }
      }
    },
    plotOptions: {
      radialBar: {
        hollow: {
          size: '35%'
        },
        track: {
          background: '#f2f4f7'
        },
        dataLabels: {
          name: {
            offsetY: 0,
            color: '#475467'
          }
        }
      }
    },
    colors: colors
  };

This is how tooltip behaves with the current code.

Intended behavior

Chart when there is no state change.

I am using Next.js 14.0.4.

[ZahidChandio]

@junedchhipa @brianlagunas can you please take a look into this? I need this feature. Thanks.

[ZahidChandio]

@junedchhipa @brianlagunas, could you please verify if this is possible or not? Please let me know if you have any questions regarding this feature. Thanks.