tessl/npm-tremor--react

Tremor React is a comprehensive React component library built on Tailwind CSS providing 60+ components for building data visualizations, charts, and analytical dashboards.

Overview

Eval results

Files

Chart Components

Name: tessl/npm-tremor--react
Author: tessl

Tremor provides 6 full-featured chart components and 3 compact spark variants, all built on Recharts.

All charts share BaseChartProps - reference that document for common props like valueFormatter, showLegend, onValueChange, etc.

Chart Selection

Component	Best For	Unique Props
AreaChart	Trends, cumulative totals	`stack`, `curveType`, `showGradient`, `connectNulls`
BarChart	Category comparisons	`layout`, `stack`, `relative`, `barCategoryGap`
LineChart	Time-series trends	`curveType`, `connectNulls`
DonutChart	Part-to-whole relationships	`variant: "donut"\|"pie"`, `label`, `showLabel`, `category`, `index`
ScatterChart	Correlations, distributions	`x`, `y`, `category`, `size`, `sizeRange`, `showOpacity`
FunnelChart	Conversion funnels	`variant`, `calculateFrom`, `evolutionGradient`

AreaChart

Filled areas below lines for trends and cumulative values.

interface AreaChartProps extends BaseChartProps {
  // Unique props
  stack?: boolean;
  curveType?: CurveType; // "linear" | "natural" | "monotone" | "step"
  connectNulls?: boolean;
  showGradient?: boolean;
}

Examples:

import { AreaChart } from '@tremor/react';

// Basic
<AreaChart
  data={[{ date: '2024-01', revenue: 2890 }, { date: '2024-02', revenue: 2756 }]}
  index="date"
  categories={['revenue']}
  colors={['blue']}
  valueFormatter={(v) => `$${v.toLocaleString()}`}
/>

// Stacked with gradient
<AreaChart
  data={data}
  index="date"
  categories={['mobile', 'desktop', 'tablet']}
  colors={['blue', 'violet', 'cyan']}
  stack={true}
  showGradient={true}
  curveType="monotone"
/>

// Interactive
<AreaChart
  data={data}
  index="date"
  categories={['users']}
  onValueChange={(e) => console.log(e?.categoryClicked)}
/>

BarChart

Versatile bars for comparisons. Supports vertical/horizontal, stacking, and percentage mode.

interface BarChartProps extends BaseChartProps {
  layout?: "vertical" | "horizontal"; // default: "vertical"
  stack?: boolean;
  relative?: boolean; // 100% stacked percentage mode
  barCategoryGap?: string | number;
  showAnimation?: boolean;
  animationDuration?: number;
}

Examples:

import { BarChart } from '@tremor/react';

// Vertical bars
<BarChart
  data={[{ product: 'Laptop', sales: 2890 }, { product: 'Phone', sales: 4756 }]}
  index="product"
  categories={['sales']}
  colors={['blue']}
/>

// Horizontal
<BarChart data={data} index="product" categories={['sales']} layout="horizontal" />

// Stacked percentage
<BarChart
  data={data}
  index="month"
  categories={['desktop', 'mobile', 'tablet']}
  stack={true}
  relative={true}
  valueFormatter={(v) => `${v}%`}
/>

LineChart

Lines for trend visualization with configurable curves.

interface LineChartProps extends BaseChartProps {
  curveType?: CurveType;
  connectNulls?: boolean; // Connect lines across null/undefined
}

Examples:

import { LineChart } from '@tremor/react';

// Multi-line with gaps
<LineChart
  data={[
    { month: 'Jan', expected: 2000, actual: 1800 },
    { month: 'Feb', expected: 2200, actual: null },
    { month: 'Mar', expected: 2400, actual: 2600 }
  ]}
  index="month"
  categories={['expected', 'actual']}
  colors={['gray', 'blue']}
  curveType="monotone"
  connectNulls={false}
/>

// Step line
<LineChart data={data} index="date" categories={['value']} curveType="step" />

