Parcats Chart

Parallel Categories for visualizing flows through categorical variables.

"use client"

import { ParcatsChart } from "@/components/ui/charts/statistical/parcats-chart"

const surveyData = [
  { id: "1", categories: { Gender: "Male", Age: "18-24", Device: "Mobile" } },
  {
    id: "2",
    categories: { Gender: "Female", Age: "25-34", Device: "Desktop" },
  },
  { id: "3", categories: { Gender: "Male", Age: "25-34", Device: "Mobile" } },
  { id: "4", categories: { Gender: "Female", Age: "18-24", Device: "Tablet" } },
  { id: "5", categories: { Gender: "Male", Age: "35-44", Device: "Desktop" } },
  { id: "6", categories: { Gender: "Female", Age: "35-44", Device: "Mobile" } },
  { id: "7", categories: { Gender: "Male", Age: "18-24", Device: "Desktop" } },
  { id: "8", categories: { Gender: "Female", Age: "25-34", Device: "Mobile" } },
  { id: "9", categories: { Gender: "Male", Age: "25-34", Device: "Tablet" } },
  { id: "10", categories: { Gender: "Female", Age: "45+", Device: "Desktop" } },
  { id: "11", categories: { Gender: "Male", Age: "45+", Device: "Mobile" } },
  {
    id: "12",
    categories: { Gender: "Female", Age: "18-24", Device: "Mobile" },
  },
]

const dimensions = ["Gender", "Age", "Device"]

export function ParcatsChartDemo() {
  return <ParcatsChart data={surveyData} dimensions={dimensions} showCounts />
}

About

Parallel Categories (Parcats) is similar to Parallel Coordinates but designed for categorical data. It shows how data flows through different categorical dimensions, making it ideal for visualizing user journeys, survey responses, and multi-stage categorical processes.

Installation


pnpm dlx shadcn@latest add https://ui.simplifying.ai/r/parcats-chart.json

Usage

import { ParcatsChart } from "@/components/ui/charts"
 
const data = [
  { id: "1", categories: { Gender: "Male", Age: "18-24", Device: "Mobile" } },
  {
    id: "2",
    categories: { Gender: "Female", Age: "25-34", Device: "Desktop" },
  },
]
 
const dimensions = ["Gender", "Age", "Device"]
 
export function Example() {
  return <ParcatsChart data={data} dimensions={dimensions} />
}

Examples

Default (Standard)

Standard parallel categories with single color flow lines.

"use client"

import { ParcatsChart } from "@/components/ui/charts/statistical/parcats-chart"

const surveyData = [
  { id: "1", categories: { Gender: "Male", Age: "18-24", Device: "Mobile" } },
  {
    id: "2",
    categories: { Gender: "Female", Age: "25-34", Device: "Desktop" },
  },
  { id: "3", categories: { Gender: "Male", Age: "25-34", Device: "Mobile" } },
  { id: "4", categories: { Gender: "Female", Age: "18-24", Device: "Tablet" } },
  { id: "5", categories: { Gender: "Male", Age: "35-44", Device: "Desktop" } },
  { id: "6", categories: { Gender: "Female", Age: "35-44", Device: "Mobile" } },
  { id: "7", categories: { Gender: "Male", Age: "18-24", Device: "Desktop" } },
  { id: "8", categories: { Gender: "Female", Age: "25-34", Device: "Mobile" } },
  { id: "9", categories: { Gender: "Male", Age: "25-34", Device: "Tablet" } },
  { id: "10", categories: { Gender: "Female", Age: "45+", Device: "Desktop" } },
  { id: "11", categories: { Gender: "Male", Age: "45+", Device: "Mobile" } },
  {
    id: "12",
    categories: { Gender: "Female", Age: "18-24", Device: "Mobile" },
  },
]

const dimensions = ["Gender", "Age", "Device"]

export function ParcatsChartDemo() {
  return <ParcatsChart data={surveyData} dimensions={dimensions} showCounts />
}

Color By Category

Flow lines colored by their first dimension category.

Direct

Google

Social

"use client"

import { ParcatsChart } from "@/components/ui/charts/statistical/parcats-chart"

