## Feature Examples


### Fill
- description: Control the chart color by specifying color for each data point. It accepts the following color variables: `A1` (default), `A2`, `A3`, `A4`, `A5`, `A6`.<br /><br />
        If data points have different colors, chart will be filled with a linear gradient that is defined from the first color to the last color in the dots list.
- example: 
```jsx 
() => {
  const data = [
    {
      value: 70,
      label: 'Data point 1',
      color: 'A1',
    },
    {
      value: 25,
      label: 'Data point 2',
      color: 'A1',
    },
    {
      value: 50,
      label: 'Data point 3',
      color: 'A1',
    },
    {
      value: 25,
      label: 'Data point 4',
      color: 'A6',
    },
    {
      value: 75,
      label: 'Data point 5',
      color: 'A6',
    },
    {
      value: 70,
      label: 'Data point 6',
      color: 'A6',
    },
  ];
  const scale = [
    { value: 25, label: '25%' },
    { value: 50, label: '50%' },
    { value: 75, label: '75%' },
    { value: 100, label: '100%' },
  ];

  return <RadarChart data={data} scale={scale} />;
};
```

### Width
- description: Control the dimensions of a chart with `width` prop. Changing the width will affect component height as well - it grows in 1:1 ratio.<br /><br />
        Minimum width of a chart is 150px.
- example: 
```jsx 
() => {
  const data = [
    {
      value: 50,
      label: 'Data point 1',
      color: 'A1',
    },
    {
      value: 55,
      label: 'Data point 2',
      color: 'A1',
    },
    {
      value: 65,
      label: 'Data point 3',
      color: 'A6',
    },
  ];
  const scale = [
    { value: 25, label: '25%' },
    { value: 50, label: '50%' },
    { value: 75, label: '75%' },
    { value: 100, label: '100%' },
  ];

  return (
    <Box>
      <Box>
        <RadarChart data={data} scale={scale} />
      </Box>
      <Box>
        <RadarChart data={data} scale={scale} width={200} />
      </Box>
    </Box>
  );
};
```

### Data points
- description: Define from 3 to 10 data points to display in a chart. Available properties for each point:<br/>
      &emsp;- `value` - use to define a number that represents value in a chart<br/>
      &emsp;- `label` - use to specify a label that represents value around the chart<br/>
      &emsp;- `color` - use to specify data point color<br/>
      &emsp;- `tooltipContent` - use to define a message visible in a tooltip on a data point hover over.
- example: 
```jsx 
() => {
  const threeDataPoints = [
    {
      value: 50,
      label: 'Data point 1',
      color: 'A1',
    },
    {
      value: 55,
      label: 'Data point 2',
      color: 'A1',
    },
    {
      value: 65,
      label: 'Data point 3',
      color: 'A6',
    },
  ];
  const tenDataPoints = [
    {
      value: 70,
      label: 'Data point 1',
      color: 'A1',
    },
    {
      value: 70,
      label: 'Data point 2',
      color: 'A1',
    },
    {
      value: 40,
      label: 'Data point 3',
      color: 'A1',
    },
    {
      value: 70,
      label: 'Data point 4',
      color: 'A1',
    },
    {
      value: 50,
      label: 'Data point 5',
      color: 'A1',
    },
    {
      value: 30,
      label: 'Data point 6',
      color: 'A1',
    },
    {
      value: 50,
      label: 'Data point 7',
      color: 'A6',
    },
    {
      value: 65,
      label: 'Data point 8',
      color: 'A6',
    },
    {
      value: 80,
      label: 'Data point 9',
      color: 'A6',
    },
    {
      value: 55,
      label: 'Data point 10',
      color: 'A6',
    },
  ];
  const scale = [
    { value: 25, label: '25%' },
    { value: 50, label: '50%' },
    { value: 75, label: '75%' },
    { value: 100, label: '100%' },
  ];

  return (
    <Box direction="vertical" align="center">
      <Box>
        <RadarChart data={threeDataPoints} scale={scale} />
      </Box>
      <Box>
        <RadarChart data={tenDataPoints} scale={scale} />
      </Box>
    </Box>
  );
};
```

### Label distance
- description: Control value label distance from a chart with `labelDistance` prop. It support two values:<br/>
      &emsp;- `medium` - use it to increase the distance for better visual balance in larger charts<br/>
      &emsp;- `small` (default) - use in all common cases
- example: 
```jsx 
() => {
  const dataForSmallLabelDistance = [
    {
      value: 70,
      label: 'Small',
      color: 'A1',
    },
    {
      value: 25,
      label: 'Small',
      color: 'A1',
    },
    {
      value: 50,
      label: 'Small',
      color: 'A1',
    },
    {
      value: 25,
      label: 'Small',
      color: 'A6',
    },
    {
      value: 75,
      label: 'Small',
      color: 'A6',
    },
    {
      value: 70,
      label: 'Small',
      color: 'A6',
    },
  ];
  const dataForMediumLabelDistance = [
    {
      value: 70,
      label: 'Medium',
      color: 'A1',
    },
    {
      value: 25,
      label: 'Medium',
      color: 'A1',
    },
    {
      value: 50,
      label: 'Medium',
      color: 'A1',
    },
    {
      value: 25,
      label: 'Medium',
      color: 'A6',
    },
    {
      value: 75,
      label: 'Medium',
      color: 'A6',
    },
    {
      value: 70,
      label: 'Medium',
      color: 'A6',
    },
  ];
  const scale = [
    { value: 25, label: '25%' },
    { value: 50, label: '50%' },
    { value: 75, label: '75%' },
    { value: 100, label: '100%' },
  ];

  return (
    <Box>
      <Box width="50%" align="center" verticalAlign="middle">
        <RadarChart
          data={dataForSmallLabelDistance}
          scale={scale}
          labelDistance={24}
        />
      </Box>
      <Box width="50%" align="center" verticalAlign="middle">
        <RadarChart
          data={dataForMediumLabelDistance}
          scale={scale}
          labelDistance={48}
        />
      </Box>
    </Box>
  );
};
```