DonutChart

Donut/pie charts for categorical proportions with optional center label.

interface DonutChartProps {
  data: any[];
  category?: string; // Key for values (default: "value")
  index?: string; // Key for labels (default: "name")
  colors?: (Color | string)[];
  variant?: "donut" | "pie";
  valueFormatter?: ValueFormatter;
  label?: string; // Center label text
  showLabel?: boolean;
  showAnimation?: boolean;
  animationDuration?: number;
  showTooltip?: boolean;
  noDataText?: string;
  onValueChange?: (value: EventProps) => void;
  customTooltip?: React.ComponentType<CustomTooltipProps>;
}

Examples:

import { DonutChart } from '@tremor/react';

// Basic donut
<DonutChart
  data={[
    { name: 'Chrome', value: 45 },
    { name: 'Safari', value: 30 },
    { name: 'Firefox', value: 15 }
  ]}
  category="value"
  index="name"
  colors={['blue', 'cyan', 'orange']}
  valueFormatter={(v) => `${v}%`}
/>

// With center label
<DonutChart data={data} label="Browser Share" showLabel={true} variant="donut" />

// Pie (no hole)
<DonutChart data={data} variant="pie" />

ScatterChart

Scatter plots for multi-dimensional data visualization with optional bubble sizing.

interface ScatterChartProps extends Omit<BaseChartProps, 'index' | 'categories'> {
  data: any[];
  x: string; // Key for X-axis values
  y: string; // Key for Y-axis values
  category: string; // Key for grouping/coloring
  size?: string; // Optional key for bubble sizes
  valueFormatter?: {
    x?: ValueFormatter;
    y?: ValueFormatter;
    size?: ValueFormatter;
  };
  sizeRange?: number[]; // [min, max] bubble sizes in px
  showOpacity?: boolean;
  // Plus all BaseChartProps except index/categories
}

Examples:

import { ScatterChart } from '@tremor/react';

// Basic scatter
<ScatterChart
  data={[
    { product: 'A', price: 29, sales: 2400, category: 'Electronics' },
    { product: 'B', price: 42, sales: 3200, category: 'Furniture' }
  ]}
  x="price"
  y="sales"
  category="category"
  colors={['blue', 'violet']}
  xAxisLabel="Price ($)"
  yAxisLabel="Sales"
  valueFormatter={{ x: (v) => `$${v}`, y: (v) => v.toLocaleString() }}
/>

// Bubble chart (with size)
<ScatterChart
  data={data}
  x="gdp"
  y="population"
  category="country"
  size="co2"
  sizeRange={[100, 1000]}
  showOpacity={true}
/>

FunnelChart

Conversion funnels for pipelines and multi-step processes.

interface FunnelChartProps {
  data: Array<{ value: number; name: string }>;
  evolutionGradient?: boolean; // Color gradient based on conversion rates
  gradient?: boolean; // Apply color gradient to bars
  valueFormatter?: ValueFormatter;
  calculateFrom?: "first" | "previous"; // Conversion rate calculation base
  color?: Color | string;
  variant?: "base" | "center"; // "base" = left-aligned, "center" = centered
  yAxisPadding?: number;
  showYAxis?: boolean;
  showXAxis?: boolean;
  showArrow?: boolean;
  showGridLines?: boolean;
  showTooltip?: boolean;
  onValueChange?: (value: EventProps) => void;
  customTooltip?: React.ComponentType<CustomTooltipProps>;
  noDataText?: string;
  rotateLabelX?: { angle: number; verticalShift?: number; xAxisHeight?: number };
  barGap?: number | `${number}%`;
  xAxisLabel?: string;
  yAxisLabel?: string;
}

Examples:

import { FunnelChart } from '@tremor/react';

