reactjssvgradar-chart

react-svg-radar-chart caption is partially displayed

I am using below npm package

npm i react-svg-radar-chart

The chart is used to show the scores of some entities in different areas. The text provided to this which is a label or caption for that point is being chopped off at one particular length.

Need some way to get the full length of caption partial text caption

There is property called as caption but I am unable to find how to manipulate the length because the prop has boolean value which is there on the package page as defaultOption

captions: true, // show captions?

I tried to check for up to what length the text can be displayed without it being chopped off.

The text that exceeds the length is not displayed. The ideal or default length is 15 from what I understand.

Solution

  • I had found the option which we can overwrite the default size and pass as option to the radar chart component as below:

    const defaultOptions = {
    captionProps: () => ({
      className: 'caption1',
    }),
    scales: 4,
    dots: true,
    wrapCaptionAt:20,
  };

    The wrapCationAt provides the max length of the text that can be displayed when the component is rendered.

     <RadarChart
              options={defaultOptions}
..../>