A Javascript library for building composable and declarative charts

A new solution for building reusable components for interactive charts

Features

High-Level Charts

React-d3 support high level components which you can install and create a line chart, bar chart, pie chart... etc, within a component.

Flexible & Reusable Components

React-d3 is a highly module library. You can build new d3 charts using React-d3 to create axis using xaxis component, yaxis component, label using label component, legend legend component... etc, in other word, it extends the flexibility of d3 library so you can assemble a whole new chart using core components.

Clear Data Flow, and Better Structures

React-d3 combine the power of d3 flexibility and the data flow, structures, components, virtual DOM, and others benefits that react.js provide.

Basic Charts

Building a simple line chart

React-d3 is a highly modular chart library, you can create your d3 charts such as line chart or bar chart within a simple component. Besides, you can easily set different props of chart component to rendering various chart you want.

Data - CSV Table

month,total,incineration,garbageBury,largeGarbageRecycle,foodWaste,recycle,other,average
2001M01,770095,295355,339023,0,0,75630,60087,1.124
2001M02,629350,248283,256351,0,0,74732,49983,1.016
2001M03,663170,271344,264674,0,0,77137,50015,0.966
...
...
...


We provide low level api for you to assemble your own chart.

ReactDOM.render(
  <Chart
    width= {width}
    height= {height}
    data= {data}
    chartSeries= {chartSeries}
    x= {x}
    >
    // build line chart
    <Line
      chartSeries= {series1}
    />
    // build area chart
    <Area
      chartSeries= {series2}
    />
    <Xaxis/>
    <Yaxis/>
    <Xgrid/>
    <Ygrid/>
  </Chart>
, document.getElementById('line-garbage')
)


We also provide high level chart api.

ReactDOM.render(
  <Chart
    title={"Taiwan refuse disposal"}
    width={500}
    height={300}
    margins= {margins}
    >
    <LineChart
      margins= {margins}
      title={"Taiwan refuse disposal"}
      data={data}
      width={500}
      height={300}
      chartSeries={chartSeries}
      x={x}
      xScale={"time"}
    />
  </Chart>
, document.getElementById('line-garbage')
)

Building bar group chart with brush

React-d3-brush support charts with brush! We support all kinds of common charts such as line chart, bar chart, bar group chart... etc.

ReactDOM.render(
  <BarGroupBrush
    title= {"Bar Group Chart With Brush"}
    data= {data}
    width= {500}
    height= {300}
    chartSeries = {chartSeries}
    x= {x}
    xScale= {xScale}
    yTickFormat= {yTickFormat}
    brushHeight= {100}
  />
, document.getElementById('data_brush_bar_group')
)

Building bar stack with zoom

React-d3-zoom support charts with zoom! We support all kinds of common charts such as line chart, bar chart, bar group chart... etc.

ReactDOM.render(
  <BarStackZoom
    title= {"Bar Stack Chart With Zoom"}
    data= {data}
    width= {500}
    height= {400}
    chartSeries = {chartSeries}
    x= {x}
    xScale= {"ordinal"}
    yTickFormat= {yTickFormat}
  />
, document.getElementById('data_zoom_bar_stack')
)

Building pie chart with tooltip

React-d3-tooltip support charts with tooltip! We support all kinds of common charts such as line chart, bar chart, bar group chart... etc.

ReactDOM.render(
  <PieTooltip
    title= {title}
    data= {generalChartData}
    width= {width}
    height= {height}
    chartSeries= {chartSeries}
    value = {value}
    name = {name}
  />
, document.getElementById('data_tooltip_pie')
)