Chart

Render bar, line, pie, and other data visualizations.

On this page

Overview

The Chart is a JavaScript component for rendering data visualizations such as bar, line, and pie charts. You can initialize the component using the data-of-chart attribute.

The component uses the Apache ECharts library. Note that the library is not fully imported — only the features listed on this page are available.

Chart types

The Chart component supports multiple series types, each accepting a different data format. The type is defined per series inside the series array and maps directly to the Apache ECharts series types. For the full list of available options per type, refer to the ECharts option documentation.

Bar chart

html

<div class="chart" data-of-chart='{
  "data": {
    "title": { "text": "Weekly Sales" },
    "tooltip": {},
    "legend": { "data": ["Sales"] },
    "xAxis": { "type": "category", "data": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"] },
    "yAxis": { "type": "value" },
    "series": [
      { "name": "Sales", "type": "bar", "data": [120, 200, 150, 80, 170, 110, 130] }
    ]
  }
}'></div>

Line chart

html

<div class="chart" data-of-chart='{
  "data": {
    "title": { "text": "Weekly Sales" },
    "tooltip": {},
    "legend": { "data": ["Sales"] },
    "xAxis": { "type": "category", "data": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"] },
    "yAxis": { "type": "value" },
    "series": [
      { "name": "Sales", "type": "line", "data": [120, 200, 150, 80, 170, 110, 130], "areaStyle": {} }
    ]
  }
}'></div>

Pie chart

html

<div class="chart" data-of-chart='{
  "data": {
    "title": { "text": "Weekly Sales" },
    "tooltip": {},
    "legend": { "data": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"] },
    "series": [
      { "type": "pie", "data": [
        { "name": "Mon", "value": 120 },
        { "name": "Tue", "value": 200 },
        { "name": "Wed", "value": 150 },
        { "name": "Thu", "value": 80 },
        { "name": "Fri", "value": 170 },
        { "name": "Sat", "value": 110 },
        { "name": "Sun", "value": 130 }
      ]}
    ]
  }
}'></div>

Components

The following ECharts components are included and available out of the box:

Component	Description
Aria	Adds accessibility attributes to the chart. Enabled by default and cannot be disabled.
Legend	Displays a legend for identifying series.
Title	Displays a chart title.
Tooltip	Shows data details on hover.

Coordinate systems

The following ECharts coordinate systems are included and available out of the box:

Coordinate system	Description
Grid	A Cartesian coordinate system for `bar` and `line` charts.

Renderers

The following ECharts renderers are supported:

Renderer	Description
SVG	Renders charts as SVG elements.

Usage

Options

You can pass extra options as JSON value of the data attribute. Here is the list of all available options (alphabetically):

Option	Type	Default	Explanation
`data`	`object`	`{}`	The raw ECharts configuration object passed directly to `setOption()`. Accepts any valid ECharts option.
`responsive`	`boolean`	`true`	Automatically resizes the chart when the container dimensions change.

Methods

Method	Description
`getChart`	Exposes the underlying ECharts instance, giving access to the full ECharts API.

const chart = await openFrontend.Chart.then(component => component.getInstance('#chart')) // Returns a Bootstrap chart instance

chart.getChart(); // ECharts instance

Events

Event	Description
`initialized.of.chart`	This event is fired immediately when the chart is ready to use.

const element = document.getElementById('chart')

element.addEventListener('initialized.of.chart', async () => {
  const chart = await openFrontend.Chart.then(component => component.getInstance(element))

  chart.getChart(); // ECharts instance
})

CSS

Variables

src/scss/_chart.scss

--#{$prefix}chart-height: #{$chart-height};

Sass variables

src/scss/_variables.scss

$chart-height:   400px;