Truncate label text but show full text on hover

[sarwech]

We're using react-charts for customer dashboards in our app.

Is there a way to truncate the label text in the bar chart (so it does not go beyond the width of the chart container, for example) whilst also allowing a user to see the full text on hover?

In other tools (like chartjs for example) you can truncate with slice and it will only apply that to the visible label, but when you hover it will show the full label.

It would be great if we could do something similar or if anyone could suggest the best way to go about this.

[tannerlinsley]

You should be able to use options.formatters to change the formatter for specific rendering points of the labels. It's not documented yet, but this should be enough to get you started: https://github.com/tannerlinsley/react-charts/blob/beta/src/utils/buildAxis.linear.ts#L182-L203

[sarwech]

Thanks for the fast reply, Tanner, definitely wasn't expecting that! I'll try that out. Cheers!

[sarwech]

Hey @tannerlinsley, I've tried following that but struggling to get it working.

My understanding is this needs to be inside the primaryAxis function that gets passed as part of the options object. Am I doing it wrong?

  const primaryAxis = React.useMemo(
       (): AxisOptions<Datum> => ({
           getValue: (datum) => {

               return datum.name.length > 10
                   ? `${datum.name.slice(0, 10)}...`
                   : datum.name
           },
           formatters: {
               tooltip: (value: string) => value
           }
               
       }),
       [],
   );

[tannerlinsley]

I think what you need to do is:

• return the full length string in getValue
• apply a scale formatter that truncates the value to be shorter
• reapply the default formatter to the tooltip (otherwise it will default to the scale formatter)

const primaryAxis = React.useMemo(
  (): AxisOptions<Datum> => ({
    getValue: (datum) => datum.name,
    formatters: {
      scale: (value) =>
        value.length > 10 ? `${value.slice(0, 10)}...` : value,
      tooltip: (value: string, formatters) => formatters.default(value),
    },
  }),
  []
)

[sarwech]

Thanks again for the quick reply. That seems to make sense but TS is complaining that formatters doesn't have a type specified (and it doesn't like any). What should I use there?

[tannerlinsley]

None of these work?
https://github.com/tannerlinsley/react-charts/blob/8d45051ee6dcd7b07945c440e1ecc30d863744ac/src/types.ts#L270