// Sales funnel
<FunnelChart
  data={[
    { name: 'Visitors', value: 10000 },
    { name: 'Sign-ups', value: 2500 },
    { name: 'Trial Users', value: 1200 },
    { name: 'Paid Users', value: 450 }
  ]}
  calculateFrom="first"
  evolutionGradient={true}
  showArrow={true}
  valueFormatter={(v) => v.toLocaleString()}
/>

// Centered funnel
<FunnelChart data={data} variant="center" color="violet" gradient={true} />

Spark Charts

Compact inline chart variants optimized for dashboard cards. Share similar props to full-size charts but with minimal chrome (no axes, legends, or tooltips by default).

// Compact line chart
interface SparkLineChartProps {
  data: any[];
  categories: string[];
  index: string;
  colors?: (Color | string)[];
  curveType?: CurveType;
  connectNulls?: boolean;
  noDataText?: string;
  autoMinValue?: boolean;
  minValue?: number;
  maxValue?: number;
}

// Compact area chart
interface SparkAreaChartProps extends SparkLineChartProps {
  stack?: boolean;
  showGradient?: boolean;
  showAnimation?: boolean;
  animationDuration?: number;
}

// Compact bar chart
interface SparkBarChartProps {
  data: any[];
  categories: string[];
  index: string;
  colors?: (Color | string)[];
  stack?: boolean;
  relative?: boolean;
  showAnimation?: boolean;
  animationDuration?: number;
  noDataText?: string;
  autoMinValue?: boolean;
  minValue?: number;
  maxValue?: number;
}

Example:

import { Card, Metric, SparkLineChart } from '@tremor/react';

<Card>
  <Metric>$45,231</Metric>
  <SparkLineChart
    data={[{ date: '1', value: 120 }, { date: '2', value: 150 }]}
    categories={['value']}
    index="date"
    colors={['emerald']}
    className="h-10 mt-2"
  />
</Card>

Chart Event Handling

All charts support onValueChange for click interactions:

const [selected, setSelected] = useState<string | null>(null);

<BarChart
  data={data}
  index="month"
  categories={['revenue']}
  onValueChange={(event) => {
    // event is EventProps: { eventType, categoryClicked, ...data }
    setSelected(event?.categoryClicked || null);
  }}
/>

Custom Tooltips

All charts support custom tooltips via the customTooltip prop:

const CustomTooltip = ({ payload, active, label }: CustomTooltipProps) => {
  if (!active || !payload) return null;
  return (
    <div className="bg-white p-2 rounded shadow">
      <p>{label}</p>
      {payload.map((p) => <p key={p.name}>{p.value}</p>)}
    </div>
  );
};

<BarChart data={data} customTooltip={CustomTooltip} {...props} />

Performance Tips

Use startEndOnly={true} for large datasets (shows only first/last X-axis labels)
Disable animations by default: showAnimation={false} (Tremor default)
For very large datasets (>1000 points), consider data sampling
Use autoMinValue to optimize Y-axis scale

Common Mistakes

❌ Forgetting required index and categories props
❌ Not handling null in onValueChange callback (check event?.categoryClicked)
❌ Mixing array lengths in data (ensure all objects have same keys)
❌ Using DonutChart with wrong data shape (needs value/name or specify category/index)
❌ Not providing valueFormatter for consistent number display

tessl/npm-tremor--react

chart-elements.mddocs/

Chart Components

Chart Selection

AreaChart

BarChart

LineChart

DonutChart

ScatterChart

FunnelChart

Spark Charts

Chart Event Handling

Custom Tooltips

Performance Tips

Common Mistakes

See Also

tessl/npm-tremor--react

chart-elements.md.css-3qkkll{font-size:var(--chakra-font-sizes-sm);font-weight:var(--chakra-font-weights-normal);color:var(--chakra-colors-gray-300);}docs/

Chart Components

Chart Selection

AreaChart

BarChart

LineChart

DonutChart

ScatterChart

FunnelChart

Spark Charts

Chart Event Handling

Custom Tooltips

Performance Tips

Common Mistakes

See Also

chart-elements.mddocs/