Introduction

Building a component chart library is the core of react-d3, we tried to wrap react component on every d3 svg, layouts. So you could pick and choose the components you want. And rebuild a new chart from ground up very quickly.

So we built react-d3 as a highly modular library. You can check out the modules below, to look for further information.

react-d3-basic

react-d3-basic

react-d3 basic charts, charts that we support:

  • Multiple Line Chart
  • Scatter Plot
  • Area Chart
  • Area Stack Chart
  • Bar Chart
  • Bar Group Chart
  • Bar Stack Chart
  • Pie Chart
  • Donut Chart

img

react-d3-tooltip

react-d3-tooltip

react-d3 tooltip implementation.

Support Tooltip Component

  • Line Chart: export as LineTooltip
  • Area Stack Chart: export as AreaStackTooltip
  • Scatter Plot: export as ScatterTooltip
  • Bar Chart: export as BarTooltip
  • Bar Stack: export as BarStackTooltip
  • Bar Group: export as BarGroupTooltip
  • Pie Chart: export as PieTooltip

img

react-d3-zoom

react-d3-zoom

react-d3 zoom implementation.

Support Zoom Component

  • Line Chart: export as LineZoom
  • Area Stack Chart: export as AreaStackZoom
  • Scatter Plot: export as ScatterZoom
  • Bar Chart: export as BarZoom
  • Bar Stack: export as BarStackZoom
  • Bar Group: export as BarGroupZoom

img

react-d3-brush

react-d3-brush

react-d3 brush implementation.

Support Brush Component

  • Line Chart: export as LineBrush
  • Area Stack Chart: export as AreaStackBrush
  • Scatter Plot: export as ScatterBrush
  • Bar Chart: export as BarBrush
  • Bar Stack: export as BarStackBrush
  • Bar Group: export as BarGroupBrush

img

react-d3-core

react-d3-core

react-d3-core is includes the core components of the react-d3 projects. The reason we extract the main component here, is because of reusability. For instance, we use grid, axes over and over again in line chart, area chart, bar chart ... etc. If we move these system a little bit forward to a react component we can declare it more easily in the future.

Such as we need xaxis, yaxis, grid in a new chart. We can install react-d3-core and import them.

Supported Components

Container

  • Chart
  • Svg
  • Title

Axis

  • Axis
  • Xaxis
  • Yaxis

Grid

  • xGrid
  • yGrid

Label

  • Label

Legend

  • Legend