or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

chart-management.mdchart-types.mdcomponents.mddata-operations.mdexport-rendering.mdextensions-customization.mdindex.mdinteraction-events.mdtheming-styling.mdutility-namespaces.md
tile.json

chart-types.mddocs/

Chart Types

ECharts provides 21 built-in chart types for different data visualization needs, from basic line and bar charts to specialized visualizations like treemap, sankey, and custom charts.

Chart Installation

For optimal bundle size, import only the chart types you need:

import * as echarts from 'echarts/core';
import { LineChart, BarChart, PieChart } from 'echarts/charts';

echarts.use([LineChart, BarChart, PieChart]);

Capabilities

Basic Charts

Fundamental chart types for common data visualization scenarios.

// Chart imports
import { 
  LineChart, 
  BarChart, 
  PieChart, 
  ScatterChart 
} from 'echarts/charts';

// Basic series configuration
interface SeriesOption {
  type: 'line' | 'bar' | 'pie' | 'scatter';
  name?: string;
  data: any[];
  [key: string]: any;
}

Line Charts

Display data points connected by straight line segments, ideal for showing trends over time.

interface LineSeriesOption extends SeriesOption {
  type: 'line';
  data: (number | [number, number] | LineDataItem)[];
  smooth?: boolean | number;
  step?: boolean | 'start' | 'middle' | 'end';
  stack?: string;
  connectNulls?: boolean;
  lineStyle?: LineStyleOption;
  areaStyle?: AreaStyleOption;
}

interface LineDataItem {
  name?: string;
  value: number | [number, number];
  symbol?: string;
  symbolSize?: number | number[];
  lineStyle?: LineStyleOption;
  itemStyle?: ItemStyleOption;
}

Usage Example:

const lineOption = {
  xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'] },
  yAxis: { type: 'value' },
  series: [{
    type: 'line',
    data: [120, 200, 150, 80, 70],
    smooth: true,
    lineStyle: { color: '#5470c6' }
  }]
};

Bar Charts

Display data using rectangular bars, perfect for comparing quantities across categories.

interface BarSeriesOption extends SeriesOption {
  type: 'bar';
  data: (number | BarDataItem)[];
  stack?: string;
  barWidth?: number | string;
  barMaxWidth?: number | string;
  barMinWidth?: number | string;
  barGap?: number | string;
  barCategoryGap?: number | string;
  itemStyle?: ItemStyleOption;
}

interface BarDataItem {
  name?: string;
  value: number;
  itemStyle?: ItemStyleOption;
  emphasis?: { itemStyle?: ItemStyleOption };
}

Usage Example:

const barOption = {
  xAxis: { type: 'category', data: ['A', 'B', 'C', 'D'] },
  yAxis: { type: 'value' },
  series: [{
    type: 'bar',
    data: [23, 45, 56, 78],
    barWidth: '60%',
    itemStyle: { color: '#91cc75' }
  }]
};

Pie Charts

Show proportional data as slices of a circle, ideal for displaying parts of a whole.

interface PieSeriesOption extends SeriesOption {
  type: 'pie';
  data: PieDataItem[];
  radius?: number | string | [number | string, number | string];
  center?: [number | string, number | string];
  roseType?: boolean | 'radius' | 'area';
  avoidLabelOverlap?: boolean;
  startAngle?: number;
  minAngle?: number;
  selectedMode?: boolean | 'single' | 'multiple';
}

interface PieDataItem {
  name: string;
  value: number;
  selected?: boolean;
  itemStyle?: ItemStyleOption;
  label?: LabelOption;
  labelLine?: LabelLineOption;
}

Usage Example:

const pieOption = {
  series: [{
    type: 'pie',
    radius: ['40%', '70%'],
    data: [
      { value: 335, name: 'Direct' },
      { value: 310, name: 'Email' },
      { value: 234, name: 'Affiliate' },
      { value: 135, name: 'Video' }
    ]
  }]
};

Scatter Charts

Plot data points on a coordinate system, useful for showing correlations between variables.

interface ScatterSeriesOption extends SeriesOption {
  type: 'scatter';
  data: (number[] | ScatterDataItem)[];
  symbolSize?: number | number[] | Function;
  symbol?: string | Function;
  large?: boolean;
  largeThreshold?: number;
}

interface ScatterDataItem {
  name?: string;
  value: number[];
  symbol?: string;
  symbolSize?: number | number[];
  itemStyle?: ItemStyleOption;
}

Statistical Charts

Charts designed for statistical analysis and data distribution visualization.

import { 
  BoxplotChart, 
  CandlestickChart, 
  EffectScatterChart 
} from 'echarts/charts';

Boxplot Charts

Display statistical distributions showing quartiles, median, and outliers.

interface BoxplotSeriesOption extends SeriesOption {
  type: 'boxplot';
  data: (number[] | BoxplotDataItem)[];
  layout?: 'horizontal' | 'vertical';
  boxWidth?: number | string[];
}

interface BoxplotDataItem {
  name?: string;
  value: [number, number, number, number, number]; // [min, Q1, median, Q3, max]
  itemStyle?: ItemStyleOption;
}

