HeatmapVis and Colorbar

[ManosBrsls]

Hello everyone,

As a beginner in programming, I would like to ask about an issue I am currently facing. I am using HeatmapVis to visualize my data, and the problem occurs with the ColorBar. Because the numbers in the domain are extremely close to each other, the ColorBar displays the same value along its entire length. The values of the domain are the following: [-2369.43017578125, -2369.06005859375]
I would like the values on the ColorBar to vary at least slightly, if possible.

Below, I have attached my code and a screenshot of my Heatmap so that the issue can be better understood.
Thank you very much for your time.

<HeatmapVis className={styles.container5} title={"(Py-)GC-IMS Spectrum" + ": " + titleName} abscissaParams={{ value: retentionTimes, label: "Retention time (s)" }} ordinateParams={{ value: driftTimes, label: "Drift time (ms)" }} aspect="auto" showGrid={showGrid} colorMap={colorMap} dataArray={heatmapData} domain={heatmapDomain} valueFormatter={(v) => v.toFixed(3)} invertColorMap={invertColorMap} withBounds={false} scaleType="linear" interactions={{ selectToZoom: { modifierKey: "Shift" }, xAxisZoom: false, yAxisZoom: false }} >

[axelboc]

Hi @ManosBrsls! This is definitely missing. The abscissaParams and ordinateParams props have a formatTick option, but the color bar axis doesn't.

The HeatmapVis uses three value formatters (using the d3-format library):

• tooltip: ".5~g" (automatic mode, i.e. Number.toPrecision)
• color bar bounds: ".3~e" (exponent notation)
• color bar ticks: ".3~g" with a fallback to ".3~e" if auto mode gives more than three decimal zeros

The tooltip has more space to render the value, which is why we use a higher precision. The color bar ticks have the least amount of space, which is why we try to constrain the length of the formatted values to a predictable number of characters (−0.000123 or −1.23e+4).

At the very least we could add a formatValue prop to ColorBar to override both the ticks and bounds formatters. If we then allow passing this formatValue prop via HeatmapVis, then it should probably also override the default tooltip formatter. (If the tooltip needs a different formatter than the colorbar, there would still be the option to render a custom tooltip via renderTooltip.) @loichuder thoughts?