gk_se_web_report/src/_components/chart/VerticalBarChart.js

import React from 'react';
import { Bar } from 'react-chartjs-2';
import { PRIMARY_COLOR } from '../../_constants/common';
import { Chart as ChartJS, registerables } from 'chart.js';

ChartJS.register(...registerables);

export function VerticalBarChart({data = [], labels = []}) {
  if (!data?.length) {
    return null
  }
  let maxValue = 0;
  data?.map(item => {
    if (item > maxValue) {
      maxValue = item;
    }
  })

  const options = {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
      legend: {
        display: false
      },
      datalabels: {
        anchor: 'end', // Position of the labels (start, end, center, etc.)
        align: 'end', // Alignment of the labels (start, end, center, etc.)
        color: 'blue', // Color of the labels
        font: {
            weight: 'bold',
        },
        formatter: function (value, context) {
            return value; // Display the actual data value
        }
      }
    },
    scales: {
      y: {
        max: maxValue < 5 ? 5 : maxValue < 20 ? maxValue + 5 : maxValue + 10,
        ticks: {
          callback: function(value) {if (value % 1 === 0) {return value;}},
          stepSize: 1,
          precision: 0,
        }
      },
      yAxes: [{
        ticks: {
          beginAtZero: true,
          callback: function(value) {if (value % 1 === 0) {return value;}},
          stepSize: 1,
          precision: 0,
        }
      }]
    },
  };
  
  return <Bar options={options} data={{
    labels,
    datasets: [
      {
        data,
        backgroundColor: PRIMARY_COLOR,
        barPercentage: 0.4,
      },
    ],
  }} />;
}