How to format legend labels within a Calendar?

[taschetto]

Hi! I've searched the docs, storybook and this repo to find a way to do it but I was not successful.

I need to format legend labels within a Calendar. Currently, my raw values range from 0 to ~70,000.

I'd like to format these values as follows:

Is there anyway to do it?

I've tried to pass a function inside the legend object, but it didn't work:

    // ...
    legends: [
      {
        // ...
        legendFormat: ({ value }) => myFormatter(value),
        // ...
      },
    ],

Thanks! :-)

[oscargws]

Bump, any information on this? Trying to achieve the same thing

[rovaniemi]

I also needed this feature, but the library does not support it yet. However, this feature can be used with a little workaround, but we should do a PR if we want to use it the proper way.

Workaround

@nivo/calendar uses colorScale function when it does create legends.

const legendData = colorScale.ticks(legend.itemCount).map(value => ({
  id: value,
  label: value,
  color: colorScale(value),
}))

We can pass new colorScale function on @nivo/calendar props

import { scaleQuantize } from 'd3-scale'

const computeDomain = (data, minSpec, maxSpec) => {
  const allValues = data.map(d => d.value)
  const minValue = minSpec === 'auto' ? Math.min(...allValues) : minSpec
  const maxValue = maxSpec === 'auto' ? Math.max(...allValues) : maxSpec
  return [minValue, maxValue]
}

const createColorScale = (data, minValue, maxValue, colors) => {
  const domain = computeDomain(data, minValue, maxValue)
  const defaultColorScale = scaleQuantize()
      .domain(domain)
      .range(colors)
  const colorScale = value => {
      const number = prettyIntegerToNumber(value) // Formatted number back to number
      return defaultColorScale(number)
  }
  colorScale.ticks = count => {
     return defaultColorScale.ticks(count).map(e => prettyInteger(e)) // Format number
  }
  return colorScale
}

[Genarito]

Another workaround is to make your custom Legend as proposed here.

There's a PR which fixes this issue (I hope). But it's still not reviewed

[stale]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!