Victory Chart Issue with spacing and tick colors

Question

I want to create chart like that

I'm using victory chart to create that, I try to create similar chart like that but I'm facing problem with styling line removing axis line not ticklabels, giving color to tick values and spacing between bar. That's the cart I created

and that's my code for that chart

 <VictoryChart
                width={moderateScale(320)}
                height={moderateScaleVertical(220)}>
                <VictoryGroup offset={15} colorScale={'qualitative'}>
                  <VictoryBar
                    data={[
                      {x: 1, y: 1},
                      {x: 2, y: 2},
                      {x: 3, y: 2},
                    ]}
                    animate={{
                      duration: 2000,
                      onLoad: {duration: 1000},
                    }}
                    cornerRadius={6}
                    style={{
                      data: {
                        fill: colors.skyBlue,
                      },
                    }}
                    barWidth={10}
                  />
                  <VictoryBar
                    data={[
                      {x: 1, y: 2},
                      {x: 2, y: 1},
                      {x: 3, y: 3},
                    ]}
                    animate={{
                      duration: 2000,
                      onLoad: {duration: 1000},
                    }}
                    cornerRadius={6}
                    style={{
                      data: {
                        fill: colors.primary,
                      },
                    }}
                    barWidth={10}
                  />
                  <VictoryAxis
                    tickValues={['Jun', 'Aug', 'Sep']}
                    style={{
                      tickLabels: {color: colors.blackL},
                      ticks: {color: colors.blackL},
                    }}
                  />
                  <VictoryAxis
                    dependentAxis={true}
                    tickValues={['₹0K', '₹10K', '₹20K', '₹30K']}
                    style={{
                      tickLabels: {fill: colors.blackL},
                      ticks: {stroke: colors.blackL},
                    }}
                  />
                </VictoryGroup>
              </VictoryChart>

can anyone tell me how to style it please

Answer 1

To style the axis line itself you may apply style.axis to the axis block. To make it disappear apply transparent color to it by putting {stroke: "transparent"} into the block. Tick labels styling occurs in the style.tickLabels block.

For your case I came up with something like this:

<VictoryAxis
    tickValues={['Jun', 'Aug', 'Sep']}
    style={{
    axis: {stroke: "transparent"},
    tickLabels: {fill: "#cccccc"}
}} 
/>

I have also noticed styling not being applied in case VictoryAxis is used within VictoryGroup, so you may try to place axis outside the group.

Reference: https://formidable.com/open-source/victory/docs/victory-axis#style