[Bug]: Stacked Column Chart - Show Annotation on Bars

[Erick Brenes]

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

I have this on StackOverflow too - https://stackoverflow.com/questions/74214886/react-google-charts-stacked-column-chart-show-annotation-on-bars

I am trying to get the annotation to show on the bars in a stacked column chart. I couldn't find an example of it anywhere. I read Google Chart docs - and it confused me on how to get annotations with the way the React example was. I am thinking it has something to do with column roles.

React example: https://www.react-google-charts.com/examples/column-chart

Google Charts Docs on bar charts: https://developers.google.com/chart/interactive/docs/gallery/barchart

Here is what I have: https://codesandbox.io/s/young-shadow-mdsoiv?file=/App.tsx

Here is a solution for just plain Google Charts: https://stackoverflow.com/questions/25506808/google-stacked-column-chart-displayed-value-on-each-group

Here is my code from the above link for context:

import React from "react";
import { Chart } from "react-google-charts";

export const data = [
["", "Density", "Copper", "Silver", "Gold"],
["", 8, 10, 19, 21],
];

const barChartOptions = {
title: 'Medals',
isStacked: 'percent',
chartArea: { left: 25, top: 65, bottom: 30, right: 220 },
hAxis: {
textPosition: 'none', gridlines: {
color: 'transparent'
}
},
vAxis: {
textPosition: 'none', gridlines: {
color: 'transparent'
}
},
};

export function App() {
return (

);
}
Example of labels in a non-stacked bar chart (note the numbers on the bars):

I would love to see more examples on the demo site with using the chartWrapperParams.

Reproduction

https://codesandbox.io/s/young-shadow-mdsoiv?file=/App.tsx

react-google-charts version

4.0.0

Possible solution

Something using chartWrapperParams and view?

[Erick Brenes]

Figured it out by manipulating the data to be like this:
export const data = [
[
"",
{ role: "annotation" },
"Social",
{ role: "annotation" },
"Music",
{ role: "annotation" },
"File Sharing",
{ role: "annotation" },
"Storage",
{ role: "annotation" },
"Weather",
{ role: "annotation" }
],

["", "", 98, 98, 53, 53, 22, 22, 16, 16, 26, 26]
];