BarChart

live example

Explore the API in the live example.

api reference

BarChart(name[, parent])

The bar 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
ElementTooltip
Highlight Bars can be highlighted by passing their category names as specified in the data array.
Horizontal
Label
LeftAxis
Objects
YGrid The same component (and namespace) is used for the default and horizontal modes, adapting to the orientation.
YRange The same component (and namespace) is used for the default and horizontal modes, adapting to the orientation.

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

BarChart.data(plots)

Set/updates the data that is shown in the bar chart. In the bar chart, each bar is a plot group in itself, so all methods that operate on plot groups are applied on the bar level.

Parameters

Name	Type	Description
plots	Object[]	Array of objects representing the bars to show. Each bar has two properties: name `string` Category name. value `number` Category value.

Returns

BarChart

Reference to the BarChart API.

Examples

const bar = dalian.BarChart('my-chart')
  .data([
    {name: 'bar 1', value: 1},
    {name: 'bar 2', value: 3},
    {name: 'bar 3', value: 2},
    ...
  ])
  .render()