Candlestick Charts

Financial charts showing open, high, low, close prices over time periods.

interface CandlestickSeriesOption extends SeriesOption {
  type: 'candlestick';
  data: (number[] | CandlestickDataItem)[];
  barWidth?: number | string;
  itemStyle?: {
    color?: string;        // Bullish candle color
    color0?: string;       // Bearish candle color
    borderColor?: string;  // Bullish border color
    borderColor0?: string; // Bearish border color
  };
}

interface CandlestickDataItem {
  name?: string;
  value: [number, number, number, number]; // [open, close, lowest, highest]
  itemStyle?: ItemStyleOption;
}

Relational Charts

Charts that show relationships and connections between data points.

import { 
  GraphChart, 
  TreeChart, 
  SankeyChart, 
  ChordChart 
} from 'echarts/charts';

Graph/Network Charts

Visualize networks with nodes and edges showing relationships between entities.

interface GraphSeriesOption extends SeriesOption {
  type: 'graph';
  data: GraphNodeItem[];
  links: GraphLinkItem[];
  layout?: 'none' | 'circular' | 'force';
  circular?: { rotateLabel?: boolean };
  force?: {
    repulsion?: number | number[];
    gravity?: number;
    edgeLength?: number | number[];
    layoutAnimation?: boolean;
  };
  roam?: boolean | 'scale' | 'move';
}

interface GraphNodeItem {
  id?: string;
  name?: string;
  x?: number;
  y?: number;
  value?: number | number[];
  category?: number;
  symbol?: string;
  symbolSize?: number | number[];
  itemStyle?: ItemStyleOption;
}

interface GraphLinkItem {
  source: string | number;
  target: string | number;
  value?: number;
  lineStyle?: LineStyleOption;
}

Tree Charts

Display hierarchical data in a tree structure with parent-child relationships.

interface TreeSeriesOption extends SeriesOption {
  type: 'tree';
  data: TreeNodeItem[];
  orient?: 'LR' | 'RL' | 'TB' | 'BT';
  layout?: 'orthogonal' | 'radial';
  expandAndCollapse?: boolean;
  initialTreeDepth?: number;
  leaves?: { label?: LabelOption; itemStyle?: ItemStyleOption };
}

interface TreeNodeItem {
  name: string;
  value?: number;
  children?: TreeNodeItem[];
  collapsed?: boolean;
  symbol?: string;
  symbolSize?: number | number[];
  itemStyle?: ItemStyleOption;
  label?: LabelOption;
}

Sankey Diagrams

Show flow quantities between different stages or categories.

interface SankeySeriesOption extends SeriesOption {
  type: 'sankey';
  data: SankeyNodeItem[];
  links: SankeyLinkItem[];
  nodeWidth?: number;
  nodeGap?: number;
  layoutIterations?: number;
  orient?: 'horizontal' | 'vertical';
}

interface SankeyNodeItem {
  id?: string;
  name: string;
  value?: number;
  depth?: number;
  itemStyle?: ItemStyleOption;
  label?: LabelOption;
}

interface SankeyLinkItem {
  source: string | number;
  target: string | number;
  value: number;
  lineStyle?: LineStyleOption;
}

Specialized Charts

Advanced chart types for specific visualization needs.

import { 
  RadarChart, 
  FunnelChart, 
  GaugeChart, 
  HeatmapChart,
  TreemapChart,
  SunburstChart,
  ParallelChart
} from 'echarts/charts';

Radar Charts

Multi-dimensional data visualization showing multiple variables on radial axes.

interface RadarSeriesOption extends SeriesOption {
  type: 'radar';
  data: RadarDataItem[];
  radarIndex?: number;
  symbol?: string;
  symbolSize?: number | number[];
  areaStyle?: AreaStyleOption;
  lineStyle?: LineStyleOption;
}

interface RadarDataItem {
  name?: string;
  value: number[];
  symbol?: string;
  symbolSize?: number | number[];
  areaStyle?: AreaStyleOption;
  lineStyle?: LineStyleOption;
  itemStyle?: ItemStyleOption;
}

Treemap Charts

Display hierarchical data using nested rectangles sized by data values.

interface TreemapSeriesOption extends SeriesOption {
  type: 'treemap';
  data: TreemapNodeItem[];
  leafDepth?: number;
  roam?: boolean | 'scale' | 'move';
  nodeClick?: boolean | 'zoomToNode' | 'link';
  squareRatio?: number;
  levels?: TreemapLevelOption[];
}

interface TreemapNodeItem {
  name: string;
  value?: number | number[];
  children?: TreemapNodeItem[];
  itemStyle?: ItemStyleOption;
  label?: LabelOption;
}

Gauge Charts

Circular progress indicators showing single values within a range.

interface GaugeSeriesOption extends SeriesOption {
  type: 'gauge';
  data: GaugeDataItem[];
  min?: number;
  max?: number;
  startAngle?: number;
  endAngle?: number;
  clockwise?: boolean;
  radius?: number | string;
  center?: [number | string, number | string];
}

