CODEWITHSUNDEEP
reactjsmaterial-uimui-x-charts
Agustin Castillo
Agustin Castillo

Reputation: 31

Is it possible to put strings at the yAxis in MUI X-Charts?

I am using MUI X-Charts BarChart and i could style mostly desired props, but my yAxis is going from 0 to 2 and I would like to display them as "Bad" (0), "Regular" (1) and "Good" (2). Is it possible to do that?

Using @mui/x-charts 7.0.0

Upvotes: 2

Views: 1078

Answers (1)

eziama
eziama

Reputation: 151

In your yAxis configuration, specify the valueFormatter property to be a function that returns your desired text, given a tick value. Example:

<LineChart
   yAxis={[{
      ...otherOptions,
      valueFormatter: (value) => ['Bad', 'Regular', 'Good'][value],
   }]}
/>

Generally, you should also choose the ticks that appear on the yAxis to constrain them to your values 0, 1, 2, but so far I personally haven't been able to get tickInterval and tickLabelInterval to work on the y-axis, only on x-axis. In that case, my hack was to put an empty string for other tick values. E.g.

valueFormatter: (value) => {
   // Only at the integer tick positions
   if (value === Math.round(value)) {
      return ['Bad', 'Regular', 'Good'][value]
   }
   return ''
}

Upvotes: 1

Related Questions