Search code examples
javascriptreactjsreact-nativevictory-charts

Bars are going through my axis in my Victory Bar chart

I'm using Victory charts for some bar charts in React Native. I've got it working as good as possible but I've got one problem and that's because of the first bar is going through the y axis labels.

Example:

enter image description here

I've tried some things with the domainPadding but it was also effecting the Y Axis. Anybody an idea of how to get the bars to the right?

Example code:

<VictoryChart padding={{top: 50, bottom: 0, left: 35, right: 125}} height={200}>
  <VictoryBar
    animate={{
      duration: 2000,
      onLoad: {duration: 1000},
    }}
    data={this.renderData()}
    barRatio={1}
    labels={['<30', '30-60', '60-90', '>90']}
    style={{
      parent: {border: '2px solid black'},
      data: {fill: '#000', fillOpacity: 0.1},
      labels: {fill: 'white'},
    }}
    labelComponent={<VictoryLabel y={200} />}
  />
  <VictoryAxis
    dependentAxis
    style={{
      axis: {stroke: 'transparent'},
      ticks: {stroke: 'transparent'},
      tickLabels: {fill: '#FFF'},
    }}
  />
  <VictoryAxis
    crossAxis
    style={{
      axis: {stroke: 'transparent'},
      ticks: {stroke: 'transparent'},
      tickLabels: {fill: 'transparent'},
    }}
  />
</VictoryChart>
Solution

  • You could set the offsetX prop on the VictoryAxis.

    For example:

    // ...
<VictoryAxis
  dependentAxis
  offsetX={70}
  style={{
    axis: {stroke: 'transparent'},
    ticks: {stroke: 'transparent'},
    tickLabels: {fill: 'black'},
  }}
/>
// ...

    Source: https://formidable.com/open-source/victory/docs/victory-axis#offsetx.

    You probably have to play around with the value of offsetX as I couldn't exactly replicate your layout as you didn't share the container surrounding your chart.