LineChart

live example

Explore the API in the live example.

api reference

LineChart(name[, parent])

The line chart widget. Being a chart, it extends the [Chart] ../components/chart.html component, with all of its available APIs. Furthermore, it extends the following components:

BottomAxis
Highlight Lines can be highlighted by passing their plots names as specified in the data array.
LeftAxis
LineStyle
LineWidth
Objects
Pins
PlotMarker
PointTooltip
Smoothing
Trend
XGrid
XRange
YGrid
YRange

Note that the line chart automatically adds a small extension to the vertical axis, which can of be overwritten by the YRange component API.

Parameters

Name	Type	Description
name	string	Name of the chart. Should be a unique identifier.
parent	string	optionalSee [Widget] ../components/widget.html for description. Default value is `body`.

LineChart.data(plots)

Sets/updates the data that is shown in the line chart.

Parameters

Name Type Description

plots

Object[]

Name	Type	Description
plots	Object[]	Array of objects representing the lines to show. Each plot has two properties: name `string` Name of the plot. values `Object[]` Plot data. The `values` property is an array of objects of the following structure: x `number` X coordinate of the data point. y `number` Y coordinate of the data point. For missing data, this value can be null. lo `number` Optional lower error of the data point. hi `number` Optional upper error of the data point.

Array of objects representing the lines to show. Each plot has two properties:

name: string Name of the plot.
values: Object[] Plot data.

The values property is an array of objects of the following structure:

x: number X coordinate of the data point.
y: number Y coordinate of the data point. For missing data, this value can be null.
lo: number Optional lower error of the data point.
hi: number Optional upper error of the data point.

Returns

LineChart

Reference to the LineChart API. const line = dalian.LinePlot('my-chart') .data([<code> name: 'trend 1', values: [ <code>x: 1.3, y: 2.3</code>, <code>x: 1.4, y: 2.1, lo: 1, hi: 0.5</code>, <code>x: 5.3, y: -2.3</code>, ... ] </code>, <code> name: 'trend 2', values: [ <code>x: 2.5, y: 7.1, lo: 1.2</code>, <code>x: 3.8, y: 5.3, hi: 1.3</code>, <code>x: 1.7, y: 2.4</code>, ... ] </code> ... ]) .render()