basicBarChart.js

import * as React from "react";
import { Dimensions, View } from "react-native";
import { color } from "../../assets/colorConstant";
import { YAxis,BarChart, XAxis } from "../../src";
import {
  moderateScale,
  moderateScaleVertical,
  textScale,
} from "../../assets/responsiveSize";
import { Svg, Line } from "react-native-svg";
import { BarData } from "../dummyData";
const BasicBarChart = () => {

  const xAxisHeight = 20;
  const ChartHeight = 200;
  return (
    <View
      style={styles.container}>
      <View
        style={styles.chartContainer>
        <YAxis
          data={BarData}
          style={styles.YAxis}
          contentInset={{
            top: moderateScale(20),
            bottom: moderateScaleVertical(8),
          }}
          svg={{
            fontSize: textScale(9),
            fill: "black",
            fontFamily:'Virgil'
          }}
          min={0}
          max={9000}
          numberOfTicks={9}
          formatLabel={(value) => `${value}`}
        />
        <Svg>
          <Line
            key={"zero-yaxis"}
            x1={10}
            y1={0}
            x2={10}
            y2={ChartHeight}
            stroke={color.BLACK}
            strokeWidth={2}
          />
        </Svg>
      </View>
        <View
          style={styles.chartView>
          <BarChart
            style={styles.chart}
            contentInset={{
              right: moderateScale(10),
            }}
            data={BarData}
            yAccessor={({ item }) => item.pv}
            gridMin={0}
            gridMax={9000}
            xMin={0}
            yMin={0}
            spacingInner={0.2}
            spacingOuter={0.4}
            svg={{ fill: color.BRIGHT_GREEN }}
          >
            
            <Svg>
              <Line
                key={"zero-axis"}
                x1={0}
                y1={ChartHeight}
                x2={Dimensions.get("window").width + (BarData.length - 7) * 20}
                y2={ChartHeight}
                stroke={color.BLACK}
                strokeWidth={2}
              />
            </Svg>
          </BarChart>

          <XAxis
            data={BarData}
            style={styles.XAxis}
            contentInset={{
              left: moderateScale(30),
            }}
            min={0}
            max={BarData.length}
            svg={{
              fontSize: textScale(8),
              fill: color.BLACK,
            }}
            numberOfTicks={BarData.length}
            formatLabel={(value, index) => {
              return BarData[index]?.name
            }}
          />
        </View> 
    </View>
  );
};
export default BasicBarChart;