diff --git a/src/js/components/Overview/Chart.tsx b/src/js/components/Overview/Chart.tsx index 102842d8..91b471a9 100644 --- a/src/js/components/Overview/Chart.tsx +++ b/src/js/components/Overview/Chart.tsx @@ -9,6 +9,7 @@ import { useTranslationFn } from '@/hooks'; import type { ChartData } from '@/types/data'; import type { ChartConfig } from '@/types/chartConfig'; import { CHART_TYPE_BAR, CHART_TYPE_CHOROPLETH, CHART_TYPE_HISTOGRAM, CHART_TYPE_PIE } from '@/types/chartConfig'; +import { noop } from '@/utils/chart'; interface BarChartEvent { activePayload: Array<{ payload: { x: string; id?: string } }>; @@ -48,7 +49,12 @@ const Chart = memo(({ chartConfig, data, units, id, isClickable }: ChartProps) = units={units} preFilter={removeMissing} dataMap={translateMap} - {...(isClickable ? { onChartClick: barChartOnChartClickHandler } : {})} + {...(isClickable + ? { + onChartClick: barChartOnChartClickHandler, + onClick: noop, + } + : {})} // The noop is to provide the cursor: pointer style as onChartClick doesn't provide the behavior /> ); case CHART_TYPE_HISTOGRAM: @@ -59,7 +65,12 @@ const Chart = memo(({ chartConfig, data, units, id, isClickable }: ChartProps) = data={data} preFilter={removeMissing} dataMap={translateMap} - {...(isClickable ? { onChartClick: barChartOnChartClickHandler } : {})} + {...(isClickable + ? { + onChartClick: barChartOnChartClickHandler, + onClick: noop, + } + : {})} // The noop is to provide the cursor: pointer style as onChartClick doesn't provide the behavior /> ); case CHART_TYPE_PIE: diff --git a/src/js/utils/chart.ts b/src/js/utils/chart.ts index 0b9d580b..d288d0b8 100644 --- a/src/js/utils/chart.ts +++ b/src/js/utils/chart.ts @@ -4,3 +4,5 @@ import type { ChartData } from '@/types/data'; export const serializeChartData = (chartData: Datum[]): ChartData[] => { return chartData.map(({ label, value }) => ({ x: label, y: value })); }; + +export const noop = () => {};