Nivo: Place labels above bars on bar charts

[joergd]

Instead of the label appearing over a bar on a bar chart, is there a way to adjust the label position so that it is above the bar?

[joergd]

This would also help when the bar columns are so short that they no longer get labelled. If the labels could be placed above the bar columns - then at least they can still be labelled and the label ends up in the chart areas as opposed to either not at all or on the x-axis.

[joergd]

The "missing" values are < 4 in the case - But I do need them on the graph ...

[pvjones]

I also would like to do this.

[stahlmanDesign]

Here's how this can be done:
labelFormat: d => <tspan y={ 0 }>{ d }</tspan>

[joergd]

Ah great - thank you - that worked for me!

Although I now get a warning in my browser:

Warning: Failed prop type: Invalid prop `label` supplied to `BarItem`.

[pvjones]

@stahlmanDesign Thanks this looks promising. From what I can tell, labelFormat just gets passed the numeric value of the current datum. Is there a way to get the entire datum (including both id and value) so that I can perform a lookup and modify the return based on other context?

For example, colorBy gets an entire datum as its argument. (Personally I think it would be nice if all of the callback functions uniformly received the entire datum so that the user could do whatever they want with the information.)

I tried looking into the component, and it looks like there might be a getLabel prop, but it doesn't seem to be doing anything when I pass it a callback.

Thanks for your time!

[stahlmanDesign]

Is there a way to get the entire datum (including both id and value)... For example, colorBy gets an entire datum as its argument... so that the user could do whatever they want with the information

+1 Yes this would solve a lot of problems if for example your could do this
labelFormat: (value, id, data)=> value + data[`${id}MyDescription`] // 4 stars

I also talked about this here

[plouc]

The prop type warning has been fixed by https://github.com/plouc/nivo/commit/4152c0906849aa53ef4fa311aa2a66a16402e9d8

[plouc]

I close this issue and will consider https://github.com/plouc/nivo/issues/154 as it could be quite useful.

[arturtakoev]

How can I instead put labels to bottom of every bar?

[germanfleitas]

Ah great - thank you - that worked for me!

Although I now get a warning in my browser:

Warning: Failed prop type: Invalid prop `label` supplied to `BarItem`.

HI, I have the same problem, because label expect a string and not a function.

[monishagunalan]

How do you place the label on the right on a horizontal bar chart? how can I get the x value based on the bar width?

[qasim-glidewell]

Also trying to get the labels to format to the right of a horizontal bar chart. Using x and y values but want them to be dynamic.

[ldmcdaniel]

Also trying to get a value to feed to x to get the horizontal bar chart values at the end of the bar. It worked brilliantly on the vertical bar chart.

[Eld0ud]

Did you try to add a new layer as explained here https://github.com/plouc/nivo/issues/582#issuecomment-499530645 ?

[trymbill]

Here's how this can be done:
labelFormat: d => <tspan y={ 0 }>{ d }</tspan>

Did the output of labelFormat not used to be string | number? Did this ever work for anyone? With this prop setup ...

<BarChart data={chartData} labelFormat={d => <tspan y={0}>{d}</tspan>} />

... typescript complains about the output of the labelFormat function not being a string or number, which makes sense since the output of that function is a JSX Element. What method are people using to place labels on top of a chart today?

[trymbill]

Just in case someone else ends up on this issue, this is how I placed the labels on top of each bar:

const BarComponent = ({ x, y, width, height, color, label }: BarItemProps) => {
  return (
    <g transform={`translate(${x}, ${y})`}>
      <rect
        width={width}
        height={height}
        fill={color}
        strokeWidth="0"
        stroke="white"
      />

      <text
        x={width / 2}
        y={-15} // the important bit!!
        textAnchor="middle"
        dominantBaseline="central"
        style={{
          fontSize: 12,
          pointerEvents: 'none',
          fill: 'white',
          opacity: 0.75,
        }}
      >
        {label}
      </text>
    </g>
  );
};

<BarChart
  data={chartData}
  barComponent={BarComponent}
  margin={{ top: 20, right: 0, bottom: 60, left: 0 }}
/>

[stahlmanDesign]

Just in case someone else ends up on this issue, this is how I placed the labels on top of each bar:

Very good idea. I don't think custom bar items were supported when I originally answered this question with a tspan in labelFormat. Even if they were, I didn't think of using them this way.

[pietmichal]

FYI, @trymbill's solution doesn't support tooltips.

[bencohen2]

Did anybody ever manage to get it to work, placing labels at the right of horizontal bars?

[eggei]

Here's how this can be done:
labelFormat: d =>

^^ This worked for me but I had to fool the Typescript compiler with this :/

labelFormat={
    labelValue => (
        (<tspan y={-8}>{labelValue}</tspan>) as unknown
    ) as string
}

[nibble-4bits]

Here's how this can be done:
labelFormat: d => <tspan y={ 0 }>{ d }</tspan>

This worked perfectly for me. Thanks!

[noisysky]

for horizontal bars:
labelFormat={d => ${d}% }}
where 160 is marginLeft + marginRight,
5 is by how much label should be shifted from the bar

[vgotsuliak]

@noisysky thanks for your example. How did you get width?