Untitled

import React from 'react';
import { Box } from '@mui/material';
import ReactECharts from 'echarts-for-react';

const ManagedByBranchChart = () => {
  const getOption = () => {
    return {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {},
      grid: {
        left: 0,
        right: '10%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01],
        axisLabel: {
          interval: 1 // Tampilkan label setiap interval
        },
        splitNumber: 4 // Tentukan jumlah label yang ingin ditampilkan
      },
      yAxis: {
        type: 'category',
        data: [
          'Brazil',
          'Indonesia',
          'USA',
          'India',
          'China',
          'World',
          'Russia',
          'Japan',
          'Germany',
          'UK',
          'France',
          'Italy',
          'Spain',
          'Mexico',
          'Canada',
          'South Korea',
          'Australia',
          'Saudi Arabia',
          'Turkey',
          'South Africa'
        ],
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        }
      },
      itemStyle: {
        borderRadius: 100
      },
      series: [
        {
          type: 'bar',
          data: [
            18203, 23489, 29034, 104970, 131744, 630230, 140500, 127300, 81350, 62400, 65200, 60400, 46500, 12300, 34500, 50200, 23500,
            29000, 75000, 51500
          ],
          itemStyle: {
            borderRadius: 100,
            color: '#D07516'
          },
          label: {
            show: true,
            position: 'right',
            formatter: '{c}',
            fontSize: 10,
            color: '#2E75B6'
          }
        }
      ],

    };
  };

  return (
    <Box
      sx={{
        bgcolor: '#FAFAFA',
        width: '100%',
        height: '100%',
        borderRadius: '16px',
        position: 'relative',
        
      }}
    >
      <Box
        sx={{
          // bgcolor: '#FAFAFA',
          width: '100%',
          height: '80%',
          maxHeight:'80%',
          borderRadius: '16px',
          position: 'relative',
          bgcolor:'yellow',
          overflowX: 'hidden',
          overflowY: 'scroll'
        }}
      >
        <ReactECharts option={getOption()} style={{ width: '100%', height: '200%', inset: '0', top: '-30%' }} />
      </Box>
    </Box>
  );
};

export default ManagedByBranchChart;