AreaChart

live example

Explore the API in the live example.

api reference

AreaChart(name[, parent])

The area 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 Plots can be highlighted by passing their plot names as specified in the data array.
LeftAxis
LineColor
LineWidth
Objects
Opacity
Pins
PlotMarker
PointTooltip
Smoothing
YRange

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`.

AreaChart.data(plots)

Set/updates the data that is shown in the area chart.

Parameters

Name Type Description

plots

Object[]

Name	Type	Description
plots	Object[]	Array of objects representing the area plots 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.

Array of objects representing the area plots 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.

Returns

AreaChart

Reference to the AreaChart API.

Examples

const area = dalian.AreaChart('my-chart')
  .data([{
    name: 'area 1',
    values: [
      {x: 0.0, y: 1.1},
      {x: 0.1, y: 1.2},
      {x: 0.2, y: 1.4}
      ...
    ]
  }, {
    name: 'area 2',
    values: [
      {x: 0.0, y: 4.3},
      {x: 0.1, y: 4.2},
      {x: 0.2, y: 3.8}
      ...
    ]
  }])
  .render()