Line Chart

A line chart connects a series of data points, called 'markers', with a continuous line. It is like a scatterplot, but data points are ordered by their x-axis value and joined together by line segments.

Read more on: Line chart.

Inputs

data

Type: object [] required

Data must be provided as an array of objects in JSON format. The data array should is indexed (by an id, if specified) with a nested array of data objects (with x, y properties) to compute the line. Each nested object represents a single data point.

A sample dataset could look something like this:

climbs.json

[
{
"x": 0,
"y": 93.69018434064849
},
{
"x": 1,
"y": 46.3018492732896
},
{
"x": 2,
"y": 58.14436737157354
},
{
"x": 3,
"y": 54.51790586843437
},
{
"x": 4,
"y": 22.09286874993026
},
{
"x": 5,
"y": 85.86961518991087
}
]

xKey

Type: string required

The xKey is the string as the accessor for the data series in the X-domain. This string must match the corresponding property in each data object used for plotting on the x-axis. The xKey should represent data of type number.


yKey

Type: string required

The yKey is the string as the accessor for the data series in the Y-domain. This string must match the corresponding property in each data object used for plotting on the y-axis. The yKey should represent data of type number.


xAxisLabel

Type: string

An optional label for the x-axis. Defaults to an empty string "".


yAxisLabel

Type: string

An optional label for the y-axis. Defaults to an empty string "".


height

Type: number required

Chart height in pixels, used within the bounding box of the Chart wrapper component. If a value < 100 is provided, this value will default back to 500.


width

Type: number required

Chart width in pixels, used within the bounding box of the Chart wrapper component. If a value < 100 is provided, this value will default back to 500.


👀

Coming soon... Timeline, supporting Date type data!

Stay tuned!

Children

The LineChart contains the following children components:

  • Chart
  • Axis
  • Line

Component Structure and Use

The finished MyLineChart is structured like so:

import { data } from 'MyLineChartData.js'
import { LineChart } from 'ad3lie'
const MyLineChart = ({
data /* see data from your Javascript data file */,
}) => (
<LineChart
data={data}
xKey="species"
yKey="body_mass_g"
xAxisLabel="X-axis: Species"
yAxisLabel="Y-axis: Body Mass"
height={500}
width={500}
/>
)

Simply import your custom MyLineChart along with MyLineChartData.js for easy use. Or, pull LineChart and provide the required props yourself.

Props Summary

PropertyTypeRequired?
dataobject []
xKeystring
yKeystring
xAxisLabelstring
yAxisLabelstring
heightnumber
widthnumber