2

Range Chart

PreviousNext

Visualize value ranges, confidence intervals, and forecast bands.

Series
JanFebMarAprMayJun01020304050
"use client"

import { RangeChart } from "@/components/ui/charts"

const temperatureData = [
  { category: "Jan", low: 5, high: 26, mid: 15 },
  { category: "Feb", low: 8, high: 37, mid: 22 },
  { category: "Mar", low: 12, high: 44, mid: 28 },
  { category: "Apr", low: 13, high: 36, mid: 24 },
  { category: "May", low: 7, high: 27, mid: 17 },
  { category: "Jun", low: 26, high: 33, mid: 29 },
]

export function RangeChartDemo() {
  return (
    <RangeChart
      data={temperatureData}
      lowLabel="Min"
      highLabel="Max"
      midLabel="Avg"
      color="#3b82f6"
    />
  )
}

About

Range Charts display data ranges as filled area bands between low and high values with a solid line through the midpoint. Perfect for showing temperature ranges, confidence intervals, sales forecasts, or any data with upper and lower bounds. Supports multiple series with different colors and forecast data with dashed lines.

Installation

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

Usage

import { RangeChart } from "@/components/ui/charts"
 
const data = [
  { category: "Jan", low: 5, high: 26, mid: 15 },
  { category: "Feb", low: 8, high: 37, mid: 22 },
  { category: "Mar", low: 12, high: 44, mid: 28 },
]
 
export function Example() {
  return (
    <RangeChart data={data} lowLabel="Min" highLabel="Max" midLabel="Avg" />
  )
}

Examples

Default (Smooth Area)

Smooth filled area between low and high values with a solid mid-line.

Series
JanFebMarAprMayJun01020304050
"use client"

import { RangeChart } from "@/components/ui/charts"

const temperatureData = [
  { category: "Jan", low: 5, high: 26, mid: 15 },
  { category: "Feb", low: 8, high: 37, mid: 22 },
  { category: "Mar", low: 12, high: 44, mid: 28 },
  { category: "Apr", low: 13, high: 36, mid: 24 },
  { category: "May", low: 7, high: 27, mid: 17 },
  { category: "Jun", low: 26, high: 33, mid: 29 },
]

export function RangeChartDemo() {
  return (
    <RangeChart
      data={temperatureData}
      lowLabel="Min"
      highLabel="Max"
      midLabel="Avg"
      color="#3b82f6"
    />
  )
}

Linear Area

Linear interpolation for angular range visualization, ideal for regional comparisons.

Series
AustraliaCanadaCentralFranceGermanyNortheast02,0004,0006,0008,000
"use client"

import { RangeChart } from "@/components/ui/charts"

const salesData = [
  { category: "Australia", low: 2500, high: 4200, mid: 3500 },
  { category: "Canada", low: 4000, high: 8000, mid: 6000 },
  { category: "Central", low: 2800, high: 4200, mid: 3500 },
  { category: "France", low: 2500, high: 4000, mid: 3200 },
  { category: "Germany", low: 900, high: 2800, mid: 1800 },
  { category: "Northeast", low: 3200, high: 5500, mid: 4300 },
]

export function RangeChartBars() {
  return (
    <RangeChart
      data={salesData}
      variant="bars"
      lowLabel="Min"
      highLabel="Max"
      midLabel="Avg"
      color="#4472c4"
      fillOpacity={0.5}
      showMarkers={true}
    />
  )
}

Multi-Series with Forecast

Multiple data series with forecast sections shown as dashed lines.

Series
ControlTreatment ATreatment BTreatment CTreatment D0%20%40%60%80%
"use client"

import { RangeChart } from "@/components/ui/charts"

const experimentData = [
  { category: "Control", low: 45, high: 55, mid: 50 },
  { category: "Treatment A", low: 58, high: 72, mid: 65 },
  { category: "Treatment B", low: 52, high: 68, mid: 60 },
  { category: "Treatment C", low: 70, high: 85, mid: 78 },
  { category: "Treatment D", low: 62, high: 75, mid: 68 },
]

