OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Chart js external tooltip plugin doesn't reset when chart re-renders

  • Thread starter Thread starter negin shafaei
  • Start date Start date
N

negin shafaei

Guest
I have defined a plugin (externalTooltipHandler) for handling chart js tooltips,

Code:
// line chart config
plugins: {
          legend: false,
          tooltip: {
            enabled: false,
            // eslint-disable-next-line consistent-return
            external: (context) => {
              if (tooltipConfig?.enabled) {
                externalTooltipHandler(
                  context,
                  tooltipConfig?.axies,
                  tooltipConfig?.xFormatter,
                  tooltipConfig?.yFormatter
                );
              } else {
                return '';
              }
            },
          },
        },

I also render this chart based on day, month, year. each time I touch some point on chart it displays my custom tooltips for x/y axis, and each time I change the date from day to any other value this chart re renders based on new datasets. The issue here is that if I touch the chart and tooltips shows and right away change the date value so it renders for example week data, tooltip doesn't go away until I click on chart another time so it updates its value.

Code:
  {stockHistory[inscode] && (
          <LineChart
            datasetsConfig={datasetsConfig}
            tooltipConfig={tooltipConfig}
            xTicksConfig={xTicksConfig}
            yTicksConfig={yTicksConfig}
            plugins={plugins}
          />
        )}

Code:
// Chart config
  const datasetsConfig = useMemo(() => {
    return {
      labels: stockHistory[inscode]?.dt,
      datasets: [
        {
          data: stockHistory[inscode]?.v,
          borderColor:
            stockHistory[inscode]?.changePer >= 0 ? '#9DD199' : '#FFA8A8',
          borderWidth: 2,
          lineTension: 0.1,

          pointRadius: 5,
          pointHoverRadius: 6,
          pointBackgroundColor: 'transparent',
          pointHoverBackgroundColor: '#326DF6',
          pointHoverBorderWidth: 4,
          pointHoverBorderColor: '#95BEFF',
          pointBorderWidth: 0,
          pointHitRadius: 100,
        },
      ],
    };
  }, [inscode, stockHistory]);
  // Chart config

Code:
export const tooltipConfig = {
  enabled: true,
  axies: 'both',
  xFormatter: formatDateTime,
  yFormatter: persianCurrency,
};

<p>I have defined a plugin (externalTooltipHandler) for handling chart js tooltips,</p>
<pre><code>// line chart config
plugins: {
legend: false,
tooltip: {
enabled: false,
// eslint-disable-next-line consistent-return
external: (context) => {
if (tooltipConfig?.enabled) {
externalTooltipHandler(
context,
tooltipConfig?.axies,
tooltipConfig?.xFormatter,
tooltipConfig?.yFormatter
);
} else {
return '';
}
},
},
},
</code></pre>
<p>I also render this chart based on day, month, year. each time I touch some point on chart it displays my custom tooltips for x/y axis, and each time I change the date from day to any other value this chart re renders based on new datasets.
The issue here is that if I touch the chart and tooltips shows and right away change the date value so it renders for example week data, tooltip doesn't go away until I click on chart another time so it updates its value.</p>
<pre><code> {stockHistory[inscode] && (
<LineChart
datasetsConfig={datasetsConfig}
tooltipConfig={tooltipConfig}
xTicksConfig={xTicksConfig}
yTicksConfig={yTicksConfig}
plugins={plugins}
/>
)}
</code></pre>
<pre><code>// Chart config
const datasetsConfig = useMemo(() => {
return {
labels: stockHistory[inscode]?.dt,
datasets: [
{
data: stockHistory[inscode]?.v,
borderColor:
stockHistory[inscode]?.changePer >= 0 ? '#9DD199' : '#FFA8A8',
borderWidth: 2,
lineTension: 0.1,

pointRadius: 5,
pointHoverRadius: 6,
pointBackgroundColor: 'transparent',
pointHoverBackgroundColor: '#326DF6',
pointHoverBorderWidth: 4,
pointHoverBorderColor: '#95BEFF',
pointBorderWidth: 0,
pointHitRadius: 100,
},
],
};
}, [inscode, stockHistory]);
// Chart config
</code></pre>
<pre><code>
export const tooltipConfig = {
enabled: true,
axies: 'both',
xFormatter: formatDateTime,
yFormatter: persianCurrency,
};
</code></pre>
 

Latest posts

Top