Search code examples
javascriptreactjschartsreact-google-charts

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 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 (
    <Chart chartType="ColumnChart" width="100%" height="400px" data={data} options={barChartOptions}/>
  );
}

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

enter image description here

Solution

  • 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]
];