Nivo HeatMap not showing trailing zeros-CodePudding

I am working with Nivo HeatMap and I notice that for the y value, it always accepts a number and even if I force pass the .00 digits, it will still truncate and display the value without the trailing zeros. The format of the data it expects is the following:

{
    id: string
    data: {
        x: string | number
        y: number | null
    }[]
}[]

Has anyone been able to find a workaround to display 1.00 instead of just 1 (see screenshot below? Nivo sample graph

CodePudding user response：

You should format your data using fixed point notation. In your component you should add the valueFormat prop with the following value:

<ResponsiveHeatMap
    data={data}
    // Indicates fix point notation (f) with a precision of 2 (.2), 
    // right aligning the field (>) and a minus sign if negative (-)
    valueFormat="0>-.2f" />