Table of Contents

Installation

npm install react-charts-plus

Description

Ideally the library should be usable with minimum configuration. Just put the data in and see the charts.
I try to provide sensible defaults, but since for most use-cases we need to customize D3's parameters they will be made accessible to the user. Most Charts will turn into their stacked variant when given an array as input.

If you like the project please consider starring and a pull request. I am open for any additions.

0.4.2: Improved LineChart tooltip to show d3.svg.symbol() on nearest data point. Can be customized with shape and shapeColor props. LineChart toolip callback is callback(label, value) now where the format of value depends on your data format, default is {x: x, y: y}.

0.4.1: Fixed compatibility issues with Safari and possible other browsers not supporting Number.isFinite().

Brush

With Brushes we can build interactive Graphs. My personal use-case is to select date ranges as shown below and in the example.
The Brush feature is still incomplete, for now only offering a x-Axis Brush but y-Axis will follow soon as well as refactoring.
For now the Brush is rendered in its own SVG, this allows flexible use but might change in the future, or become optional.
Also there is no Brush support for the built-in default Scales.

Tooltips

You can provide a callback to every chart that will return html for the tooltip.
Depending on the type of chart the callback will receive different parameters that are useful.

Bar Chart: x, y0, y of the hovered bar and the total bar height in case of a stacked bar chart.

Scatter Plot: x, y of the hovered point.

Pie Chart: x, y, of the hovered wedge.

Area Chart: closest y value to the cursor of the area under the mouse and the cumulative y value in case of a stacked area chart.

Example Scatter Plot:

vartooltipScatter=function(x,y){

return"x: "+ x +" y: "+ y;

};

React.render(<ScatterPlot

data={data}

width={400}

height={400}

margin={{top:10, bottom:50, left:50, right:10}}

tooltipHtml={tooltipScatter}

xAxis={{label:"x-label"}}

yAxis={{label:"y-label"}}/>,

document.getElementById('scatterplot')

);

Axis parameters

All D3 axis parameters can optionally be provided to the chart. For detailed explanation please check the documentation.

React.render(<LineChart

data={data}

width={400}

height={400}

margin={{top:10, bottom:50, left:50, right:10}}

tooltipHtml={tooltipLine}

xAxis={{innerTickSize:10, label:"x-label"}}

yAxis={{label:"y-label"}}/>,

document.getElementById('linechart'));

The following are the default values.

{

tickArguments:[10],

tickValues:null,

tickFormat:x=>{return x;},

innerTickSize:6,

tickPadding:3,

outerTickSize:6,

className:"axis",

zero:0,

label:""

}

Custom Accessors

data =[{

customLabel:'somethingA',

customValues:[[0,3],[1.3,-4],[3,7],[-3.5,8],[4,7],[4.5,7],[5,-7.8]]

}];

varlabelAccessor=function(stack){returnstack.customLabel;};

varvaluesAccessor=function(stack){returnstack.customValues;};

varxAccessor=function(element){return element[0];};

varyAccessor=function(element){return element[1];};

React.render(<ScatterPlot

data={data}

width={400}

height={400}

margin={{top:10, bottom:50, left:50, right:10}}

label={labelAccessor}

x={xAccessor}

y={yAccessor}

values={valuesAccessor}/>,

document.getElementById('location'));

Overriding default parameters

All Charts provide defaults for scales, colors, etc...
If you want to use your own scale just pass it to the charts constructor.

The scales are normal D3 objects, their documentation can be found here and here.

There are more parameters like barPadding, strokeWidth, fill, opacity, etc. please check the documentation for details.

var xScale =d3.scale.ordinal();//... + set it up appropriately

var yScale =d3.scale.linear();

var colorScale =d3.scale.category20();

<BarChart xScale={xScale}

yScale={yScale}

colorScale={colorScale}

barPadding={0.3}

data={data}

width={400}

height={400}

margin={{top:10, bottom:50, left:50, right:10}}/>

LineChart stroke style

You can customize the line style of LineCharts with CSS or if you want to have more control over how each line in your dataset gets rendered you can use the stroke property of LineChart as follows. Note that you do not have to set all the properties in the object.