Radar Chart

Beautiful charts. Built using chartjs and react-chartjs-2. Copy and paste into your apps or run the command into your CLI.

1. Install utilities

You need to install some necessary packages to use the below Radar Charts. Please run the command into your terminal.

bun add chart.js react-chartjs-2

2. Setup files

Create a file named as chart-utils.ts inside your lib folder and paste the code.

"use client";

import { useTheme } from "next-themes";
import { useEffect, useState } from "react";

export type ChartColors = {
  primary: string;
  secondary: string;
  tertiary: string;
  quaternary: string;
  quinary: string;
  senary: string;
  background: string;
  grid: string;
  text: string;
};

export function useChartColors(): ChartColors {
  const { theme } = useTheme();
  const [colors, setColors] = useState<ChartColors>({
    primary: "rgb(99, 102, 241)",
    secondary: "rgb(168, 85, 247)",
    tertiary: "rgb(249, 115, 22)",
    quaternary: "rgb(34, 197, 94)",
    quinary: "rgb(239, 68, 68)",
    senary: "rgb(6, 182, 212)",
    background: "rgb(255, 255, 255)",
    grid: "rgb(243, 244, 246)",
    text: "rgb(17, 24, 39)",
  });

  useEffect(() => {
    if (theme === "dark") {
      setColors({
        primary: "rgb(129, 140, 248)",
        secondary: "rgb(192, 132, 252)",
        tertiary: "rgb(251, 146, 60)",
        quaternary: "rgb(74, 222, 128)",
        quinary: "rgb(248, 113, 113)",
        senary: "rgb(34, 211, 238)",
        background: "rgb(17, 24, 39)",
        grid: "rgb(55, 65, 81)",
        text: "rgb(243, 244, 246)",
      });
    } else {
      setColors({
        primary: "rgb(99, 102, 241)",
        secondary: "rgb(168, 85, 247)",
        tertiary: "rgb(249, 115, 22)",
        quaternary: "rgb(34, 197, 94)",
        quinary: "rgb(239, 68, 68)",
        senary: "rgb(6, 182, 212)",
        background: "rgb(255, 255, 255)",
        grid: "rgb(243, 244, 246)",
        text: "rgb(17, 24, 39)",
      });
    }
  }, [theme]);

  return colors;
}

export const months = [
  "January",
  "February",
  "March",
  "April",
  "May",
  "June",
  "July",
  "August",
  "September",
  "October",
  "November",
  "December",
];

export const categories = [
  "Desktop",
  "Mobile",
  "Tablet",
  "Smart TV",
  "Wearables",
  "Other",
];

export const radarLabels = [
  "Speed",
  "Reliability",
  "Comfort",
  "Safety",
  "Efficiency",
  "Design",
];

export const skillLabels = [
  "JavaScript",
  "React",
  "Node.js",
  "Python",
  "Design",
  "Communication",
];

export const generateRandomData = (count: number, max: number, min = 0) => {
  return Array.from({ length: count }, () =>
    Math.floor(Math.random() * (max - min + 1) + min)
  );
};

export const generateRadarData = (count: number, max = 100, min = 20) => {
  return Array.from({ length: count }, () =>
    Math.floor(Math.random() * (max - min + 1) + min)
  );
};

export const generatePieColors = (colors: ChartColors) => [
  colors.primary,
  colors.secondary,
  colors.tertiary,
  colors.quaternary,
  colors.quinary,
  colors.senary,
];

export const createGradient = (
  ctx: CanvasRenderingContext2D,
  color: string,
  opacity = 0.2
) => {
  const gradient = ctx.createLinearGradient(0, 0, 0, 400);
  gradient.addColorStop(
    0,
    color.replace("rgb", "rgba").replace(")", `, ${opacity})`)
  );
  gradient.addColorStop(1, color.replace("rgb", "rgba").replace(")", ", 0)"));
  return gradient;
};

Create a file named as chart-types.ts inside your types folder and paste the code.

import type React from "react";
import type { ChartData, ChartOptions } from "chart.js";

export interface LineChartProps {
  data: ChartData<"line">;
  options?: ChartOptions<"line">;
  className?: string;
}

export interface AreaChartProps {
  data: ChartData<"line">;
  options?: ChartOptions<"line">;
  className?: string;
}

export interface BarChartProps {
  data: ChartData<"bar">;
  options?: ChartOptions<"bar">;
  className?: string;
}

export interface PieChartProps {
  data: ChartData<"pie">;
  options?: ChartOptions<"pie">;
  className?: string;
}

export interface DoughnutChartProps {
  data: ChartData<"doughnut">;
  options?: ChartOptions<"doughnut">;
  className?: string;
}

export interface RadarChartProps {
  data: ChartData<"radar">;
  options?: ChartOptions<"radar">;
  className?: string;
}

export interface MixedChartProps {
  data: ChartData<"bar" | "line">;
  options?: ChartOptions<"bar" | "line">;
  className?: string;
}

export interface ChartContainerProps {
  children: React.ReactNode;
  className?: string;
}

export interface ChartDataPoint {
  x: string | number;
  y: number;
}

export interface AreaDataset {
  type?: string;
  label: string;
  data: number[] | ChartDataPoint[];
  borderColor: string | string[] | ((context: any) => string);
  backgroundColor:
    | string
    | string[]
    | ((context: any) => string | CanvasGradient);
  borderWidth?: number | number[];
  tension?: number;
  stepped?: boolean | "before" | "after" | "middle";
  fill?: boolean | string | number;
  pointRadius?: number;
  pointHoverRadius?: number;
  pointStyle?: string;
  pointBorderColor?: string;
  pointBorderWidth?: number;
  pointBackgroundColor?: string;
  yAxisID?: string;
}

export interface PieDataset {
  data: number[];
  backgroundColor: string | string[];
  borderColor?: string | string[];
  borderWidth?: number | number[];
  cutout?: string | number;
  offset?: number | number[];
  hoverOffset?: number;
  hoverBorderWidth?: number;
}

export interface RadarDataset {
  label: string;
  data: number[];
  borderColor: string;
  backgroundColor: string;
  borderWidth?: number;
  pointBackgroundColor?: string;
  pointBorderColor?: string;
  pointHoverBackgroundColor?: string;
  pointHoverBorderColor?: string;
  pointRadius?: number;
  pointHoverRadius?: number;
  pointBorderWidth?: number;
  fill?: boolean;
}

export interface ChartConfig {
  labels: string[];
  datasets: AreaDataset[] | PieDataset[] | RadarDataset[];
}

Thats it. You are ready to go!

On this page