or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

advanced-charts.mdbasic-charts.mdconfiguration.mdindex.mdspecialty-charts.mdstatistical-charts.mdtiny-charts.mdutilities.md
tile.json

tiny-charts.mddocs/

Tiny Chart Components

Compact chart components optimized for small spaces and dashboard use including tiny line, area, column, progress, and ring charts.

Capabilities

Tiny Charts Overview

Tiny charts are lightweight, minimal chart components designed for use in dashboards, cards, and other space-constrained interfaces. They focus on showing trends and key metrics without detailed axes or legends.

/**
 * Tiny charts collection containing compact visualization components
 */
const Tiny: {
  Line: ForwardRefExoticComponent<PropsWithoutRef<TinyLineConfig> & RefAttributes<Chart>>;
  Area: ForwardRefExoticComponent<PropsWithoutRef<TinyAreaConfig> & RefAttributes<Chart>>;
  Column: ForwardRefExoticComponent<PropsWithoutRef<TinyColumnConfig> & RefAttributes<Chart>>;
  Progress: ForwardRefExoticComponent<PropsWithoutRef<TinyProgressConfig> & RefAttributes<Chart>>;
  Ring: ForwardRefExoticComponent<PropsWithoutRef<CommonConfig<TinyRingOptions>> & RefAttributes<Chart>>;
};

Tiny Line Chart

Creates compact line charts for showing trends in small spaces.

/**
 * Tiny line chart component for compact trend visualization
 */
const TinyLine: ForwardRefExoticComponent<PropsWithoutRef<TinyLineConfig> & RefAttributes<Chart>>;

interface TinyLineConfig extends CommonConfig<TinyLineOptions> {}

interface TinyLineOptions extends Options {
  // Specific configuration for tiny line charts
}

Usage Example:

import React from "react";
import { Tiny } from "@ant-design/plots";

const data = [
  264, 417, 438, 887, 309, 397, 550, 575, 563, 430, 525, 592, 492, 467, 513, 546, 983, 340, 539, 243, 226, 192,
];

const config = {
  height: 60,
  width: 300,
  data,
  smooth: true,
  areaStyle: {
    fill: 'l(270) 0:#ffffff 0.5:#7ec2f3 1:#1890ff',
  },
};

return <Tiny.Line {...config} />;

Tiny Area Chart

Creates compact area charts for showing cumulative trends.

/**
 * Tiny area chart component for compact cumulative visualization
 */
const TinyArea: ForwardRefExoticComponent<PropsWithoutRef<TinyAreaConfig> & RefAttributes<Chart>>;

interface TinyAreaConfig extends CommonConfig<TinyAreaOptions> {}

interface TinyAreaOptions extends Options {
  // Specific configuration for tiny area charts
}

Usage Example:

import React from "react";
import { Tiny } from "@ant-design/plots";

const data = [
  264, 417, 438, 887, 309, 397, 550, 575, 563, 430, 525, 592, 492, 467, 513, 546, 983, 340, 539, 243,
];

const config = {
  height: 60,
  width: 300,
  data,
  smooth: true,
  line: {
    color: '#975FE4',
  },
  areaStyle: {
    fill: 'l(270) 0:#ffffff 0.5:#975FE4 1:#975FE4',
    fillOpacity: 0.6,
  },
};

return <Tiny.Area {...config} />;

Tiny Column Chart

Creates compact column charts for showing categorical data comparisons.

/**
 * Tiny column chart component for compact categorical visualization
 */
const TinyColumn: ForwardRefExoticComponent<PropsWithoutRef<TinyColumnConfig> & RefAttributes<Chart>>;

interface TinyColumnConfig extends CommonConfig<TinyColumnOptions> {}

interface TinyColumnOptions extends Options {
  // Specific configuration for tiny column charts
}

Usage Example:

import React from "react";
import { Tiny } from "@ant-design/plots";

const data = [274, 337, 81, 497, 666, 219, 269];

const config = {
  height: 60,
  width: 300,
  data,
  tooltip: {
    customContent: (x, data) => {
      return `NO.${x}: ${data[0]?.data?.y.toFixed(2)}`;
    },
  },
};

return <Tiny.Column {...config} />;

Tiny Progress Chart

Creates compact progress indicators showing completion percentages.

/**
 * Tiny progress chart component for compact percentage visualization
 */
const TinyProgress: ForwardRefExoticComponent<PropsWithoutRef<TinyProgressConfig> & RefAttributes<Chart>>;

