• 教程
  • 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
  • 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

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

Legend

  • Legend with Opacity

ResponsiveContainer

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

XAxis

  • Multiple X Axes

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

Tips: Hover the legend !

Legend

ResponsiveContainer

XAxis

Released under the MIT License

Copyright (c) 2016-2026 Recharts Group

Commit: a8b0a28c