Skip to main content

Line Chart

Line 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 multi-line chart).

PropTypeOptional
dataarray of objectsfalse
  • [{ 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.

PropTypeOptionalRequirements
xKeystringfalseA 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.

PropTypeOptionalRequirements
yKeystringfalseA 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.

PropTypeOptionalDefault
xDataType"number", "date", undefinedtrueundefined
  • The X value can be of type number or Date, or a valid string representation of a Date.

groupBy (optional)

To create a multi-line 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'.

PropTypeOptionalDefaultRequirements
groupBystringtrueundefinedA 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.

PropTypeOptionalDefault
xAxis"top", "bottom", falsetrue'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.

PropTypeOptionalDefault
yAxis"left", "right", falsetrue'bottom'
  • By default, the Y axis will be rendered on the left.

xAxisLabel (optional)

Adds a label to your X axis.

PropTypeOptional
xAxisLabelstringtrue

yAxisLabel (optional)

Adds a label to your Y axis.

PropTypeOptional
yAxisLabelstringtrue

xGrid (optional)

Displays horizontal grid lines on chart.

PropTypeOptionalDefault
xGridbooleantruefalse

yGrid (optional)

Displays vertical grid lines on chart.

PropTypeOptionalDefault
yGridbooleantruefalse

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.

PropTypeOptionalDefault
legendboolean or "top", "bottom", "left", "right" , "top-left", "top-right", "bottom-left", "bottom-right", "left-bottom", "right-bottom", "left-top", "right-top"truefalse
  • 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.

PropTypeOptionalDefault
legendLabelstringtrue''
  • 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%'.

PropTypeOptionalDefault
heightstring or numbertrue100%

width (optional)

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

PropTypeOptionalDefault
widthstring or numbertrue100%

colorScheme (optional)

Sets the color scheme of the chart body.

PropTypeOptionalDefault
colorScheme'schemeRdYlGn', 'schemeRdYlBu', 'schemeRdGy', 'schemeRdBu', 'schemePuOr', 'schemePiYG', 'schemePRGn', 'schemeBrBG', 'schemeReds', 'schemePurples', 'schemeOranges', 'schemeGreys', 'schemeGreens', 'schemeBlues', 'schemeSpectral'true'schemePurples'