interface TinyProgressConfig extends CommonConfig<TinyProgressOptions> {}

interface TinyProgressOptions extends Options {
  // Specific configuration for tiny progress charts
}

Usage Example:

import React from "react";
import { Tiny } from "@ant-design/plots";

const config = {
  height: 60,
  width: 300,
  percent: 0.68,
  color: ['#E8EDF3', '#5B8FF9'],
  barWidthRatio: 0.2,
  progressStyle: {
    lineCap: 'round',
  },
};

return <Tiny.Progress {...config} />;

Tiny Ring Chart

Creates compact ring charts for showing single percentage values.

/**
 * Tiny ring chart component for compact circular percentage visualization
 */
const TinyRing: ForwardRefExoticComponent<PropsWithoutRef<CommonConfig<TinyRingOptions>> & RefAttributes<Chart>>;

interface TinyRingOptions extends Options {
  // Specific configuration for tiny ring charts
}

Usage Example:

import React from "react";
import { Tiny } from "@ant-design/plots";

const config = {
  height: 60,
  width: 60,
  percent: 0.7,
  color: ['#E8EDF3', '#5B8FF9'],
  innerRadius: 0.85,
  radius: 0.98,
  statistic: {
    title: {
      style: {
        color: '#363636',
        fontSize: '12px',
        lineHeight: '14px',
      },
      formatter: () => '进度',
    },
    content: {
      style: {
        color: '#4B535E',
        fontSize: '24px',
        lineHeight: '26px',
      },
      formatter: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
    },
  },
};

return <Tiny.Ring {...config} />;

Tiny Chart Features

Minimal Configuration

Tiny charts are designed to work with minimal configuration, focusing on essential data display:

// Basic data format for most tiny charts
type TinyData = number[] | Array<{ x: any; y: number }>;

// Common tiny chart options
interface TinyChartOptions {
  /** Chart height (typically 40-100px) */
  height?: number;
  /** Chart width */
  width?: number;
  /** Chart data */
  data?: TinyData;
  /** Smooth curves for line/area charts */
  smooth?: boolean;
  /** Color configuration */
  color?: string | string[];
}

Usage in Dashboards

Tiny charts are perfect for dashboard cards and summary views:

import React from "react";
import { Tiny } from "@ant-design/plots";

const DashboardCard: React.FC = () => {
  const salesData = [120, 132, 101, 134, 90, 230, 210];
  const conversionRate = 0.68;
  
  return (
    <div className="dashboard-card">
      <div className="metric">
        <h3>Sales Trend</h3>
        <Tiny.Line
          height={40}
          width={200}
          data={salesData}
          smooth
          color="#1890ff"
        />
      </div>
      
      <div className="metric">
        <h3>Conversion Rate</h3>
        <Tiny.Progress
          height={20}
          width={200}
          percent={conversionRate}
          color={['#f0f0f0', '#52c41a']}
        />
        <span>{(conversionRate * 100).toFixed(1)}%</span>
      </div>
      
      <div className="metric">
        <h3>Goal Progress</h3>
        <Tiny.Ring
          height={80}
          width={80}
          percent={0.75}
          innerRadius={0.8}
          statistic={{
            content: {
              formatter: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
            },
          }}
        />
      </div>
    </div>
  );
};

Responsive Design

Tiny charts automatically adapt to their container size:

// Responsive configuration for tiny charts
interface ResponsiveTinyConfig {
  /** Auto-fit to container */
  autoFit?: boolean;
  /** Minimum dimensions */
  minHeight?: number;
  minWidth?: number;
  /** Responsive breakpoints */
  responsive?: boolean;
}

Performance Optimization

Tiny charts are optimized for performance with minimal rendering overhead:

  • Reduced animation complexity
  • Simplified interaction patterns
  • Efficient data processing
  • Minimal DOM elements
  • Fast re-render capabilities

Styling Options

// Styling options for tiny charts
interface TinyChartStyle {
  /** Line style for line/area charts */
  lineStyle?: {
    stroke?: string;
    lineWidth?: number;
    lineDash?: number[];
  };
  
  /** Area fill style */
  areaStyle?: {
    fill?: string;
    fillOpacity?: number;
  };
  
  /** Column/bar style */
  columnStyle?: {
    fill?: string;
    stroke?: string;
    radius?: number;
  };
  
  /** Progress bar style */
  progressStyle?: {
    lineCap?: 'round' | 'square';
    lineWidth?: number;
  };
}