How to show value above bars in bar chart using react google charts?

Question

I'm using react google charts to show my charts in react app. But I don't know how to show the value of bar chart above bars. The values are visible when I hover on them but I want it to show above the bars.

                           This is the code:

<Chart
  chartType="Bar"
              data={barChartdata}
              options={barChartOptions}
              width={'100%'}
              height={'400px'}
            />

Answer 1

Can you try this?

import React from 'react';
import Chart from 'react-google-charts';

const barChartdata = [
  ['Category', 'Value'],
  ['Category 1', 50],
  ['Category 2', 80],
  ['Category 3', 30],
  // Add more data as needed
];

const barChartOptions = {
  title: 'Bar Chart with Values',
  legend: 'none', // You can set this to 'right', 'top', 'bottom', or 'none' based on your preference
  bars: 'vertical',
  vAxis: {
    title: 'Value',
    format: 'decimal', // You can customize the format as needed
    viewWindow: {
      min: 0, // Adjust as needed based on your data
    },
  },
};

const BarChart = () => {
  return (
    <Chart
      chartType="Bar"
      data={barChartdata}
      options={barChartOptions}
      width={'100%'}
      height={'400px'}
    />
  );
};

export default BarChart;

Answer 2

You can try this code, when we want to display the values above the bars so we need to include the annotations property in the barChartOptions

import React from 'react';
import Chart from 'react-google-charts';

const barChartdata = [
  ['Category', 'Value', { role: 'annotation' }],
  ['Category 1', 50, '50'],
  ['Category 2', 80, '80'],
  ['Category 3', 30, '30'],
  // Add more data as needed
];

const barChartOptions = {
  title: 'Bar Chart with Values',
  legend: 'none', // You can set this to 'right', 'top', 'bottom', or 'none' based on your preference
  bars: 'vertical',
  vAxis: {
    title: 'Value',
    format: 'decimal', // You can customize the format as needed
    viewWindow: {
      min: 0, // Adjust as needed based on your data
    },
  },
  annotations: {
    textStyle: {
      fontSize: 12,
    },
  },
};

const BarChart = () => {
  return (
    <Chart
      chartType="Bar"
      data={barChartdata}
      options={barChartOptions}
      width={'100%'}
      height={'400px'}
    />
  );
};

export default BarChart;