[Bug]: Chart Labels Don't Show Up (Bar, BarChart, ColumnChart, etc.)

[ievgen-klymenko-uvoteam]

Would you like to work on a fix?

• [ ] Check this if you would like to implement a PR, we are more than happy to help you go through the process.

Current and expected behavior

Expected Behaviour:

Labels show up on chart columns (eg. value numbers). Using { role: annotation } Like in the docs here: https://developers-dot-devsite-v2-prod.appspot.com/chart/interactive/docs/gallery/columnchart#labeling-columns

Current Behaviour:

Labels don't show up (are only visible in hover popups). Infact they don't show up even in official doc examples (although this was the whole idea of 'Labeling bars' example, I suppose) https://www.react-google-charts.com/examples/bar-chart#labeling-bars

I reproduced in CodeSandbox.

Although, same issues here:

https://github.com/rakannimer/react-google-charts/issues/325 <--- "marked as resolved, with only reference to the docs. Code from the docs is in my CodeSandbox and it doesn't work"

https://github.com/rakannimer/react-google-charts/issues/691 <--- "this man achieved it, but in a very hacky way that I cant use"

Please help very important issue for me!!!! Would be nice if you could show CodeSandbox where it works

Reproduction

https://codesandbox.io/p/sandbox/blissful-sanderson-zh9plj?file=%2FApp.tsx

react-google-charts version

^4.0.1

Possible solution

No response

[rakannimer]

Hello @ievgen-klymenko-uvoteam

You are using Bar and not BarChart as the chart type, this uses the material design version of the Google Charts which has a different options object format.

You can get around this by specifying the type as BarChart and providing an annotation value in each data row.

Here's an updated example : https://codesandbox.io/p/sandbox/blissful-sanderson-zh9plj

I will also update the example accordingly.