when I clicking on any of react in svg it is changing its color to green but i want red how can i do that? and how this panel color are working ?

[pradeep800]

[jaywcjlove]

react-heat-map/core/src/style/index.less

Lines 15 to 18 in 718146d

	&:active {
	fill: #196127;
	stroke-width: 0;
	}

@pradeep800 You can write styles to set it.

[pradeep800]

<HeatMap
            value={heatMapData?.[heatMapYears.indexOf(year)] ?? []}
            rectRender={(props, data) => {
              if (!data.count)
                return <rect className="active:fill-red-500" {...props} />;
              return (
                <Tooltip key={props.key} placement="top" content={data.content}>
                  <rect
                    className="active:fill-red-500 active:bg-red-500"
                    {...props}
                  />
                </Tooltip>
              );
            }}
            className="w-[700px] mx-auto"
            style={{ color: "#ad001d" }}
            startDate={new Date(`${year}/01/01`)}
            panelColors={{
              1: "#e4b293",
              2: "#d48462",
              4: "#c2533a",
              6: "#ad001d",
            }}
 />

it's not working
https://drive.google.com/file/d/10DBQcMcq5wK5iXsxn1o8eE7rfiEg4RzU/view?usp=sharing

[jaywcjlove]

@pradeep800

1. Updating to v2.1.0 can change this via css variables. Example: https://codesandbox.io/embed/https-github-com-uiwjs-react-heat-map-issues-121-example-02-t8gzzn?fontsize=14&hidenavigation=1&theme=dark

<HeatMap
  value={value}
  width={600}
  style={{
    "--rhm-rect": "#b9b9b9",
+    "--rhm-rect-active": "red"
  }}

2. Can be overridden by styles before updating to v2.0.5. Example: https://codesandbox.io/embed/https-github-com-uiwjs-react-heat-map-issues-121-example-01-zr2p5p?fontsize=14&hidenavigation=1&theme=dark

svg.w-heatmap rect:active {
  fill: red;
}

[pradeep800]

thank you for answering it is working correctly but I am getting error in production can you please help me that?
error photo: - https://drive.google.com/file/d/1WIkE-lTfc8rZcw3edFdm6s56TKv-ST8m/view?usp=sharing
code:- https://github.com/pradeep800/striver-sheet-webiste/blob/main/components/mainProfile.tsx#L84-L103 @jaywcjlove

[pradeep800]

i am using next js 13*

[jaywcjlove]

@pradeep800 Upgrade v2.1.1 try it yourself?

    rectRender={(props, data) => {
      // if (!data.count) return <rect {...props} />;
      return (
-        <Tooltip key={props.key} placement="top" content={`count: ${data.count || 0}`}>
+        <Tooltip placement="top" content={`count: ${data.count || 0}`}>
          <rect {...props} />
        </Tooltip>
      );
    }}

[pradeep800]

thank you for answering it is working correctly but I am getting error in production can you please help me that? error photo: - https://drive.google.com/file/d/1WIkE-lTfc8rZcw3edFdm6s56TKv-ST8m/view?usp=sharing code:- https://github.com/pradeep800/striver-sheet-webiste/blob/main/components/mainProfile.tsx#L84-L103 @jaywcjlove

still same error ?

[pradeep800]

btw you can see code btw there is no error in production

[jaywcjlove]

https://codesandbox.io/p/sandbox/strange-minsky-nvwz56

I'm not you this error, I can't run successfully.
@pradeep800

[jaywcjlove]

@pradeep800 Oh my example works fine.

[pradeep800]

use tooltip then it's giving error @jaywcjlove