Radar Chart

Some examples of how to use the RadarChart component

Recharts

Simple

 
import { Radar, RadarChart, PolarGrid, PolarAngleAxis, PolarRadiusAxis, ResponsiveContainer } from 'recharts';
import { CustomTooltip, radarData } from '@tailus-ui/visualizations';

export const MyChart = () => {
    return (
        <div className="h-72 w-full max-w-xl text-[--ui-border-color]" data-shade="900">
            <ResponsiveContainer width="100%" height="100%">
                <RadarChart cx="50%" cy="50%" outerRadius="80%" data={radarData}>
                    <Tooltip content={<CustomTooltip active payload={[]} label="" />} />
                    <PolarGrid stroke="currentColor" />

                    <PolarAngleAxis fontSize={12} dataKey="subject" className="text-[--caption-text-color]" />
                    <PolarRadiusAxis fontSize={12} tickLine={false} domain={[0, 150]} stroke="var(--caption-text-color)" />

                    <Radar fill="var(--dv-primary)" stroke="var(--dv-primary)" fillOpacity={0.15} name="Mike" dataKey="A" />
                </RadarChart>
            </ResponsiveContainer>
        </div>
    )
}

Specified Domain

 
import { Radar, RadarChart, PolarGrid, PolarAngleAxis, PolarRadiusAxis, ResponsiveContainer, Tooltip } from 'recharts';
import { CustomTooltip, radarData } from '@tailus-ui/visualizations';

export const DomainRadarChart = () => {
    return (
        <div className="h-72 w-full max-w-xl text-[--ui-border-color]" data-shade="900">
            <ResponsiveContainer width="100%" height="100%">
                <RadarChart cx="50%" cy="50%" outerRadius="80%" data={radarData}>
                    <Tooltip content={<CustomTooltip active payload={[]} label="" />} />
                    <PolarGrid stroke="currentColor" />

                    <PolarAngleAxis fontSize={12} dataKey="subject" className="text-[--caption-text-color]" />
                    <PolarRadiusAxis fontSize={12} tickLine={false} domain={[0, 150]} stroke="var(--caption-text-color)" />

                    <Radar fill="var(--dv-accent)" stroke="var(--dv-accent)" fillOpacity={0.05} name="Lily" dataKey="B" />
                    <Radar fill="var(--dv-primary)" stroke="var(--dv-primary)" fillOpacity={0.1} name="Mike" dataKey="A" />
                </RadarChart>
            </ResponsiveContainer>
        </div>
    );
};