Victory: x-axis tick label tilt

[candy02058912]

I searched through the docs and could not find a property for letting the label tilt, just wondering am I missing something or it's not yet available.
Because without tilt, the chart is a little bit terrifying.

[boygirl]

@candy02058912 you can add an angle property to the tick label style like

style={{tickLabels: {angle: 45}}}

or you can add an angle directly to the tickLabelComponent like

tickLabelComponent={<VictoryLabel angle={45}/>}

[candy02058912]

Thanks 👍

[MattyK14]

@boygirl I'm trying both of these methods using victory-native and no matter what the value is or which axis it makes the tickLabels disappear.

<VictoryChart
          domainPadding={5}
          width={height * 0.8}
          height={width * 0.8}
          animate={750}
        >
          <VictoryAxis
            style={{ axis: { stroke: '#E0F2F1' },
              axisLabel: { fontSize: 16, fill: '#E0F2F1' },
              ticks: { stroke: '#ccc' },
              tickLabels: { fontSize: 14, fill: '#E0F2F1', fontWeight: 'bold' },
              grid: { stroke: '#B3E5FC', strokeWidth: 0.25 }
            }} dependentAxis
          />
          <VictoryAxis
            style={{ axis: { stroke: '#E0F2F1' },
              axisLabel: { fontSize: 16 },
              ticks: { stroke: '#ccc' },
              tickLabels: { fontSize: 10, fill: '#E0F2F1', fontWeight: 'bold' }
            }}
          />
          <VictoryBar
            style={{ padding: 5, data: { fill: '#009688', strokeWidth: 5 } }}
            data={data}
            x="Hour"
            y="Usage"
          />
        </VictoryChart>

[boygirl]

@MattyK14 unfortunately this is an issue with react-native-svg. See this issue in victory-native
https://github.com/FormidableLabs/victory-native/issues/97. We're still figuring out how we want to address it, since ideally it would be fixed in the underlying lib.

[18601673727]

Hi @MattyK14, in my case(react-native too) add style or tickLabelComponent will not make tickLabels disappear, but both way not work. Right now I have to set the font super small.

@boygirl Could you please take a look at this?

[boygirl]

@18601673727 I'm not entirely sure what your question is.

victory-native is not currently able to support angled text due to an underlying issue with react-native-svg. The latest version of victory-native filters out angle transformations rather than applying them, since applying the transformation results in very broken looking charts. That's why you aren't seeing text disappear like other users.

[18601673727]

@boygirl thank you for the answer sir, you've made enough sense and I totally understand currently there's issue with react-native-svg. I hope this could been resolved sooner due to it's kinda important for mobile-first apps right? 😄

[18601673727]

https://github.com/react-native-community/react-native-svg/issues/242

[nisargap]

Still cannot rotate text on tick labels in react-native

[boygirl]

@nisargap still waiting on the upstream issue: https://github.com/react-native-community/react-native-svg/issues/242. Until that gets resolved VictoryNative has disabled angled text as it ends up incorrectly positioned and often disappears from the svg area all together.

[adityavyas]

@boygirl I am facing a similar issue with area chart. To avoid label overlap, I was thinking if there's a way we can have stepped labels. For example, if x-axis contains 1st Oct - 31st Oct, then instead of showing all 31 days in label we could step it by 5 or 7 days to avoid overlap.
Not sure if this is already supported and I missed it in the docs.

[boygirl]

@adityavyas @nisargap @18601673727
I have a temporary fix for this issue in victory-native@~0.16.0. Just be sure your app is also using react-native-svg@^6.0.0

[adityavyas]

Awesome!
@boygirl By any chance will there be support for stepping label display, so instead of showing all the labels, we can show every 5th label?

[boygirl]

@adityavyas that should already be possible using tickCount / tickFormat / tickValues

[cdimitroulas]

Related question - after rotating the tick labels by 45 degrees some of them overlap the axis. How can I move those labels away from the axis to avoid overlaps?

Edit: Nevermind... I got it to work by adding padding to the style in VictoryAxis as such <VictoryAxis style={{ tickLabels: { padding: 10, angle: -45 } }} />

[JarLowrey]

@cdimitroulas I fixed this by changing the textAnchor property of the tickLabels style:

const axisStyle = {
            ticks: { stroke: "grey", size: 3 },
            tickLabels: { fontSize: 5, padding: 1, angle:45, verticalAnchor: "middle", textAnchor:'start' },
        };

I also added the verticalAnchor so that the text centers on the middle of the tick.

[ialami]

@boygirl Hey I have the same issue as the original one on the page but mine is using VictoryBar rather than VictoryAxis. I tried the 3 followings but neither worked:

• angle={45}
• style={{ tickLabels: { padding: 10, angle: 45 } }}
• tickLabelComponent={<VictoryLabel angle={45}/>}

Could you please help me ?

My code at the moment is the following:

import React from 'react';
import { VictoryChart, VictoryBar, VictoryTheme, VictoryLabel } from 'victory-chart';

const BarChart = ({ title, units, data}) => {

  return(
    <div className="fl w-100 pa2 b--solid br1 bw3">
      <p className="center pa2 b--solid br1 bw2">{`Average ${title} ${units}`}</p>
      <VictoryChart
        domainPadding={10}
        width={700}
        padding={{ top: 50, bottom: 100, right: 50, left: 50 }}
        // angle={45} // doesn't work
        // tickLabelComponent={<VictoryLabel angle={45}/>} doesn't work
        style={{ tickLabels: { padding: 10, angle: 45 } }} // angle: 45 doesn't work
      >
        <VictoryBar
          style={{
            data: { fill: "#c2331" },
            tickLabels: { padding: 20, angle: 45 } // angle: 45 doesn't work
          }}
          data={data}
          // angle={45} // doesn't work
        />
      </VictoryChart>
    </div>
  )
}

export default BarChart;

[MattyK14]

react-native-svg: 6.1.0
victory-native: 0.17

@boygirl for react-native, applying angle: someValue to tickLabels style on VictoryAxis is the only way I could make some changes happen. With the following snipper below, It angles the entire axis label as if it were one text object:

<VictoryChart
  // theme={VictoryTheme.material}
  domainPadding={10}
>
  <VictoryAxis
    style={{ axis: { stroke: '#000' },
      axisLabel: { fontSize: 16 },
      ticks: { stroke: '#000' },
      grid: { stroke: '#B3E5FC', strokeWidth: 0.25 }
    }} dependentAxis
  />
  <VictoryAxis
    style={{ axis: { stroke: '#000' },
      axisLabel: { fontSize: 16 },
      ticks: { stroke: '#000' },
      tickLabels: { fontSize: 5, padding: 1, angle:10, verticalAnchor: 'middle', textAnchor:'start' }
    }}
  />
  <VictoryBar
    style={{ data: { fill: '#3498db' }}}
    data={this.state.data}
    animate
    alignment="start"
  />
</VictoryChart>