Bar Chart

Bar Chart Sandbox

Data

type: array[object]

Single example

### Data Format Example Single
[
  {
    "culmen_length_mm": 39.1,
    "body_mass_g": 3750,
  },
  {
    "culmen_length_mm": 36.7,
    "body_mass_g": 3450,
  },
  {
    "culmen_length_mm": 39.3,
    "body_mass_g": 3650,
 },
]

Multi example

### Data Format Example Multi

[
 {
   "date": "Thu Feb 01 2018 00:00:00 GMT-0500 (Eastern Standard Time)",
   "fruit": "apples",
   "value": 10
 },
 {
   "date": "Thu Mar 01 2018 00:00:00 GMT-0500 (Eastern Standard Time)",
   "fruit": "apples",
   "value": 15
 },
 {
    "date": "Thu Feb 01 2018 00:00:00 GMT-0500 (Eastern Standard Time)",
    "fruit": "oranges",
    "value": 15
  },
  {
    "date": "Thu Mar 01 2018 00:00:00 GMT-0500 (Eastern Standard Time)",
    "fruit": "oranges",
    "value": 15
  },
]

Props

data

The data must be structured as an array of objects, each object representing a point of data. Each data point consists of an X value, a Y value, and optionally a category to group by (in the case of a stacked bar chart).

Prop	Type	Optional
data	array of objects	false

• [{ x: number or Date, y: number, group: string }, ...]
• The X value can be of type number or Date, or a valid string representation of a Date.
• The Y value can be of type number or null.

xKey

This string is used as the accessor for your data in the X domain. This should match the property name of your data that you want to use for your X values. For example, if we want to show the quantity of fruit over time using the above dataset, 'date' will be our xKey value.

Prop	Type	Optional	Requirements
xKey	string	false	A key corresponding to the properties in array of data objects used on x axis.

yKey

This string is used as the accessor for the Y values of your data. This should match the property name of your data that you want to use for your Y values. For example, if we want to show the quantity of fruit using the above dataset, 'value' will be our yKey value.

Prop	Type	Optional	Requirements
yKey	string	false	A key corresponding to the properties in array of data objects used on y axis.

xDataType (optional)

By default, d3reactor will attempt to infer whether the data accessed by xKey is a valid date. (If it is, it will transform the Date into a string to create more readable X axis ticks.) By passing in a value to xDataType, you can manually set how you want d3reactor to interpret your data.

Prop	Type	Optional	Default
xDataType	"number", "date", undefined	true	undefined

• The X value can be of type number or Date, or a valid string representation of a Date.

groupBy (optional)

To create a stacked bar chart, pass in a string to the groupBy prop. This string should match the property name of your data that represents the distinct groups you want to show. For example, in the above multi example dataset, our dataset is grouped by the property name 'fruit'.

Prop	Type	Optional	Default	Requirements
groupBy	string	true	undefined	A key corresponding to the properties in array of data objects used to denote groups.

• Caution: If your dataset is skinny – that is, if the data pointed to by your yKey property represents multiple groups – then you must provide a groupBy property to get the desired results. Otherwise, d3reactor doesn't know how to interpret the data.

xAxis (optional)

Determines where to render the X axis (above or below the chart) including ticks. Passing a false will remove the X axis.

Prop	Type	Optional	Default
xAxis	"top", "bottom", false	true	'bottom'

• By default, the X axis will be rendered at the bottom.

yAxis (optional)

Determines where to render the Y axis (left or right of the chart) including ticks. Passing a false will remove the Y axis.

Prop	Type	Optional	Default
yAxis	"left", "right", false	true	'bottom'

• By default, the Y axis will be rendered on the left.

xAxisLabel (optional)

Adds a label to your X axis.

Prop	Type	Optional
xAxisLabel	string	true

yAxisLabel (optional)

Adds a label to your Y axis.

Prop	Type	Optional
yAxisLabel	string	true

xGrid (optional)

Displays horizontal grid lines on chart.

Prop	Type	Optional	Default
xGrid	boolean	true	false

yGrid (optional)

Displays vertical grid lines on chart.

Prop	Type	Optional	Default
yGrid	boolean	true	false

legend (optional)

Each chart has the option to include a legend which shows the categories and corresponding colors of your data. The legend and chart are both responsive, so they will resize to make space for each other. The categories reflect the list of unique values stored at the property in your dataset accessed by groupBy.

Prop	Type	Optional	Default
legend	boolean or "top", "bottom", "left", "right" , "top-left", "top-right", "bottom-left", "bottom-right", "left-bottom", "right-bottom", "left-top", "right-top"	true	false

• If true, the legend will default to position 'right'.
• What's the difference between top-right and right-top? Good question! top-right renders in the top right corner of the component, to the right of the chart. right-top renders in the top right corner of the component, above the chart.

legendLabel (optional)

This is the title at the top of the legend. If the value is an empty string (''), the legend label will not render.

Prop	Type	Optional	Default
legendLabel	string	true	''

• You must specify a legend property if you wish to use legendLabel

height (optional)

Sets the overall height of the chart, in pixels or percentage. For example, 340, '340px' or '85%'.

Prop	Type	Optional	Default
height	string or number	true	100%

width (optional)

Sets the overall width of the chart, in pixels or percentage. For example, 340, '340px' or '85%'.

Prop	Type	Optional	Default
width	string or number	true	100%

colorScheme (optional)

Sets the color scheme of the chart body.

Prop	Type	Optional	Default
colorScheme	'schemeRdYlGn', 'schemeRdYlBu', 'schemeRdGy', 'schemeRdBu', 'schemePuOr', 'schemePiYG', 'schemePRGn', 'schemeBrBG', 'schemeReds', 'schemePurples', 'schemeOranges', 'schemeGreys', 'schemeGreens', 'schemeBlues', 'schemeSpectral'	true	'schemePurples'