CODEWITHSUNDEEP
reactjsreact-nativesvgvictory-charts
Brad W
Brad W

Reputation: 2558

How to get VictoryAxis tickValues evenly distributed on the axis in victory-native?

I'm trying to make a temperature gauge that looks like a mercury thermometer. To do this I'm using Formidable Lab's victory native library.

Where I'm running into trouble is in getting the VictoryAxis component to spread its VictoryLabel components evenly along the y-axis.

My loop in componentDidMount is generating an array of numbers, in increments of 0.2, between the range of this.state.cLower and this.state.cUpper that are supposed to be set as the tick labels on the y-axis.

export default class Thermometer extends React.Component {
    constructor (props) {
      super(props)
      this.state = {
        temp: [0],
        cUpper: 29,
        cLower: 24,
        tickValues: []
      }
      DB.ref('tempLog').limitToLast(1).on('value', snap => {
        this.setState({ temp: [{ x: 0, y: [snap.val()[Object.keys(snap.val())[0]].temp] }], y0: this.state.cLower })
      })
    }
    componentDidMount () {
      let temps = new Set()
      for (let i = parseFloat(this.state.cLower); i <= parseFloat(this.state.cUpper); i += 0.2) {
        temps.add(Math.round(i * 10) / 10)
      }
      this.setState({ tickValues: Array.from(temps) })
    }

    render () {
      return (
        <VictoryChart
          height={300}
          width={65}>
          <VictoryAxis
            style={{ ticks: { size: 12 } }}
            orientation={'left'}
            tickValues={this.state.tickValues}
            dependentAxis />
          <VictoryBar
            style={{ data: { fill: 'rgb(255, 0, 0)' } }}
            data={this.state.temp} />
        </VictoryChart>
      )
    }
  }

I've verified that the values rendered are correct but as you can see here all the labels get rendered nearly on top of each other.

enter image description here

Upvotes: 1

Views: 2770

Answers (1)

Brad W
Brad W

Reputation: 2558

Because this.state.cLower and this.state.cUpper set the bounds for the lower and upper data, respectively, that is rendered I had to set VictoryBar's y0 prop to the value of this.state.cLower

<VictoryBar
 y0={() => this.state.cLower}
 style={{ data: { fill: 'rgb(255, 0, 0)' } }}
 data={this.state.temp} />

VictoryAxis then picks up on this, presumably through VictoryChart, and the VictoryAxis' VictoryLabels get distributed, and the rendered VictoryBar data aligned as expected

enter image description here

Upvotes: 1

Related Questions