Add Value to Label (Radar-Component)

[ole-besendahl]

Hi everyone, I'm using the Radar Component with a custom Label Component as seen in the storybook example. The problem is, that the values in the example are just random numbers and not the real values. And the GridLabelProps don't receive the value of the data point as a prop:

export interface GridLabelProps {
    id: string;
    anchor: 'start' | 'middle' | 'end';
    angle: number;
    x: number;
    y: number;
    animated: AnimatedProps<{
        transform: string;
    }>;
}

Anyone having an idea how i get the value to the label? Code here:

RadarComponent

<ResponsiveRadar
        data={data}
        keys={[productName]}
        indexBy="label"
        valueFormat=">-.2f"
        margin={margin ? margin : {top: 80, right: 80, bottom: 80, left: 80}}
        gridLabelOffset={20}
        gridLevels={0}
        gridLabel={showLabels ? LabelComponent : NoLabelComponent}
        maxValue={10}
        enableDots={false}
        dotSize={6}
        dotColor={{theme: 'background'}}
        dotBorderWidth={2}
        colors={[color]}
        blendMode="normal"
        fillOpacity={1}
        motionConfig="easeOut"
      />

Label Component:

const LabelComponent = ({id, x, y}: GridLabelProps) => (
  <g transform={`translate(${x}, ${y})`}>
    <g transform={`translate(0, 0)`}>
      <text
        style={{
          textAlign: 'center',
          fontSize: 10,
          fontFamily: 'Circular Std',
          fill: '#333',
        }}
      >
        {id}
        // -> here I'd need the value of the data point 
      </text>
    </g>
  </g>
);

[plouc]

That's because the grid labels are inferred from the index (indexBy), which should be a string, you won't get any value here as it's just a label for the grid, not the points, because you might have several values for a given index (several keys).

The labels for values are handled via dotLabel.

[ole-besendahl]

Thanks @plouc, is there any hack to make it work through the dotLabel?