Skip to main content
The Toolbox component provides a set of built-in utility tools that enhance user interaction with charts, including data zoom, download, view switching, and more.

​
Purpose

Based on the source implementation in ~/workspace/source/src/component/toolbox/ToolboxModel.ts, the toolbox component:
  • Provides interactive tools as clickable icons
  • Supports built-in features like save as image, data view, data zoom, restore, and magic type
  • Allows custom tool creation and configuration
  • Positioned flexibly within the chart container
  • Displays tooltips for tool descriptions

​
Basic Usage

option = {
  toolbox: {
    feature: {
      saveAsImage: {},
      dataZoom: {},
      restore: {}
    }
  },
  xAxis: { type: 'category', data: ['A', 'B', 'C'] },
  yAxis: { type: 'value' },
  series: [{ type: 'bar', data: [10, 20, 30] }]
};

​
Save as Image Feature

From ~/workspace/source/src/component/toolbox/feature/SaveAsImage.ts: 
option = {
  toolbox: {
    feature: {
      saveAsImage: {
        type: 'png',
        name: 'chart-export',
        backgroundColor: '#fff',
        pixelRatio: 2,
        title: 'Save as Image',
        excludeComponents: ['toolbox']
      }
    }
  }
};

​
Data Zoom Feature

From ~/workspace/source/src/component/toolbox/feature/DataZoom.ts: 
option = {
  toolbox: {
    feature: {
      dataZoom: {
        yAxisIndex: 'none',
        xAxisIndex: [0],
        filterMode: 'filter',
        title: {
          zoom: 'Area Zoom',
          back: 'Restore Zoom'
        },
        brushStyle: {
          borderWidth: 0,
          color: 'rgba(135,175,274,0.15)'
        }
      }
    }
  },
  xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'] },
  yAxis: { type: 'value' },
  series: [{ type: 'line', data: [120, 200, 150, 80, 70] }]
};

​
Magic Type Feature

option = {
  toolbox: {
    feature: {
      magicType: {
        type: ['line', 'bar', 'stack'],
        title: {
          line: 'Line Chart',
          bar: 'Bar Chart',
          stack: 'Stacked Chart'
        }
      }
    }
  },
  series: [{ type: 'bar', data: [10, 20, 30] }]
};

​
Styled Toolbox

option = {
  toolbox: {
    show: true,
    orient: 'vertical',
    left: 'right',
    top: 'center',
    itemSize: 20,
    itemGap: 15,
    showTitle: true,
    feature: {
      saveAsImage: {},
      restore: {},
      dataView: { readOnly: false }
    },
    iconStyle: {
      borderColor: '#1890ff',
      borderWidth: 2
    },
    emphasis: {
      iconStyle: {
        borderColor: '#096dd9',
        borderWidth: 3
      }
    }
  }
};

​
Configuration Options

​
Core Properties

​
show
boolean
default:"true"
Whether to display the toolbox component. From ToolboxModel.ts:113.
​
orient
'horizontal' | 'vertical'
default:"'horizontal'"
Layout orientation of toolbox items. From ToolboxModel.ts:119.
​
left
string | number
default:"'right'"
Distance from the left side of the container. Default positions toolbox on the right.From ToolboxModel.ts:121.
​
top
string | number
default:"'top'"
Distance from the top of the container. From ToolboxModel.ts:123.
​
right
string | number
Distance from the right side of the container.
​
bottom
string | number
Distance from the bottom of the container.

​
Item Layout

​
itemSize
number
default:"15"
Size of toolbox icons in pixels. From ToolboxModel.ts:138.
​
itemGap
number
default:"tokens.size.s"
Gap between toolbox items. From ToolboxModel.ts:140.
​
showTitle
boolean
default:"true"
Whether to show title (tooltip) when hovering over tools. From ToolboxModel.ts:142.

​
Background and Border

​
backgroundColor
ZRColor
default:"'transparent'"
Background color of the toolbox. From ToolboxModel.ts:128.
​
borderColor
ColorString
default:"tokens.color.border"
Border color of the toolbox container. From ToolboxModel.ts:130.
​
borderWidth
number
default:"0"
Border width of the toolbox in pixels. From ToolboxModel.ts:134.
​
borderRadius
number | number[]
default:"0"
Border radius of the toolbox container. From ToolboxModel.ts:132.
​
padding
number | number[]
default:"tokens.size.m"
Padding inside the toolbox. Can be single number or array [top, right, bottom, left].From ToolboxModel.ts:136.

​
Icon Styling

​
iconStyle
object
Style configuration for toolbox icons. From ToolboxModel.ts:144-147:
iconStyle: {
  borderColor: tokens.color.accent50,
  color: 'none'
}
​
emphasis
object
Style configuration for hovered/emphasized icons. From ToolboxModel.ts:148-152:
emphasis: {
  iconStyle: {
    borderColor: tokens.color.accent70
  }
}

