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

specialty-charts.mddocs/

Specialty Chart Types

Unique visualization components for specific use cases including word clouds, treemaps, Sankey diagrams, gauges, liquid charts, circle packing, and sunburst charts.

Capabilities

Word Cloud

Creates word clouds for visualizing text frequency and importance.

/**
 * Word cloud component for text frequency visualization
 */
const WordCloud: ForwardRefExoticComponent<PropsWithoutRef<WordCloudConfig> & RefAttributes<Chart>>;

interface WordCloudConfig extends CommonConfig<WordCloudOptions> {}

interface WordCloudOptions extends Options {
  // Specific configuration for word clouds
}

Usage Example:

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

const data = [
  { word: 'visualization', count: 100 },
  { word: 'chart', count: 80 },
  { word: 'data', count: 75 },
  { word: 'React', count: 60 },
  { word: 'TypeScript', count: 55 },
  { word: 'component', count: 50 },
  { word: 'library', count: 45 },
  { word: 'statistical', count: 40 },
];

const config = {
  data,
  wordField: 'word',
  weightField: 'count',
  colorField: 'word',
  wordStyle: {
    fontFamily: 'Verdana',
    fontSize: [24, 80],
    rotation: [-Math.PI / 2, Math.PI / 2],
  },
  random: () => 0.5, // For consistent layout
};

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

Treemap

Creates treemaps for displaying hierarchical data with nested rectangles.

/**
 * Treemap component for hierarchical data visualization
 */
const Treemap: ForwardRefExoticComponent<PropsWithoutRef<TreemapConfig> & RefAttributes<Chart>>;

interface TreemapConfig extends CommonConfig<TreemapOptions> {}

interface TreemapOptions extends Options {
  // Specific configuration for treemaps
}

Usage Example:

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

const data = {
  name: 'root',
  children: [
    {
      name: 'Frontend',
      value: 60,
      children: [
        { name: 'React', value: 35 },
        { name: 'Vue', value: 15 },
        { name: 'Angular', value: 10 },
      ],
    },
    {
      name: 'Backend',
      value: 40,
      children: [
        { name: 'Node.js', value: 20 },
        { name: 'Python', value: 15 },
        { name: 'Java', value: 5 },
      ],
    },
  ],
};

const config = {
  data,
  colorField: 'name',
  legend: {
    position: 'top-left',
  },
  tooltip: {
    formatter: (datum) => ({
      name: datum.name,
      value: datum.value,
    }),
  },
  rectStyle: {
    lineWidth: 2,
    stroke: '#fff',
  },
};

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

Sankey Diagram

Creates Sankey diagrams for visualizing flow and connections between entities.

/**
 * Sankey diagram component for flow visualization
 */
const Sankey: ForwardRefExoticComponent<PropsWithoutRef<SankeyConfig> & RefAttributes<Chart>>;

interface SankeyConfig extends CommonConfig<SankeyOptions> {}

interface SankeyOptions extends Options {
  // Specific configuration for Sankey diagrams
}

Usage Example:

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

const data = {
  nodes: [
    { id: 'Website', name: 'Website' },
    { id: 'Social Media', name: 'Social Media' },
    { id: 'Email', name: 'Email' },
    { id: 'Leads', name: 'Leads' },
    { id: 'Customers', name: 'Customers' },
  ],
  links: [
    { source: 'Website', target: 'Leads', value: 100 },
    { source: 'Social Media', target: 'Leads', value: 50 },
    { source: 'Email', target: 'Leads', value: 30 },
    { source: 'Leads', target: 'Customers', value: 45 },
  ],
};

const config = {
  data,
  sourceField: 'source',
  targetField: 'target',
  weightField: 'value',
  nodeWidthRatio: 0.01,
  nodePaddingRatio: 0.03,
  nodeStyle: {
    fill: '#5B8FF9',
    fillOpacity: 0.8,
  },
  edgeStyle: {
    fill: '#5B8FF9',
    fillOpacity: 0.15,
  },
};

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

Gauge

Creates gauge charts for displaying single values against a scale.

/**
 * Gauge component for single value visualization
 */
const Gauge: ForwardRefExoticComponent<PropsWithoutRef<GaugeConfig> & RefAttributes<Chart>>;

interface GaugeConfig extends CommonConfig<GaugeOptions> {}

interface GaugeOptions extends Options {
  // Specific configuration for gauge charts
}

Usage Example:

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

