javascriptreactjsreact-nativevictory-charts

How to dynamically create y axis values for ticks on victory axis?


I have created a victory bar chart to show employee attrition. But y-axis of the chart is showing floating values instead of an integer but as employees' count can not be in floating point I want to show y-axis values in integer number only so the solution for the same is to define custom tick values as

 <VictoryAxis tickValues={[2, 4, 6, 8]}/>

But I don't know how I dynamically generate ticks array for my y-axis values. Here is how my graph looks :

enter image description here


Solution

  • So i was having a similar problem and struggled to find much help anywhere on this. The solution i came to was to ammend the tick using the tickFormat property of the VictoryAxis component.

     < VictoryAxis
         tickFormat = {(t) => (Number.isInteger(t) ? t : null)}
         dependentAxis />
    

    This checks that the tick is defined as an integer and if so returns it otherwise sets the tick to be null.