how to set Bar chart off set and height to show bar chart value on another Bar in single bar react native chart wrapper?

[Jigs6720]

is there any way to add black Lines in each and every bar for Horizontal Bar Chart in react native?

i am trying to add this Black marks in single bar but it is not working it over rides another bar with that color.

here is my code,

` const marker = {
enabled: true,
markerColor: processColor(colors.text),
textColor: processColor(colors.border),
markerFontSize: 14,
};
//bar chart
const [legend, setLegend] = useState({
enabled: true,
textSize: 12,
form: "SQUARE",
formSize: 14,
textColor: processColor(colors.text),
xEntrySpace: 10,
yEntrySpace: 5,
formToTextSpace: 10,
wordWrapEnabled: true,
maxSizePercent: 0.5,
});
const [dataSet, setDataSet] = useState({
config: {
barWidth: 0.9,

  formToTextSpace: 10,
},
dataSets: [
  {
    values: [
      { y: 20 },
      { y: 30 },
      { y: 10 },
      { y: 0 },
      { y: 0 },
      { y: 35 },
      { y: 0 },
      { y: 0 },
      { y: 28 },
      { y: 0 },
      { y: 30 },
      { y: 15 },
      { y: 25 },
      { y: 20 },
      { y: 0 },
      { y: 0 },
      { y: 0 },
      { y: 0 },
      { y: 25 },
      { y: 15 },
      { y: 35 },
      { y: 5 },
      { y: 0 },
      { y: 15 },
    ].reverse(),
    label: "Correct",
    config: {
      drawValues: false,
      color: processColor('green'),
      barShadowColor: processColor("lightgrey"),
      highlightAlpha: 90,
      highlightColor: processColor("transparent"),
    },
  },
  {
    values: [
      { y: 0 },
      { y: 0 },
      { y: 0 },
      { y: 0 },
      { y: 35 },
      { y: 0 },
      { y: 0 },
      { y: 0 },
      { y: 10 },
      { y: 0 },
      { y: 0 },
      { y: 0 },
      { y: 70 },
      { y: 0 },
      { y: 0 },
      { y: 0 },
      { y: 30 },
      { y: 0 },
      { y: 60 },
      { y: 0 },
      { y: 0 },
      { y: 0 },
      { y: 0 },
      { y: 0 },
      { y: 0 },
    ].reverse(),
    label: "Partially Correct",
    config: {
      drawValues: false,

      color: processColor(Colors.additionalYellowColor1),
      barShadowColor: processColor("lightgrey"),
      highlightAlpha: 90,
      highlightColor: processColor("transparent"),
    },
  },
  {
    values: [
      { y: 0 },
      { y: 0 },
      { y: 0 },
      { y: 0 },
      { y: 60 },
      { y: 0 },
      { y: 120 },
      { y: 0 },
      { y: 0 },
      { y: 70 },
      { y: 0 },
      { y: 0 },
      { y: 0 },
      { y: 0 },
      { y: 40 },
      { y: 0 },
      { y: 80 },
      { y: 0 },
      { y: 0 },
      { y: 0 },
      { y: 0 },
      { y: 0 },
      { y: 90 },
      { y: 0 },
    ].reverse(),
    label: "Incorrect",
    config: {
      drawValues: false,

      color: processColor('red'),
      barShadowColor: processColor("lightgrey"),
      highlightAlpha: 90,
      highlightColor: processColor("transparent"),
    },
  },
  {
    values: [
      { y: 10 },
      { y: 0 },
      { y: 0 },
      { y: 0 },
      { y: 0 },
      { y: 0 },
      { y: 0 },
      { y: 0 },
      { y: 0 },
      { y: 0 },
      { y: 0 },
      { y: 0 },
      { y: 0 },
      { y: 0 },
      { y: 0 },
      { y: 0 },
      { y: 0 },
      { y: 0 },
      { y: 0 },
      { y: 0 },
      { y: 0 },
      { y: 0 },
      { y: 0 },
      { y: 0 },
    ].reverse(),
    label: "Average Time",
    config: {
      // group: {
      //   fromX: 5, // required
      //   groupSpace: 0.5, // required
      //   barSpace: 0.1, // required
      // },
      drawValues: false,
      color: processColor("#111"),
      barShadowColor: processColor("lightgrey"),
      highlightAlpha: 90,
      highlightColor: processColor("transparent"),
    },
  },
],

});
const [xAxis, setxAxis] = useState({
drawGridLines: false,
valueFormatter: [
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10",
"11",
"12",
"13",
"14",
"15",
"16",
"17",
"18",
"19",
"20",
"21",
"22",
"23",
"24",
].reverse(),
position: "BOTTOM",
granularityEnabled: true,
granularity: 1,
labelCount: 17,
textColor: processColor(colors.text),
});
const [yAxis, setyAxis] = useState({
right: {
enabled: false,
drawGridLines: false,
granularityEnabled: false,
granularity: 0,
textColor: processColor(colors.text),
},
left: {
textColor: processColor(colors.text),

  drawGridLines: false,
  granularityEnabled: true,
  granularity: 1,
  labelCount: 3,
  axisMinimum: 0,
},

});
`

<HorizontalBarChart style={{ flex: 1 }} data={dataSet} xAxis={xAxis} yAxis={yAxis} marker={marker} pinchZoom={false} extraOffsets={{ bottom: Platform.OS === "ios" ? 0 : 15, top: Platform.OS === "ios" ? 25 : 5, }} doubleTapToZoomEnabled={false} animation={{ durationX: 1000 }} legend={legend} chartDescription={{ text: "" }} gridBackgroundColor={processColor("#ffffff")} drawBarShadow={false} drawValueAboveBar={true} drawHighlightArrow={true} onSelect={handleSelect} onChange={(event) => console.log(event.nativeEvent)} />