How to use onClick in <ChartTooltip /> on hover

[tylertaewook]

I'm looking for a way to "select" the month setCurrentMonth("January") when I click while hovering over the graph.

I used custom tick element in component which works fine, but my attempt on the same feature on doesn't work.

Is this possible with the current update?

export function MultiLineChart({ data, selectedTracker }: MultiLineChartProps) {
  // ...

  return (
    <div className="flex flex-col gap-4">
      <ChartContainer config={filteredChartConfig as ChartConfig}>
        <LineChart
          accessibilityLayer
          data={filteredChartData}
          width={500}
          height={100}
          margin={{
            left: 12,
            right: 12,
          }}
        >
          <CartesianGrid vertical={false} />
          <ChartLegend
            verticalAlign="top"
            content={<ChartLegendContent />}
            onClick={() => {
              console.log('clicked');
            }}
          />
          <XAxis
            dataKey="month"
            tickLine={true}
            axisLine={true}
            tickMargin={8}
            tickFormatter={(value) => value.slice(0, 3)}
            tick={({ x, y, payload }) => (
              <g transform={`translate(${x},${y})`}>
                <text
                  x={0}
                  y={0}
                  dy={16}
                  textAnchor="middle"
                  fill="#666"
                  onClick={() =>
                    console.log(`Selected month: ${payload.value}`) // this works
                  }
                  style={{
                    cursor: 'pointer',
                  }}
                >
                  {payload.value.slice(0, 3)}
                </text>
              </g>
            )}
          />
          <div>hello</div>

          <ChartTooltip
            cursor={true}
            content={
              <ChartTooltipContent
                onClick={() => console.log('Tooltip clicked')}  // this doesn't work
                style={{ cursor: 'pointer' }}
              />
            }
          />
          {Object.entries(filteredChartConfig).map(([key, config]) => (
            <Line
              key={key}
              dataKey={key}
              type="monotone"
              stroke={config?.color}
              strokeWidth={2}
              dot={false}
            />
          ))}
        </LineChart>
      </ChartContainer>
    </div>
  );
}

[exelimpichment]

  <Line
          dataKey="accuracy"
          type="natural"
          stroke={'red'}
          strokeWidth={2}
          activeDot={{
            onClick: (event: any, payload: any) => {
              alert(`Dot clicked for callId: ${payload.payload.callId}`);
            },
            fill: getChartColorValue(chartColor),
            r: 5,
          }}
        />