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

gauge-progress.mddocs/

Gauge and Progress Charts

Specialized components for displaying metrics, KPIs, and progress indicators including gauges, liquid fills, progress bars, and bullet charts.

Capabilities

Gauge Chart

Creates gauge charts for KPI display and metric visualization.

/**
 * Gauge chart component for KPI display
 * @param props - Gauge configuration extending G2Plot GaugeOptions
 * @returns React component
 */
function Gauge(props: GaugeConfig): JSX.Element;

interface GaugeConfig extends GaugeOptions, ContainerConfig<GaugeOptions> {
  chartRef?: ChartRefConfig;
}

Usage Example:

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

const GaugeExample = () => {
  const config = {
    percent: 0.75,
    range: {
      color: '#30BF78',
    },
    indicator: {
      pointer: {
        style: {
          stroke: '#D0D0D0',
        },
      },
      pin: {
        style: {
          stroke: '#D0D0D0',
        },
      },
    },
    statistic: {
      content: {
        style: {
          fontSize: '36px',
          lineHeight: '36px',
        },
      },
    },
  };

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

Liquid Fill Gauge

Creates liquid fill gauges for percentage display with fluid animation.

/**
 * Liquid fill gauge component for percentage display
 * @param props - Liquid configuration extending G2Plot LiquidOptions
 * @returns React component
 */
function Liquid(props: LiquidConfig): JSX.Element;

interface LiquidConfig extends LiquidOptions, ContainerConfig<LiquidOptions> {
  chartRef?: ChartRefConfig;
}

Usage Example:

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

const LiquidExample = () => {
  const config = {
    percent: 0.65,
    outline: {
      border: 2,
      distance: 4,
    },
    wave: {
      length: 128,
    },
  };

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

Progress Chart

Creates progress bar charts for linear progress display.

/**
 * Progress chart component for linear progress display
 * @param props - Progress configuration extending G2Plot ProgressOptions
 * @returns React component
 */
function Progress(props: ProgressConfig): JSX.Element;

interface ProgressConfig extends ProgressOptions, ContainerConfig<ProgressOptions> {
  chartRef?: ChartRefConfig;
}

Usage Example:

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

const ProgressExample = () => {
  const config = {
    percent: 0.8,
    color: ['#5B8FF9', '#E8EDF3'],
  };

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

Ring Progress

Creates ring-shaped progress indicators for circular progress display.

/**
 * Ring progress component for circular progress display
 * @param props - RingProgress configuration extending G2Plot RingProgressOptions
 * @returns React component
 */
function RingProgress(props: RingProgressConfig): JSX.Element;

interface RingProgressConfig extends RingProgressOptions, ContainerConfig<RingProgressOptions> {
  chartRef?: ChartRefConfig;
}

Usage Example:

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

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

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

Bullet Chart

Creates bullet charts for performance comparison against targets.

/**
 * Bullet chart component for performance comparison
 * @param props - Bullet configuration extending G2Plot BulletOptions
 * @returns React component
 */
function Bullet(props: BulletConfig): JSX.Element;

interface BulletConfig extends BulletOptions, ContainerConfig<BulletOptions> {
  chartRef?: ChartRefConfig;
}

Usage Example:

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

const BulletExample = () => {
  const data = [
    {
      title: 'Revenue',
      ranges: [100, 200, 300],
      measures: [150, 180],
      target: 170,
    },
    {
      title: 'Sales',
      ranges: [50, 150, 250],
      measures: [120, 140],
      target: 160,
    },
  ];

  const config = {
    data,
    measureField: 'measures',
    rangeField: 'ranges',
    targetField: 'target',
    xField: 'title',
    color: {
      range: ['#f0f0f0', '#bfeec8', '#87d068'],
      measure: ['#5B8FF9', '#61DDAA'],
      target: '#39a3f4',
    },
  };

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