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
Property | Type | Required? |
---|---|---|
data | object [] | ✅ |
xKey | string | ✅ |
yKey | string | ✅ |
xAxisLabel | string | ❌ |
yAxisLabel | string | ❌ |
height | number | ✅ |
width | number | ✅ |