or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

advanced-visualizations.mdcomposite-charts.mdgauge-progress.mdgraph-components.mdindex.mdspecialized-charts.mdstatistical-charts.mdtiny-charts.md
tile.json

tiny-charts.mddocs/

Tiny Charts

Compact chart components for sparklines and embedded visualizations where space is limited. Tiny charts are simplified versions of regular charts with minimal configuration and reduced visual elements.

Capabilities

Tiny Area Chart

Creates compact area charts for sparklines and embedded visualizations.

/**
 * Tiny area chart component for sparklines
 * @param props - TinyArea configuration with simplified data format
 * @returns React component
 */
function TinyArea(props: TinyAreaConfig): JSX.Element;

interface TinyAreaConfig extends TinyAreaOptions, ContainerConfig<TinyAreaOptions> {
  chartRef?: ChartRefConfig;
}

interface TinyAreaOptions extends Omit<Options, 'data' | 'legend' | 'label'> {
  data: number[];
  smooth?: boolean;
  areaStyle?: any;
  line?: any;
}

Usage Example:

import { TinyArea } from "@ant-design/charts";

const TinyAreaExample = () => {
  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 = {
    data,
    smooth: true,
    areaStyle: {
      fill: '#d6e3fd',
    },
    line: {
      color: '#1890ff',
    },
  };

  return <TinyArea {...config} />;
};

Tiny Column Chart

Creates compact column charts for sparklines and embedded visualizations.

/**
 * Tiny column chart component for sparklines
 * @param props - TinyColumn configuration with simplified data format
 * @returns React component
 */
function TinyColumn(props: TinyColumnConfig): JSX.Element;

interface TinyColumnConfig extends TinyColumnOptions, ContainerConfig<TinyColumnOptions> {
  chartRef?: ChartRefConfig;
}

interface TinyColumnOptions extends Omit<Options, 'data' | 'legend' | 'label'> {
  data: number[];
  columnWidthRatio?: number;
  columnStyle?: any;
}

Usage Example:

import { TinyColumn } from "@ant-design/charts";

const TinyColumnExample = () => {
  const data = [274, 337, 81, 497, 666, 219, 269];

  const config = {
    data,
    columnWidthRatio: 0.8,
    columnStyle: {
      fill: '#36c',
    },
  };

  return <TinyColumn {...config} />;
};

Tiny Line Chart

Creates compact line charts for sparklines and embedded visualizations.

/**
 * Tiny line chart component for sparklines
 * @param props - TinyLine configuration with simplified data format
 * @returns React component
 */
function TinyLine(props: TinyLineConfig): JSX.Element;

interface TinyLineConfig extends TinyLineOptions, ContainerConfig<TinyLineOptions> {
  chartRef?: ChartRefConfig;
}

interface TinyLineOptions extends Omit<Options, 'data' | 'legend' | 'label'> {
  data: number[];
  smooth?: boolean;
  connectNulls?: boolean;
  lineStyle?: any;
  point?: any;
}

Usage Example:

import { TinyLine } from "@ant-design/charts";

const TinyLineExample = () => {
  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 = {
    data,
    smooth: true,
    lineStyle: {
      stroke: '#1890ff',
      lineWidth: 2,
    },
    point: {
      size: 3,
      shape: 'circle',
    },
  };

  return <TinyLine {...config} />;
};

Common Tiny Chart Properties

All tiny charts share common properties and behaviors:

Data Format

interface TinyPlotOptions extends Omit<Options, 'data' | 'legend' | 'label'> {
  /** Simple array of numbers for tiny charts */
  data: number[];
}

Characteristics

  • Simplified Data: Accept simple arrays of numbers instead of complex data objects
  • No Legends: Legend display is disabled to save space
  • No Labels: Axis labels are typically hidden for minimal presentation
  • Compact Size: Designed to work well in small containers
  • Essential Styling: Support for basic styling while maintaining minimalism

Usage Scenarios

Tiny charts are ideal for:

  • Dashboard widgets - Small chart previews in data dashboards
  • Table cells - Inline charts within data tables
  • Cards and tiles - Compact visualizations in card layouts
  • Notification areas - Quick visual indicators
  • Mobile interfaces - Space-efficient charts for mobile apps

Example in a dashboard context:

import { TinyArea, TinyColumn, TinyLine } from "@ant-design/charts";

const DashboardWidget = ({ title, data, type }) => {
  const renderChart = () => {
    const config = { data, height: 60 };
    
    switch (type) {
      case 'area':
        return <TinyArea {...config} />;
      case 'column':
        return <TinyColumn {...config} />;
      case 'line':
        return <TinyLine {...config} />;
      default:
        return null;
    }
  };

  return (
    <div style={{ width: 200, height: 80, border: '1px solid #eee', padding: 8 }}>
      <h4>{title}</h4>
      {renderChart()}
    </div>
  );
};