How to change font settings

[kaykhan]

I would like to change the font size and color and the distable of labels so they are not close to the graph

import React, { useState } from "react";
import HeatMap from "@uiw/react-heat-map";

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

const HeatMapComponent = () => {
    return (
        <div>
            <HeatMap
                fontVariant={20}
                value={value}
                height={250}
                width={1400}
                rectSize={20}
                space={5}
                style={{ "--rhm-rect": "#3b3b3b" }}
                panelColors={["#3b3b3b", "#FFF9C4", "#FFF59D", "#FFF176", "#FFEE58", "#FFEB3B"]}
                startDate={new Date("2025/01/01")}
                endDate={new Date("2025/12/31")}
                legendRender={(props) => <rect {...props} y={props.y + 10} rx={2} />}
                legendCellSize={20}
                rectProps={{
                    rx: 2,
                }}
            />
        </div>
    );
};
export default HeatMapComponent;

[kaykhan]

I found i can manipualte the color and font size using style. but you can see the text for days begins to cut off.

         <HeatMap
                value={value}
                height={250}
                width={1400}
                rectSize={20}
                space={5}
                style={{ color: "white", fontSize: "16px", "--rhm-rect": "#3b3b3b" }}
                panelColors={["#3b3b3b", "#FFF9C4", "#FFF59D", "#FFF176", "#FFEE58", "#FFEB3B"]}
                startDate={new Date("2025/01/01")}
                endDate={new Date("2025/12/31")}
                legendRender={(props) => <rect {...props} y={props.y + 10} rx={2} />}
                legendCellSize={20}
                rectProps={{
                    rx: 2,
                }}
            />

[jaywcjlove]

I think this might be caused by a style conflict. You can reset the style by using w-heatmap-week. @kaykhan