​
Tooltip

​
tooltip
object
Tooltip configuration for toolbox items. From ToolboxModel.ts:157-160:
tooltip: {
  show: false,
  position: 'bottom'
}

​
Built-in Features

​
feature
object
Dictionary of toolbox features to enable. Each feature has its own configuration.See ToolboxModel.ts:83 for the feature type definition.

​
Save as Image

From ~/workspace/source/src/component/toolbox/feature/SaveAsImage.ts:
​
feature.saveAsImage.type
'png' | 'jpeg'
default:"'png'"
Image format for export. SVG is automatically used if chart uses SVG renderer.
​
feature.saveAsImage.name
string
default:"''"
Filename for the downloaded image (without extension).Falls back to chart title or ‘echarts’. See SaveAsImage.ts:49.
​
feature.saveAsImage.backgroundColor
ZRColor
Background color for the exported image. Defaults to chart background.From SaveAsImage.ts:54-55.
​
feature.saveAsImage.excludeComponents
string[]
default:"['toolbox']"
Array of component types to exclude from the export. Default excludes toolbox.See SaveAsImage.ts:138.
​
feature.saveAsImage.pixelRatio
number
Pixel ratio for the exported image. Higher values create higher resolution images.From SaveAsImage.ts:58.

​
Data Zoom

From ~/workspace/source/src/component/toolbox/feature/DataZoom.ts:
​
feature.dataZoom.filterMode
'filter' | 'weakFilter' | 'empty' | 'none'
default:"'filter'"
Data filtering mode when zooming. From DataZoom.ts:207.
​
feature.dataZoom.xAxisIndex
number | number[] | 'all' | 'none'
X-axis indices to control with data zoom. ‘all’ controls all x-axes.
​
feature.dataZoom.yAxisIndex
number | number[] | 'all' | 'none'
Y-axis indices to control with data zoom.
​
feature.dataZoom.brushStyle
object
Style for the brush selection area. From DataZoom.ts:215-218:
brushStyle: {
  borderWidth: 0,
  color: tokens.color.backgroundTint
}
​
feature.dataZoom.icon
object
Custom icons for zoom and back buttons. From DataZoom.ts:209-212:
icon: {
  zoom: 'path://...',
  back: 'path://...'
}
​
feature.dataZoom.title
object
Custom titles for zoom and back buttons:
title: {
  zoom: 'Area Zoom',
  back: 'Restore'
}

​
Other Features

​
feature.dataView
object
Data view feature for displaying raw data in a table format:
feature: {
  dataView: {
    show: true,
    readOnly: false,
    title: 'Data View',
    lang: ['Data View', 'Close', 'Refresh']
  }
}
​
feature.restore
object
Restore feature to reset chart to initial state:
feature: {
  restore: {
    show: true,
    title: 'Restore'
  }
}
​
feature.magicType
object
Magic type feature for switching between chart types:
feature: {
  magicType: {
    show: true,
    type: ['line', 'bar'],
    title: {
      line: 'Switch to Line Chart',
      bar: 'Switch to Bar Chart'
    }
  }
}
​
feature.brush
object
Brush selection feature for selecting data regions:
feature: {
  brush: {
    type: ['rect', 'polygon', 'clear']
  }
}

​
Feature Management

The toolbox uses a feature manager system (from ToolboxModel.ts:100-108) that:
  • Automatically merges default options for each feature
  • Supports custom feature registration
  • Handles feature initialization and option updates

​
Example: Complete Toolbox Configuration

option = {
  toolbox: {
    show: true,
    orient: 'horizontal',
    left: 'right',
    top: 'top',
    itemSize: 18,
    itemGap: 12,
    showTitle: true,
    backgroundColor: 'rgba(255, 255, 255, 0.9)',
    borderColor: '#ddd',
    borderWidth: 1,
    borderRadius: 4,
    padding: 10,
    iconStyle: {
      borderColor: '#1890ff',
      borderWidth: 1.5
    },
    emphasis: {
      iconStyle: {
        borderColor: '#096dd9',
        borderWidth: 2
      }
    },
    feature: {
      saveAsImage: {
        type: 'png',
        name: 'chart-download',
        backgroundColor: '#fff',
        pixelRatio: 2,
        title: 'Download as PNG'
      },
      dataZoom: {
        yAxisIndex: false,
        xAxisIndex: 0,
        title: {
          zoom: 'Zoom',
          back: 'Reset Zoom'
        }
      },
      restore: {
        title: 'Restore'
      },
      dataView: {
        readOnly: true,
        title: 'View Data'
      }
    },
    tooltip: {
      show: true,
      position: 'bottom'
    }
  }
};

Build docs developers (and LLMs) love

Get started for freeTalk to us