interface GaugeDataItem {
  name?: string;
  value: number;
  title?: { show?: boolean; offsetCenter?: [number | string, number | string] };
  detail?: { show?: boolean; formatter?: string | Function };
  itemStyle?: ItemStyleOption;
}

Map Charts

Geographic data visualization on world maps, country maps, or custom geographic regions.

import { MapChart } from 'echarts/charts';

interface MapSeriesOption extends SeriesOption {
  type: 'map';
  map: string; // Registered map name
  data: MapDataItem[];
  roam?: boolean | 'scale' | 'move';
  center?: [number, number];
  zoom?: number;
  scaleLimit?: { min?: number; max?: number };
  nameMap?: { [key: string]: string };
  aspectScale?: number;
}

interface MapDataItem {
  name: string;
  value: number | number[];
  selected?: boolean;
  itemStyle?: ItemStyleOption;
  label?: LabelOption;
}

Usage Example:

// First register map data
echarts.registerMap('world', worldGeoJson);

const mapOption = {
  series: [{
    type: 'map',
    map: 'world',
    roam: true,
    data: [
      { name: 'China', value: 1000 },
      { name: 'United States', value: 800 },
      { name: 'Brazil', value: 600 }
    ]
  }]
};

Custom Charts

Create completely custom chart types with full control over rendering logic.

import { CustomChart } from 'echarts/charts';

interface CustomSeriesOption extends SeriesOption {
  type: 'custom';
  renderItem: CustomSeriesRenderItem;
  data: CustomDataItem[];
}

interface CustomSeriesRenderItem {
  (params: CustomSeriesRenderItemParams, api: CustomSeriesRenderItemAPI): CustomSeriesRenderItemReturn;
}

interface CustomSeriesRenderItemParams {
  context: any;
  seriesId: string;
  seriesName: string;
  seriesIndex: number;
  dataIndex: number;
  dataIndexInside: number;
  coordSys: any;
}

interface CustomSeriesRenderItemAPI {
  value(dim?: number | string): number;
  coord(data: number[]): number[];
  size(dataSize: number[], dataItem?: number[]): number[];
  style(userProps?: any, dataIndex?: number): any;
  styleEmphasis(userProps?: any, dataIndex?: number): any;
  visual(visualType: string): any;
  barLayout(opt: any): any[];
  currentSeriesIndices(): number[];
  font(opt: any): string;
}

interface CustomDataItem {
  name?: string;
  value: any;
  groupId?: string;
  childGroupId?: string;
  [key: string]: any;
}

Chart Configuration Patterns

Multiple Series

Display multiple datasets on the same chart:

const multiSeriesOption = {
  legend: { data: ['Sales', 'Profit'] },
  xAxis: { type: 'category', data: ['Jan', 'Feb', 'Mar'] },
  yAxis: { type: 'value' },
  series: [
    { name: 'Sales', type: 'bar', data: [20, 25, 30] },
    { name: 'Profit', type: 'line', data: [5, 8, 12] }
  ]
};

Mixed Chart Types

Combine different chart types in one visualization:

const mixedOption = {
  xAxis: { type: 'category', data: ['Jan', 'Feb', 'Mar'] },
  yAxis: [
    { type: 'value', name: 'Sales' },
    { type: 'value', name: 'Growth %', position: 'right' }
  ],
  series: [
    { name: 'Sales', type: 'bar', data: [100, 120, 140] },
    { name: 'Growth', type: 'line', yAxisIndex: 1, data: [10, 20, 15] }
  ]
};

Types

// Base series option interface
interface SeriesOption {
  type: string;
  name?: string;
  data: any[];
  animation?: boolean;
  animationDuration?: number | Function;
  animationEasing?: string;
  emphasis?: { focus?: 'self' | 'series' | 'none' };
  blur?: { itemStyle?: ItemStyleOption; label?: LabelOption };
  select?: { itemStyle?: ItemStyleOption; label?: LabelOption };
  selectedMode?: boolean | 'single' | 'multiple';
  [key: string]: any;
}

// Common styling interfaces
interface ItemStyleOption {
  color?: string | Function;
  borderColor?: string;
  borderWidth?: number;
  borderType?: 'solid' | 'dashed' | 'dotted';
  shadowBlur?: number;
  shadowColor?: string;
  shadowOffsetX?: number;
  shadowOffsetY?: number;
  opacity?: number;
}

interface LineStyleOption {
  color?: string;
  width?: number;
  type?: 'solid' | 'dashed' | 'dotted';
  dashOffset?: number;
  cap?: 'butt' | 'round' | 'square';
  join?: 'bevel' | 'round' | 'miter';
  miterLimit?: number;
  shadowBlur?: number;
  shadowColor?: string;
  shadowOffsetX?: number;
  shadowOffsetY?: number;
  opacity?: number;
}

interface AreaStyleOption {
  color?: string | Function;
  origin?: 'auto' | 'start' | 'end';
  shadowBlur?: number;
  shadowColor?: string;
  shadowOffsetX?: number;
  shadowOffsetY?: number;
  opacity?: number;
}