Skip to main content
Version: Current

Web Components - Charts

A chart component is a graphical representation of a set of data. A range of different chart types can be used. Genesis charts are based on g2plot.


The examples below are based on an example application called "alpha", so we refer to a design system called @genesislcap/alpha-design-system, which has the prefix alpha. In practice, you decide on the name and prefix of your design system, but it exposes the same API.

import { provideDesignSystem, alphaAgGrid } from '@genesislcap/alpha-design-system';
import { g2plotChartsComponents } from '@genesislcap/g2plot-chart';

provideDesignSystem().register(alphaAgGrid(), g2plotChartsComponents);

Attributes and properties

When you declare an <alpha-g2plot-chart>, you can provide the following attributes:

typestringSets the type of the chart: area, donut, dual-axes, pie, rose, scatter, stock. Default: Bar.
config-Sets the configuration for the chart; click on a link to view the g2plot api definition with the settings available for each type of chart: area, bar, column, donut (which is a type of pie), dual-axes, line, mix, pie, rose, scatter, stock.
data-Where you are not using the <chart-datasource> component (see below), use this attribute to provide the array of data to be displayed in the chart.

Chart datasource

When using charts, you are offered a component called <chart-datasource>. This component handles the communication and integration with the server. This component has two attributes:

resourceNameIdentifies the resource that provides the data; this can be a Data Server query or a Request Server requestReply
server-fieldsDefines the fields of data to be charted; the first value is associated with the x-axis; the second value is associated with the y-axis; the third value is associated with the data series


Below we have a simple example of a configuration for a chart.

  • Chart configuration:
chart configuration
chartConfiguration = {
xField: 'groupBy',
yField: 'value',
  • Below is the declaration of a chart that uses the above configuration. The chart type is column. It uses the chart-datasource component to retrieve two fields from the ALL_STOCKS resource: SYMBOL (x axis) and TRADING_VOLUME (y axis).
chart declaration
<alpha-g2plot-chart type="column" :config=${(x) => x.chartConfiguration}>
resourceName = "ALL_STOCKS"
server-fields = "SYMBOL TRADING_VOLUME"

Use cases

  • Display data
  • Show patterns and relationships

Additional resources