Chart declarative HTML API

The declarative HTML API enables you to create and configure charts directly in HTML using simple, semantic tags. It streamlines the charting process by embedding data and configuration options within HTML elements, avoiding complex JavaScript code.

G2Plot chart

Top-level web component, which is used to initialize a chart.

<rapid-g2plot-chart></rapid-g2plot-chart>

DOM API

Property and attribute binding examples for Genesis Component syntax. Closing tag omitted.

Attributes

Attribute	Type	Use	Example
type	ChartTypes	The type to use for the chart. If not set, the default bar type will be used.	<rapid-g2plot-chart type="line">

Properties

Property	Type	Use	Example
config	ChartConfig	The configuration to use for the chart.	<rapid-g2plot-chart :config=${(x) => x.chartConfig}>
data	any[]	The data to display in the chart.	<rapid-g2plot-chart :data=${(x) => x.chartData}>

Slots

Slot	Use
chart-datasource-error	The chart-datasource-error slot is displayed when the data source encounters errors, such as connection issues or invalid data. This slot allows you to define custom fallback content or error messages for a better user experience.

Parts

Part	Use
chart-container	Using this part enables you to change the styles for the main chart container.

Fired events

Events can be received by the emitting <rapid-g2plot-chart>, or any parent element.

Event	Type	Use	Example
plot:click	Custom Event	Adds click events to the entire chart area.	<rapid-g2plot-chart @plot:click="${(x) => x.onChartClick()}">
element:click	Custom Event	Adds click events to the element of the chart.	<rapid-g2plot-chart @element:click="${(x) => x.onElementClick()}">
legend-item:click	Custom Event	Adds click events to the legened element.	<rapid-g2plot-chart @legend-item:click="${(x) => x.onLegendClick()}">

For a complete list of available events, go to the G2Plot Events Documentation.

Listened events

This component doesn't listen to any public API events.

Chart datasource

The chart-datasource element is used to declaratively set the data source for a rapid-g2plot-chart.

<rapid-g2plot-chart>
  <chart-datasource></chart-datasource>
</rapid-g2plot-chart>

DOM API

Property and attribute binding examples for Genesis Component syntax. Closing tag omitted.

Attributes

Attribute	Type	Use	Example
chart-fields	string	Defines the fields for chart configuration. First is always the xField/colorField (Mandatory) Second is always the yField/angleField (Mandatory) Third is always the seriesField (Optional) Default value is 'groupBy value'. Can be customized but order matters.	<chart-datasource chart-fields="groupBy value">
server-fields	string	Defines the fields of data to be charted. First will be associated to the first value in 'chartFields' (xField/colorField) (Mandatory) Second will be associated to the second value in 'chartFields' (yField/angleField) (Mandatory) Third will be associated to the third value in 'chartFields' (Optional) Can be customized but order matters.	<chart-datasource server-fields="TRADE_ID QUANTITY">
resourceName	string	Name of the backend resource which contain the data.	<chart-datasource resourceName="ALL_TRADES">
criteria	string	Clients can send a Groovy expression to perform filters on the query server, these remain active for the life of the subscription. More examples	<chart-datasource criteria="TRADE_ID == 'TRADE_ID_123'">
isSnapshot	boolean	Request a snapshot from the server.	<chart-datasource isSnapshot>
maxRows	number	Maximum number of rows to be returned as part of the initial message, and as part of any additional MORE_ROWS messages. This will not affect the number of rows displayed.	<chart-datasource maxRows="500">
maxView	number	Maximum number of rows to track as part of a client view or table.	<chart-datasource maxView="500">
orderBy	string	This option can be used to select a Data Server index (defined in the Data Server query), which is especially useful if you want the data to be sorted in a specific way.	<chart-datasource orderBy="TRADE_DATETIME">
reverse	boolean	This option changes the Data Server index iteration.	<chart-datasource reverse>
rowId	string	Attribute to set an unique identifier for the row.	<chart-datasource rowId="ROW_REF">
is-stack	boolean	If true, will enable stacked chart to effectively portray comparisons of total values across several categories	<chart-datasource is-stack>
is-group	boolean	If true, will enable grouped chart plotting numeric values for levels of two categorical variables instead of one.	<chart-datasource is-group>
reduced	boolean	Enabled by default, will not work if a custom charts-fields is used (requires [type, value])	<chart-datasource reduced>
with-timestamp-formatting	boolean	Enabled by default, will format UNIX timestamp fields to readable DATE|DATETIME values	<chart-datasource with-timestamp-formatting>
show-formatted-time	boolean	Disabled by default, will ignore the TIME portion in the Chart labels. Only works if withTimestampFormatting is true. Only affects DATETIME fields.	<chart-datasource show-formatted-time>

info

Criteria use groovy expressions to filter responses from the back end.

Properties

Property	Type	Use	Example
request	any	This optional parameter enables you to specify request fields, which can include wildcards.	<chart-datasource :request=${(x) => ({ "TRADE_NAME": `VOD*`, })} >
data	any[]	Optional attribute that can be used to pass the data that will be used in the component.	<chart-datasource :data=${(x) => x.chartData}>

Slots

This component doesn't have any slots.

Parts

This component doesn't have any css parts.

Fired events

This component doesn't fire any events.

Listened events

This component doesn't listen to any events.