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.

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#