Search code examples
reactjstypescriptnivo-react

Nivo HeatMap not showing trailing zeros

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

Solution

  • 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" />