How to stagger x-axis values with Victory Charts specifically Victory Candlestick

Question

I am building an app in React Native and using the Victory Candlestick charts to display (open, high, low, close) OHLC data from Alpha Vantage for stocks. When I pass the data to the charts, the chart displays the candles but the x-axis values are too many and overlayed on top of each other. An image of the resulting chart is shown below:

How can I change the x-axis to render a tick month ("jan", "feb", "mar" etc.)?

The code that generates this chart is shown below:

 <VictoryChart
                theme={VictoryTheme.material}
                domainPadding={{ x: 25 }}
                scale={{ x: 'time' }}
              >
                <VictoryAxis
                  // tickValues={[5, 6, 7, 8, 9, 10, 11, 12]}
                  // domain={{x: [0, 100]}}
                  scale='time'
                  // tickFormat={(t) => `${t}`}
                  // tickFormat={(t) => `${t.slice(0, 2)}`}
                  tickFormat={(t) => new Date(t).getFullYear()}
                />
                <VictoryAxis
                  dependentAxis
                  axisLabelComponent={<VictoryLabel dx={20} />}
                />
                <VictoryCandlestick
                  candleColors={{ positive: '#336d16', negative: '#ff0000' }}
                  data={this.state.ordered_data}
                />
              </VictoryChart>

The data (called this.state.ordered_data in the code) that is passed to VictoryCandlestick is shaped as follows:

    {Object {
    "close": 54.58,
    "high": 55.19,
    "low": 53.7,
    "open": 54.56,
    "x": "2021-02-03",
  },
  Object {
    "close": 54,
    "high": 54.87,
    "low": 52.71,
    "open": 52.865,
    "x": "2021-02-02",
  },
  Object {
    "close": 52.66,
    "high": 52.75,
    "low": 51.0718,
    "open": 51.2,
    "x": "2021-02-01",
  },}

The GitHub repo containing all of this code is here:Github repo for project and the code for this screen is in the StockScreen.js file in the /screens folder.

Answer 1

Modifying the Victory Charts code as follows fixes the issue:

<VictoryChart
                theme={VictoryTheme.material}
                domainPadding={{ x: 25 }}
                scale={{ x: 'time' }}
              >
                <VictoryAxis
                  scale='time'
                  tickFormat={(t) => `${t}`}
                  fixLabelOverlap
                  style={{ tickLabels: { padding: 16, fontSize: 8 } }}
                />
                <VictoryAxis
                  dependentAxis
                  axisLabelComponent={<VictoryLabel dx={20} />}
                />
                <VictoryCandlestick
                  candleColors={{ positive: '#336d16', negative: '#ff0000' }}
                  data={this.state.ordered_data}
                />
              </VictoryChart>

adding the fixLabelOverlap and style={{ tickLabels: { padding: 16, fontSize: 8 } }} props to the VictoryAxis component specifically fixes this issue.