React native chart kit how to give padding to bar top values

143 views Asked by At

I have a simple bar chart that shows values on top of each bar. However, the fontSize is small and it's too close to the bar. Is there a way to give some padding and increase the fontSize of it?

BarChar component

<BarChart
            yAxisLabel="R$ "
            yAxisSuffix=""
            data={{
              labels: store.map((item) => months[item.month]),
              datasets: [
                {
                  data: store.map(
                    (item) => +(item[viewing] as number).toFixed(1)
                  ),
                  color: () => "#0B69C7",
                  colors: store.map((item) => () => "#0B69C7"),
                },
              ],
            }}
            flatColor
            showValuesOnTopOfBars
            withCustomBarColorFromData
            showBarTops
            withInnerLines={false}
            width={700}
            height={320}
            yLabelsOffset={2}
            yAxisInterval={1}
            chartConfig={{
              backgroundColor: "white",
              backgroundGradientFrom: "white",
              backgroundGradientTo: "white",
              decimalPlaces: 0,
              color: (opacity = 1) => `#0B69C7`,
              labelColor: (opacity = 1) => `#222222`,
            }}
          />

Current chart

current chart

0

There are 0 answers