Changing Axis on the Patternfly Bullet Chart to Strings

[tiarnan]

I am looking to change the Bullet Chart axis so it displays strings rather than numbers. Is this possible?

It would look like this:

Thanks!

[dlabrecq]

You can try overriding axisComponent. Specifically, you want to look at Victory’s tickFormat prop.

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

[tiarnan]

Thanks again for the help dlabrecq, I managed to do it following the documentation.

The code is:

      <ChartBullet
        axisComponent={<ChartAxis 
          tickValues={[0, 25, 50, 75, 100]}
          tickFormat={function (val) {
            switch (val) {
      
            case 0:
              return 'New';
            case 25:
              return 'Beginner';
            case 50:
              return 'Intermediate';
            case 75:
              return 'Advanced';
            case 100:
              return 'Expert';
          }}
        }
        />}
...