const config = {
  percent: 0.75,
  range: {
    ticks: [0, 1 / 3, 2 / 3, 1],
    color: ['#F4664A', '#FAAD14', '#30BF78'],
  },
  indicator: {
    pointer: {
      style: {
        stroke: '#D0D0D0',
      },
    },
    pin: {
      style: {
        stroke: '#D0D0D0',
      },
    },
  },
  statistic: {
    content: {
      style: {
        fontSize: '36px',
        lineHeight: '36px',
      },
      formatter: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
    },
  },
};

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

Liquid Chart

Creates liquid charts for displaying percentage values in a container.

/**
 * Liquid chart component for percentage visualization
 */
const Liquid: ForwardRefExoticComponent<PropsWithoutRef<LiquidConfig> & RefAttributes<Chart>>;

interface LiquidConfig extends CommonConfig<LiquidOptions> {}

interface LiquidOptions extends Options {
  // Specific configuration for liquid charts
}

Usage Example:

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

const config = {
  percent: 0.65,
  outline: {
    border: 4,
    distance: 8,
  },
  wave: {
    length: 128,
  },
  statistic: {
    title: {
      formatter: () => 'Progress',
      style: {
        fontSize: '16px',
        fill: '#8c8c8c',
      },
    },
    content: {
      style: {
        fontSize: '50px',
        fill: '#000',
      },
      formatter: ({ percent }) => `${(percent * 100).toFixed(1)}%`,
    },
  },
};

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

Circle Packing

Creates circle packing charts for hierarchical data with circular layouts.

/**
 * Circle packing component for hierarchical circular visualization
 */
const CirclePacking: ForwardRefExoticComponent<PropsWithoutRef<CirclePackingConfig> & RefAttributes<Chart>>;

interface CirclePackingConfig extends CommonConfig<CirclePackingOptions> {}

interface CirclePackingOptions extends Options {
  // Specific configuration for circle packing charts
}

Usage Example:

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

const data = {
  name: 'root',
  children: [
    {
      name: 'Technology',
      value: 100,
      children: [
        { name: 'Frontend', value: 60 },
        { name: 'Backend', value: 40 },
      ],
    },
    {
      name: 'Design',
      value: 80,
      children: [
        { name: 'UI', value: 50 },
        { name: 'UX', value: 30 },
      ],
    },
    {
      name: 'Marketing',
      value: 60,
    },
  ],
};

const config = {
  data,
  sizeField: 'value',
  color: 'depth',
  label: {
    formatter: ({ name }) => name,
    offsetY: 0,
    style: {
      fontSize: 12,
      textAlign: 'center',
      fill: '#fff',
    },
  },
  legend: false,
};

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

Sunburst Chart

Creates sunburst charts for hierarchical data with radial layouts.

/**
 * Sunburst chart component for hierarchical radial visualization
 */
const Sunburst: ForwardRefExoticComponent<PropsWithoutRef<SunburstConfig> & RefAttributes<Chart>>;

interface SunburstConfig extends CommonConfig<SunburstOptions> {}

interface SunburstOptions extends Options {
  // Specific configuration for sunburst charts
}

Usage Example:

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

const data = {
  name: 'Company',
  children: [
    {
      name: 'Engineering',
      value: 100,
      children: [
        { name: 'Frontend', value: 40 },
        { name: 'Backend', value: 35 },
        { name: 'DevOps', value: 25 },
      ],
    },
    {
      name: 'Product',
      value: 60,
      children: [
        { name: 'Design', value: 35 },
        { name: 'Research', value: 25 },
      ],
    },
    {
      name: 'Sales',
      value: 80,
      children: [
        { name: 'Enterprise', value: 50 },
        { name: 'SMB', value: 30 },
      ],
    },
  ],
};

const config = {
  data,
  innerRadius: 0.3,
  radius: 1,
  colorField: 'name',
  label: {
    position: 'middle',
    formatter: ({ name, value }) => (value > 20 ? name : ''),
    style: {
      fontSize: 12,
      fill: '#fff',
    },
  },
  interactions: [
    { type: 'element-active' },
    { type: 'sunburst-ancestor-active' },
  ],
};

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

Common Specialty Chart Features

Many specialty charts share these advanced configuration options:

// Hierarchical data structure
interface HierarchicalData {
  name: string;
  value?: number;
  children?: HierarchicalData[];
}

// Network data structure for flow diagrams
interface NetworkData {
  nodes: Array<{ id: string; name: string }>;
  links: Array<{ source: string; target: string; value: number }>;
}

// Advanced styling options
interface AdvancedStyle {
  fill?: string;
  fillOpacity?: number;
  stroke?: string;
  strokeWidth?: number;
  strokeOpacity?: number;
  lineDash?: number[];
  [key: string]: any;
}

// Interactive features
interface InteractionConfig {
  type: string;
  cfg?: Record<string, any>;
}