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 ?

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.

<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

@pradeep800

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"
  }}

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;
}

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

i am using next js 13*

@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>
      );
    }}

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 ?

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

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

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

@pradeep800 Oh my example works fine.

use tooltip then it's giving error @jaywcjlove

https://codesandbox.io/embed/sweet-aj-jpl6mx?fontsize=14&hidenavigation=1&theme=dark

import Tooltip from "@uiw/react-tooltip";
import HeatMap from "@uiw/react-heat-map";

const value = [
  { date: "2016/01/11", count: 2 },
  ...[...Array(17)].map((_, idx) => ({
    date: `2016/01/${idx + 10}`,
    count: idx
  })),
  ...[...Array(17)].map((_, idx) => ({
    date: `2016/02/${idx + 10}`,
    count: idx
  })),
  { date: "2016/04/12", count: 2 },
  { date: "2016/05/01", count: 5 },
  { date: "2016/05/02", count: 5 },
  { date: "2016/05/03", count: 1 },
  { date: "2016/05/04", count: 11 },
  { date: "2016/05/08", count: 32 }
];

export default function App() {
  return (
    <div>
      <HeatMap
        value={value}
        width={600}
        startDate={new Date("2016/01/01")}
        rectRender={(props, data) => {
          console.log("props", props);
          // if (!data.count) return <rect {...props} />;
          return (
            <Tooltip placement="top" content={`count: ${data.count || 0}`}>
              <rect {...props} />
            </Tooltip>
          );
        }}
      />
    </div>
  );
}