React native svg bar chart for multiple lists; how can i separate the 2 bars

Question

React native svg bar chart for multiple lists; how can i separate the 2 bars like this image? bar-chart

current progress

how can i achieve this?

Code so far:-

my code so far:

import React, {Component} from 'react'
import { View, StyleSheet} from 'react-native'
import { BarChart, Grid } from 'react-native-svg-charts'

class SliderComponent extends Component{
render(){
 const data1 = [ 14, 8, 6, 13 ]
 .map((value) => ({ value }))
 const data2 = [ 9 , 7, 12, 10 ]
 .map((value) => ({ value }))

const barData = [
  {
  data: data1,
  svg: {
      fill: '#05E4B5',

  },
 },
 {
  data: data2,
  svg: {
    fill: '#7659FB',
},
},
  ]

return (
<BarChart
  style={ { height: 200 } }
  numberOfTicks={0}
  spacingInner={0.5}
  spacingOuter={0.2}
  data={ barData }
  yAccessor={({ item }) => item.value}
  contentInset={ { top: 20, bottom: 30 } }
  { ...this.props }
  >
  <Grid/>

) } }

Answer 1

I found the answer : svg: { fill: '#05E4B5', x: -2, },