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
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 thestyle.tickLabels
block.For your case I came up with something like this:
I have also noticed styling not being applied in case
VictoryAxis
is used withinVictoryGroup
, so you may try to place axis outside the group.Reference: https://formidable.com/open-source/victory/docs/victory-axis#style