const userJourneyData = [
  {
    id: "1",
    categories: { Source: "Google", Landing: "Home", Action: "Purchase" },
  },
  {
    id: "2",
    categories: { Source: "Social", Landing: "Product", Action: "Purchase" },
  },
  {
    id: "3",
    categories: { Source: "Google", Landing: "Product", Action: "Browse" },
  },
  {
    id: "4",
    categories: { Source: "Direct", Landing: "Home", Action: "Browse" },
  },
  {
    id: "5",
    categories: { Source: "Social", Landing: "Blog", Action: "Subscribe" },
  },
  {
    id: "6",
    categories: { Source: "Google", Landing: "Home", Action: "Purchase" },
  },
  {
    id: "7",
    categories: { Source: "Email", Landing: "Product", Action: "Purchase" },
  },
  {
    id: "8",
    categories: { Source: "Direct", Landing: "Product", Action: "Purchase" },
  },
  {
    id: "9",
    categories: { Source: "Social", Landing: "Home", Action: "Browse" },
  },
  {
    id: "10",
    categories: { Source: "Google", Landing: "Blog", Action: "Subscribe" },
  },
  {
    id: "11",
    categories: { Source: "Email", Landing: "Home", Action: "Browse" },
  },
  {
    id: "12",
    categories: { Source: "Direct", Landing: "Blog", Action: "Subscribe" },
  },
]

const dimensions = ["Source", "Landing", "Action"]

export function ParcatsChartFlow() {
  return (
    <ParcatsChart
      data={userJourneyData}
      dimensions={dimensions}
      colorByCategory
      showCounts
    />
  )
}

Ribbon Variant

Thicker ribbon-style lines with custom color.

Direct

Social

"use client"

import { ParcatsChart } from "@/components/ui/charts/statistical/parcats-chart"

// Traffic flow data with values (proportional ribbon widths)
const trafficData = [
  {
    id: "1",
    categories: { Source: "Direct", Device: "Desktop", Action: "Purchase" },
    value: 1200,
  },
  {
    id: "2",
    categories: { Source: "Direct", Device: "Mobile", Action: "Browse" },
    value: 800,
  },
  {
    id: "3",
    categories: { Source: "Search", Device: "Desktop", Action: "Purchase" },
    value: 950,
  },
  {
    id: "4",
    categories: { Source: "Search", Device: "Mobile", Action: "Browse" },
    value: 600,
  },
  {
    id: "5",
    categories: { Source: "Social", Device: "Mobile", Action: "Browse" },
    value: 450,
  },
  {
    id: "6",
    categories: { Source: "Social", Device: "Desktop", Action: "Purchase" },
    value: 300,
  },
  {
    id: "7",
    categories: { Source: "Email", Device: "Desktop", Action: "Purchase" },
    value: 550,
  },
  {
    id: "8",
    categories: { Source: "Email", Device: "Mobile", Action: "Browse" },
    value: 200,
  },
]

const dimensions = ["Source", "Device", "Action"]

export function ParcatsChartRibbon() {
  return (
    <ParcatsChart
      data={trafficData}
      dimensions={dimensions}
      variant="ribbon"
      showCounts
      colorByCategory
    />
  )
}

API Reference

Prop	Type	Default	Description
data	ParcatsDataPoint[]	required	Array of data points
dimensions	string[]	required	Category dimension names
variant	"standard" \| "ribbon" \| "minimal"	"standard"	Visual style
showCounts	boolean	true	Show category counts
lineOpacity	number	0.5	Flow line opacity (0-1)
color	string	"#3b82f6"	Single color for all flows
colorByCategory	boolean	false	Color by first dimension
colorScheme	string[]	blue palette	Colors for categories

Data Format

interface ParcatsDataPoint {
  id: string // Unique identifier
  categories: Record<string, string> // Category values per dimension
  value?: number // Optional weight/count
}

Variants

Standard

Default flow lines connecting categories across dimensions. Clean and readable.

Ribbon

Thicker ribbon-style lines for more visual impact. Good for emphasizing flows.

Minimal

Clean view without category counts. Focus on the flow patterns.

Features

Flow visualization: See how data flows through categorical dimensions
Category highlighting: Hover over categories to highlight all related flows
Interactive tooltips: See full path on hover
Color by category: Optional coloring based on first dimension
Single color mode: Use color prop for consistent appearance
Dark mode support: Proper styling for both themes

Notes

Parcats charts are ideal for visualizing how categorical data flows through different stages
Each vertical column represents a categorical dimension
Ribbons show how categories relate across dimensions
When colorByCategory is enabled, flows are colored based on their value in the first dimension
Use this chart for user journey analysis, conversion funnels, survey responses, or any multi-stage categorical data

SPLOM Chart Candlestick Chart

On This Page

About Installation Usage Examples Default (Standard)Color By Category Ribbon Variant API Reference Data Format Variants Standard Ribbon Minimal Features Notes

Deploy and Scale Agents with Simplifying AI

Simplifying AI delivers the infrastructure and developer experience you need to ship reliable audio & agent applications at scale.