2

Ternary Chart

PreviousNext

Triangular composition plot for three-component mixtures.

SandClaySilt000202020404040606060808080100100100
"use client"

import { TernaryChart } from "@/components/ui/charts/scientific/ternary-chart"

const soilData = [
  { id: "Sample 1", a: 40, b: 35, c: 25, label: "Sandy Loam" },
  { id: "Sample 2", a: 20, b: 55, c: 25, label: "Clay Loam" },
  { id: "Sample 3", a: 65, b: 20, c: 15, label: "Sandy" },
  { id: "Sample 4", a: 30, b: 40, c: 30, label: "Loam" },
  { id: "Sample 5", a: 15, b: 65, c: 20, label: "Clay" },
  { id: "Sample 6", a: 55, b: 25, c: 20, label: "Sandy Clay" },
  { id: "Sample 7", a: 35, b: 45, c: 20, label: "Silty Clay" },
  { id: "Sample 8", a: 45, b: 30, c: 25, label: "Loamy Sand" },
]

export function TernaryChartDemo() {
  return (
    <TernaryChart
      data={soilData}
      labels={["Sand", "Clay", "Silt"]}
      showGrid
      showLabels
      gridLines={5}
    />
  )
}

About

A Ternary Chart (also called a triangle plot or simplex plot) visualizes compositions of three components that sum to a constant (typically 100%). Used extensively in geology (soil composition), chemistry (alloy composition), and any field dealing with three-part mixtures.

Installation

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

Usage

import { TernaryChart } from "@/components/ui/charts"
 
const data = [
  { id: "Sample 1", a: 40, b: 35, c: 25, label: "Sandy Loam" },
  { id: "Sample 2", a: 20, b: 55, c: 25, label: "Clay Loam" },
]
 
export function Example() {
  return <TernaryChart data={data} labels={["Sand", "Clay", "Silt"]} />
}

Variants

Filled Variant

Shows a convex hull area around data points.

Component ternary-chart-filled not found in registry.

Color By Group

Visualize material compositions with different colors per group.

Steel
Bronze
Brass
IronCopperZinc000252525505050757575100100100
"use client"

import { TernaryChart } from "@/components/ui/charts/scientific/ternary-chart"

const alloyData = [
  { id: "Steel A", a: 70, b: 20, c: 10, label: "High Iron", group: "Steel" },
  { id: "Steel B", a: 65, b: 25, c: 10, label: "Balanced", group: "Steel" },
  { id: "Bronze A", a: 10, b: 88, c: 2, label: "High Copper", group: "Bronze" },
  { id: "Bronze B", a: 12, b: 80, c: 8, label: "Tin Bronze", group: "Bronze" },
  { id: "Brass A", a: 5, b: 70, c: 25, label: "Standard", group: "Brass" },
  { id: "Brass B", a: 8, b: 62, c: 30, label: "High Zinc", group: "Brass" },
]

export function TernaryChartComposition() {
  return (
    <TernaryChart
      data={alloyData}
      labels={["Iron", "Copper", "Zinc"]}
      colorByGroup
      showGrid
      showLabels
      gridLines={4}
      pointRadius={8}
    />
  )
}

API Reference

PropTypeDefaultDescription
dataTernaryDataPoint[]requiredArray of a, b, c points
variant"standard" | "minimal" | "filled""standard"Visual style variant
labels[string, string, string]["A", "B", "C"]Axis labels
showGridbooleantrueShow grid lines
showLabelsbooleantrueShow axis labels
gridLinesnumber5Number of grid divisions
pointRadiusnumber6Data point radius
colorstring"#3b82f6"Single color for all points
colorByGroupbooleanfalseEnable coloring by group
colorSchemestring[]blue paletteColors for groups
normalizebooleantrueAuto-normalize to sum=1

Notes

  • Ternary charts are specialized for visualizing three-component mixtures where the sum equals 100% or 1
  • Commonly used in geology for soil composition (sand, silt, clay), chemistry for alloy compositions, and material science
  • The normalize prop automatically adjusts values to sum to 100%, making data preparation easier
  • Grid lines help users read precise values from the triangular coordinate system
  • Each vertex of the triangle represents 100% of one component, with values decreasing toward the opposite edge
  • The filled variant shows a convex hull around data points, useful for visualizing cluster boundaries