### Scale
- description: Define any number of scale circles in the chart with a `scale` array.
- example: 
```jsx 
() => {
  const data = [
    {
      value: 70,
      label: 'Label',
      color: 'A1',
    },
    {
      value: 25,
      label: 'Label',
      color: 'A1',
    },
    {
      value: 50,
      label: 'Label',
      color: 'A1',
    },
    {
      value: 25,
      label: 'Label',
      color: 'A6',
    },
    {
      value: 75,
      label: 'Label',
      color: 'A6',
    },
    {
      value: 70,
      label: 'Label',
      color: 'A6',
    },
  ];
  const scale = [
    { value: 20, label: '20%' },
    { value: 40, label: '40%' },
    { value: 60, label: '60%' },
    { value: 80, label: '80%' },
    { value: 100, label: '100%' },
  ];

  return (
    <Box>
      <Box width="50%" align="center" verticalAlign="middle">
        <RadarChart data={data} />
      </Box>
      <Box width="50%" align="center" verticalAlign="middle">
        <RadarChart data={data} scale={scale} />
      </Box>
    </Box>
  );
};
```

### Disabled
- description: Disable all chart interactions with `disabled` prop. Use this as an empty state / content placeholder when there’s no data yet.
- example: 
```jsx 
() => {
  const data = [
    {
      value: 70,
      label: 'Label',
    },
    {
      value: 25,
      label: 'Label',
    },
    {
      value: 50,
      label: 'Label',
    },
    {
      value: 25,
      label: 'Label',
    },
    {
      value: 75,
      label: 'Label',
    },
    {
      value: 70,
      label: 'Label',
    },
  ];
  const scale = [
    { value: 25, label: '25%' },
    { value: 50, label: '50%' },
    { value: 75, label: '75%' },
    { value: 100, label: '100%' },
  ];

  return <RadarChart data={data} scale={scale} disabled />;
};
```




    


## Common Use Case Examples


### Empty state
- description: Use radar char in a disabled state as an empty state when there’s not enough data to create a chart yet. It will help to let users know upfront a possible benefit of analytics you’re offering.
- example: 
```jsx 
() => {
  const data = [
    { value: 80, label: 'Unique Visitors' },
    { value: 80, label: 'Avg. Session Duration' },
    { value: 80, label: 'Bounce Rate' },
    { value: 80, label: '% Returning Visitors' },
    { value: 80, label: '% Organic Search' },
    { value: 80, label: '% Social' },
  ];
  const scale = [
    { value: 20, label: '20%' },
    { value: 40, label: '40%' },
    { value: 60, label: '60%' },
    { value: 80, label: '80%' },
    { value: 100, label: '100%' },
  ];
  const [isTooltipVisible, setIsTooltipVisible] = React.useState(false);

  return (
    <Card>
      <Card.Header
        title={
          <Box>
            <Text weight="bold">Competition Radar</Text>
          </Box>
        }
        subtitle={
          <Text size="tiny">
            This is visual representation of your benchmarks. The more coverage
            you have, the better you're doing compared to others.
          </Text>
        }
      />
      <Card.Divider />
      <div
        style={{ position: 'relative', cursor: 'pointer' }}
        onMouseEnter={() => setIsTooltipVisible(true)}
        onMouseLeave={() => setIsTooltipVisible(false)}
      >
        <Box align="center" verticalAlign="middle">
          <RadarChart data={data} scale={scale} width={200} disabled />
        </Box>
        {isTooltipVisible && (
          <div
            style={{
              position: 'absolute',
              top: 0,
              left: 0,
              width: '100%',
              height: '100%',
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center',
              backgroundColor: 'rgba(255, 255, 255, 0.8)',
              textAlign: 'center',
            }}
          >
            <Box width={400} direction="vertical" align="center">
              <Text size="small">
                Your site doesn't have enough data to show benchmarks
              </Text>
            </Box>
          </div>
        )}
      </div>
      <Box direction="vertical" padding="0 SP5 SP5 SP5">
        <Divider />
        <Box direction="vertical" height={94} align="center" padding="SP5">
          <Box margin="0 SP3" width={228} textAlign="center">
            <Text size="small">
              Need help driving more traffic to your site
            </Text>
          </Box>
          <Box marginTop="SP3">
            <Button size="tiny" priority="secondary">
              Hire a Professional
            </Button>
          </Box>
        </Box>
      </Box>
    </Card>
  );
};
```