API reference

General concepts

React-dc is designed to be as easy as possible to use if you already know to use dc. If dc has a someChart class, with a someAttribute() method used as follows:

dc.someChart('#some-container').someAttribute(50);

then, the equivalent React component in React-dc is <SomeChart />, accepting a someAttribute attribute expecting a value of the same type as dc's method:

<SomeChart someAttribute={50} />

So far so good.

But what happens when a dc method accepts multiple arguments, and some of them are optional? For example, the group() method on the BaseMixin has the following signature:

group( [group] [, name])

Name	Type	Argument	Description
group	crossfilter.group	<optional>
name	String	<optional>

How can you keep this flexibility regarding the way you want to pass arguments to this method in a React attribute? I chose the following way. For every dc method which accepts multiple arguments, you can either pass to the corresponding React attribute:

• a single value which will be passed to the method as its first argument (types must match)
• an Object whose keys are the names of the method's arguments on dc's docs, and values are of the same types as the arguments

For example,

// dc.js
// group is a crossfilter group
dc.barChart('#bar-chart').group(group)

is equivalent to:

// React-dc
// group is a crossfilter group
<BarChart group={group} />

and

// dc.js
// group is a crossfilter group
dc.barChart('#bar-chart').group(group, 'firstGroup')

is equivalent to:

// React-dc
// group is a crossfilter group
<BarChart group={{group: group, name: 'firstGroup'}} />

Charts

RowChart

Attributes

Name	Inherited from	Type	Required
dimension	baseMixin	crossfilter.dimension	✅
keyAccessor	baseMixin	Function
label	baseMixin	Function | {labelFunction: Function, enableLabels: Boolean}
filter	baseMixin	any
group	baseMixin	dc.group | {group: dc.group, name: String}	✅
height	baseMixin	Number | Function
ordering	baseMixin	Function
title	baseMixin	Function
valueAccessor	baseMixin	Function
width	baseMixin	Number | Function
cap	capMixin	Number
othersGroup	capMixin	false | Function
othersLabel	capMixin	String
colorAccessor	colorMixin	Function
colorDomain	colorMixin	Array[String]
colors	colorMixin	d3.color.scale
linearColors	colorMixin	Array[Number]
ordinalColors	colorMixin	Array[String]
elasticX	self	Boolean
fixedBarBeight	self	Boolean | Number
gap	self	Number
labelOffsetX	self	Number
labelOffsetY	self	Number
renderTitleLabel	self	Boolean
titleLabelOffsetX	self	Number
x	self	d3 quantitative scale

Mixins

Many charts share the same attributes (eg. group, title...). Thus, it makes sense to have mixins (abstract classes which accept some attributes, but do not correspond to an actual visualization) from which actual charts will inherit their attributes.

BaseMixin

Inherited by

• BarChart
• PieChart
• RowChart

Attributes

Name	Type	Required
dimension	crossfilter.dimension	✅
keyAccessor	Function
label	Function | {labelFunction: Function, enableLabels: Boolean}
filter	any
group	dc.group | {group: dc.group, name: String}	✅
height	Number | Function
ordering	Function
title	Function
valueAccessor	Function
width	Number | Function

CapMixin

Inherited by

• PieChart
• RowChart

Attributes

Name	Type	Required
cap	Number
othersGroup	false | Function
othersLabel	String

Color mixin

Inherited by

• HeatMap
• RowChart
• GeoChoroplethChart
• PieChart
• BubbleChart
• BoxPlot