• 教程
  • API
  • 示例
  • Storybook (工作正在进行中)
  • Wiki
  • GitHub
  • npm
  • 3.0 migration guide
En  |  中文
  • Storybook (工作正在进行中)
  • Wiki
  • GitHub
  • npm
  • 3.0 migration guide
En  |  中文

示例

LineChart

  • Simple Line Chart
  • Dashed Line Chart
  • Vertical Line Chart
  • Biaxial Line Chart
  • Vertical Line Chart With Specified Domain
  • Line Chart Connect Nulls
  • Line Chart With X Axis Padding
  • Line Chart With Reference Lines
  • Customized Dot Line Chart
  • Customized Label Line Chart
  • Synchronized Line Chart
  • Synchronized Charts With Different Data
  • Line that animates opacity
  • Highlight And Zoom Line Chart
  • Line Chart Has Multi Series
  • Line Chart Axis Interval
  • Line Chart Negative Values With Reference Lines
  • Compare Two Lines
  • Dynamic Z-Index Line Chart
  • Tiny Line Chart
  • Animated Time Series

AreaChart

  • Simple Area Chart
  • Stacked Area Chart
  • Ranged Area Chart
  • Area Chart Connect Nulls
  • Cardinal Area Chart
  • Percent Area Chart
  • Synchronized Area Chart
  • Tiny Area Chart
  • Area Chart Fill By Value
  • Custom Animation Example
  • Range Area Custom Animation
  • Area Chart With Custom Events
  • Prevent right click menu

BarChart

  • Simple Bar Chart
  • Stacked Bar Chart
  • Population Pyramid
  • Timeline
  • Candlestick
  • Box Plot
  • Animated Bar Width
  • Waterfall
  • Animated Bar series
  • Mix Bar Chart
  • Custom Shape Bar Chart
  • Positive and Negative Bar Chart
  • Brush Bar Chart
  • Bar Chart With Customized Event
  • Bar Chart With Min Height
  • Bar Chart Stacked By Sign
  • Biaxial Bar Chart
  • Bar Chart with background
  • Bar Chart With Multi X Axis
  • Ranged Stacked Bar Chart
  • Ranged Bar Chart
  • Tiny Bar Chart
  • Animate by Scroll
  • Stacked Bar Chart with Horizontal Line

ComposedChart

  • Line Bar Area Composed Chart
  • Same Data Composed Chart
  • Vertical Composed Chart
  • Composed Chart With Axis Labels
  • Scatter And Line Of Best Fit
  • Banded Chart
  • Target Price Chart with active Label

ScatterChart

  • Simple Scatter Chart
  • Three Dim Scatter Chart
  • Joint Line Scatter Chart
  • Bubble Chart
  • Custom Animation
  • Scatter Chart With Labels
  • Multiple Y Axes Scatter Chart
  • Scatter Chart With Cells
  • Scatter Chart with many points (performance test)

PieChart

  • Two Level Pie Chart
  • Straight Angle Pie Chart
  • Custom Active Shape Pie Chart
  • Pie Chart With Customized Label
  • Pie Chart with gap and rounded corners
  • Pie Chart With Needle
  • Pie Chart in Flexbox
  • Pie Chart in Grid
  • Pie Chart with Gradient

RadarChart

  • Simple Radar Chart
  • Specified Domain Radar Chart
  • Range Radar Custom Animation

RadialBarChart

  • Simple Radial Bar Chart
  • Radial Bar Chart with Click to Focus Legend

TreeMap

  • Bundle Size Treemap
  • Simple Treemap
  • Custom Content Treemap
  • Nested Treemap
  • Treemap with Padding and Gaps

SunburstChart

  • Bundle Size Sunburst
  • Sunburst Chart Example

Tooltip

  • Custom Content Of Tooltip
  • Tooltip Style

Legend

  • Legend with Opacity
  • Legend Position
  • Custom Legend Styles

ResponsiveContainer

  • Area Responsive Container
  • Composed Responsive Container
  • Pie Responsive Container

XAxis

  • Multiple X Axes
  • Automatic X Axis Height

Examples

Explore interactive examples of different chart types and features. Click on any category to see it in action.

LineChart

AreaChart

BarChart

ComposedChart

ScatterChart

PieChart

RadarChart

RadialBarChart

Measured entrywww/src/views/IndexView/IndexLineChart.tsx
Tree-shaken total9.50 KB
Minified + gzip3.00 KB

TreeMap

Measured entrywww/src/views/IndexView/IndexLineChart.tsx
Tree-shaken total9.50 KB
Minified + gzip3.00 KB
460828161536128011521152640640230423042304179217921024102410241024

SunburstChart

Tooltip

Legend

ResponsiveContainer

XAxis

Released under the MIT License

Copyright (c) 2016-2026 Recharts Group

Commit: a5c9b0c8