export function RangeChartErrorBars() {
  return (
    <RangeChart
      data={experimentData}
      variant="bars"
      showErrorBars={true}
      showMarkers={true}
      lowLabel="Lower CI"
      highLabel="Upper CI"
      midLabel="Mean"
      color="#8b5cf6"
      fillOpacity={0.4}
      valueFormatter={(v) => `${v}%`}
    />
  )
}

Salary Bands

Visualize salary ranges across different job levels.

Series
JuniorMid-LevelSeniorLeadPrincipal$0K$50K$100K$150K$200K
"use client"

import { RangeChart } from "@/components/ui/charts"

const salaryData = [
  { category: "Junior", low: 45, high: 65, mid: 55 },
  { category: "Mid-Level", low: 65, high: 95, mid: 80 },
  { category: "Senior", low: 95, high: 140, mid: 115 },
  { category: "Lead", low: 120, high: 170, mid: 145 },
  { category: "Principal", low: 150, high: 220, mid: 185 },
]

export function RangeChartFloating() {
  return (
    <RangeChart
      data={salaryData}
      lowLabel="Min Salary"
      highLabel="Max Salary"
      midLabel="Median"
      color="#8b5cf6"
      fillOpacity={0.4}
      valueFormatter={(v) => `$${v}K`}
    />
  )
}

Band Variant

Uniform fill opacity for cleaner stock price visualizations.

Series
EngineeringDesignMarketingSalesSupport0%20%40%60%80%100%
"use client"

import { RangeChart } from "@/components/ui/charts"

const performanceData = [
  { category: "Engineering", low: 72, high: 95, mid: 85 },
  { category: "Design", low: 68, high: 92, mid: 80 },
  { category: "Marketing", low: 75, high: 98, mid: 88 },
  { category: "Sales", low: 65, high: 90, mid: 78 },
  { category: "Support", low: 70, high: 88, mid: 82 },
]

export function RangeChartHorizontal() {
  return (
    <RangeChart
      data={performanceData}
      variant="horizontal"
      showMarkers={true}
      lowLabel="Min"
      highLabel="Max"
      midLabel="Avg"
      color="#10b981"
      fillOpacity={0.4}
      valueFormatter={(v) => `${v}%`}
    />
  )
}

API Reference

PropTypeDefaultDescription
dataRangeDataPoint[]-Single series data points
seriesRangeSeries[]-Multiple series data
variant"area" | "band""area"Visual style
curve"smooth" | "linear""smooth"Curve interpolation
showMidLinebooleantrueShow line through mid values
showGridbooleantrueShow grid lines
showMarkersbooleantrueShow data point markers
fillOpacitynumber0.25Opacity of range fill (0-1)
colorstring"#3b82f6"Default color for single series
colorsstring[][...]Array of colors for multiple series
lowLabelstring"Low"Label for low values in tooltip
highLabelstring"High"Label for high values in tooltip
midLabelstring"Value"Label for mid values in tooltip
valueFormatterfunctiontoLocaleStringFormat display values

Data Format

Single Series

interface RangeDataPoint {
  category: string // X-axis category label
  low: number // Lower bound of range
  high: number // Upper bound of range
  mid?: number // Optional middle value (mean, median, etc.)
  forecast?: boolean // Mark as forecast data (dashed line)
}

Multiple Series

interface RangeSeries {
  name: string // Series name for legend
  data: RangeDataPoint[] // Array of data points
  color?: string // Optional series color
}
 
// Usage
;<RangeChart
  series={[
    { name: "Team A", data: teamAData, color: "#22d3ee" },
    { name: "Team B", data: teamBData, color: "#f87171" },
  ]}
/>

Variants

Area (Default)

Filled area band between low and high values with gradient fill. Best for continuous data like time series ranges.

Band

Similar to area but with uniform fill opacity. Good for simpler visualizations.

Features

  • Multi-series support: Display multiple range series with automatic color assignment
  • Forecast mode: Mark data points as forecasts to render them with dashed lines
  • Smooth/Linear curves: Choose between smooth monotone curves or sharp linear interpolation
  • Interactive tooltips: Hover over data points to see detailed values
  • Responsive design: Charts automatically scale to container width
  • Dark mode support: Proper styling for both light and dark themes