CODEWITHSUNDEEP
javascriptreactjsreact-nativevictory-charts
Kanwarjeet Singh
Kanwarjeet Singh

Reputation: 745

Victory Chart Issue with spacing and tick colors

I want to create chart like that

enter image description here

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

enter image description here

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

Upvotes: 0

Views: 2445

Answers (1)

Christina
Christina

Reputation: 131

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

Upvotes: 1

Related Questions