Versions Compared

Old Version 1

changes.mady.by.user GE-DevDoc-Bot

Saved on

compared with

New Version 2

changes.mady.by.user GE-DevDoc-Bot

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)

Line Chart

Link to Figma: tba

Overview

  • The Dynamic Line Chart component displays data as lines on a chart.
  • It is designed to visualize trends over time or relationships between data points.
  • The chart supports multiple data series with customizable styling and configuration.
  • Data can come from various sources, including APIs or mock data for testing.
  • Custom axes, panes, and labels provide context for the information displayed.

...

  • visibilityPolicySetId – Determines whether the chart is displayed based on a policy set. This allows showing the chart only to users with specific permissions. Example: "dashboardViewerPolicy".

Guidelines

Usage

  • Use for continuous trends or sequential categories configured via chartConfiguration (maps the X-axis argument and Y-series).
  • Display multiple metrics in one view; distinguish them by naming each series in chartConfiguration.series[].name and enabling showLegend.
  • Separate signals with different units/scales by defining vertical panes with chartPanesConfiguration.
  • For demos or development, simulate data with useMockData.

Sizing & Layout

  • Add outer spacing using paddingClass.
  • Prevent crowding by assigning series across panes with chartPanesConfiguration (e.g., high-variance metrics in a dedicated pane).

Color & Contrast

  • Assign distinct chartConfiguration.series[].color values per metric and keep those colors consistent across sessions/panes.
  • Pair color with text labels by setting chartConfiguration.series[].name and showing them via showLegend.

Visibility & Authorization

  • Gate visibility by role/policy with visibilityPolicySetId.
  • Hide the chart until required runtime context exists using displayConditions. #

Content & Localization

  • Convey axis purpose and units using argumentAxisTitle and valueAxisTitle.
  • Provide readable series labels via chartConfiguration.series[].name; surface them by enabling showLegend.
  • Localize guided tour text with guidedTourHotSpotTitle and guidedTourHotSpotDescription.

Dos & Don’ts

DoDon’tArticle setting(s)
Label axes with purpose and units (e.g., “Date”, “Sales (USD)”).Leave axes unlabeled or rely on external context.argumentAxisTitle, valueAxisTitle
Turn on the legend for multi-series charts and name each series.Show multiple colored lines without labels or a legend.showLegend, chartConfiguration.series[].name
Separate metrics with different scales into vertical panes.Overlay vastly different ranges on one pane.

[NO DATA AVAILABLE]

Accessibility

...

chartPanesConfiguration, chartConfiguration.series[]
Bind the X argument and Y values explicitly.Depend on implicit or positional fields.chartConfiguration.argumentField, chartConfiguration.series[].valueField
Point to the nested array before binding fields.Bind to parent objects and get an empty chart.chartConfiguration.dataPathExpression
Render only when data is ready.Display an empty frame that looks broken.displayConditions
Use mock data for demos/dev; disable it for production.Ship with mock data enabled.useMockData
Parameterize requests to fetch only needed data.Pull entire datasets without constraints.getEntityCollectionHttpRequestParametersMap, dataSourceId
Expose stable test selectors.Select elements by volatile text.dataTestId, id
Clean up on unmount.Leave intervals/listeners running.events.ON_DESTROY

Accessibility

  • Axis context conveyed via argumentAxisTitle and valueAxisTitle (include units where applicable).
  • Non-color identification through chartConfiguration.series[].name surfaced via showLegend when comparing multiple series.
  • Stable selectors for automated/a11y checks via dataTestId and id.
  • Onboarding context available through localized guidedTourHotSpotTitle and guidedTourHotSpotDescription when enableAsHotspot is active.
  • Ensure sufficient visual distinction between lines by choosing clearly differentiable series[].color values in addition to names.
  • Prefer short, plain-language labels and titles; avoid abbreviations unless common.
  • Avoid misleading empty frames by using displayConditions to defer rendering until a data-ready flag is true.