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

Line Chart

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.

Specs

Tokens

Structure

• The chart has a plotting area where one or more data lines are drawn, supported by horizontal and vertical axes that provide categories, time values, and numerical scales.
• It can include multiple panes stacked vertically, allowing different sets of series to be displayed in separate sections.
• A legend identifies each data series and helps users distinguish between the plotted lines.

(Configured in General Properties)

• displayName – Sets the display name of the chart component, shown in the structure panel. This helps identify the component within the application structure. Example: "Monthly Sales Chart".

(Configured in Visual Properties)

• chartConfiguration – Configures the general settings of the chart, including series and argument field. This property allows defining which data fields are displayed as lines and what field is used for the X-axis. Example:

{
  "series": [
    { "valueField": "point1", "name": "Sales", "color": "#6BAC3E", "visible": true },
    { "valueField": "point2", "name": "Revenue", "color": "#3C8DBC", "visible": true }
  ],
  "argumentField": "createdOn",
  "dataPathExpression": "content"
}

• chartPanesConfiguration – Defines the configuration for chart panes, which allow splitting the chart into multiple vertical sections. Each pane can contain different series and has configurable height. Example:

{
  "panes": [
    { "name": "topPane", "height": 60 },
    { "name": "bottomPane", "height": 40 }
  ]
}

Datasource

(Configured in Datasource)

• useMockData – Determines whether the chart should display mock data instead of fetching from an API. When set to true, predefined sample data is used, useful for testing and development. Example: false.
• dataSourceId – Specifies the identifier for the data source that provides the chart data. This connects the chart to the specific API endpoint that returns the data to visualize. Example: "api/sales/monthly".
• getEntityCollectionHttpRequestParametersMap – Configures HTTP request parameters for fetching data from the API. This allows customizing parameters like filters, sorting, and other request options. Example:

{
  "PATH": { "year": "context.selectedYear" },
  "QUERY": { "division": "context.selectedDivision" }
}

• Line-Chart requires array of data with at least two properties for argumentField (values used for X-axis) and seriesField (values used for Y-axis).
• Array can be nested; to point nested array dataPathExpression has to be set.
• Example:

[
  { "createdOn": "2019-12-01T23:00:00.000Z", "point1": 4, "point2": 2 },
  { "createdOn": "2019-12-02T23:00:00.000Z", "point1": 4, "point2": 10 },
  { "createdOn": "2019-12-03T23:00:00.000Z", "point1": 5, "point2": 2 }
]

(Configured in Visibility)

• displayConditions – Defines conditions for displaying the component. This allows showing the chart only when certain conditions are met, like when specific data is available. Example:

[
  { "field": "context.hasData", "operator": "equals", "value": true }
]

Styling

(Configured in Visual Properties)

• showLegend – Controls whether the legend is displayed on the chart. When set to true, a legend showing all series names appears, helping users identify each data line. Example: true.
• paddingClass – Configures the padding for the component using CSS classes. For example, "p-4" adds medium padding on all sides of the chart.
• argumentAxisTitle – Sets the title for the X-axis of the chart. This provides context for what the horizontal axis represents, like "Date" or "Time Period". Example: "Months".
• valueAxisTitle – Sets the title for the Y-axis of the chart. This helps users understand what values are being measured, such as "Sales (USD)" or "Temperature (°C)". Example: "Amount ($)".

Actions & Events

(Configured in Events)

• events – Configures the events that the component can trigger and respond to:
• ON_INIT – Triggered when the chart component is initialized. Can be used to perform setup operations.
• ON_DESTROY – Triggered when the chart component is removed from the DOM. Useful for cleanup operations.

Tests

(Configured in Testing Hooks)

• id – Specifies the unique identifier for the component, used for programmatic access. Example: "salesTrendsChart".
• dataTestId – Sets the testing hook ID for automated testing. Example: "sales-chart-component".
• enableAsHotspot – Enables the chart as a guided tour hotspot. When set to true, the chart can be highlighted during guided tours. Example: true.
• guidedTourHotSpotTitle – Sets the title for the guided tour hotspot, supporting translations. Example:

{ "en-US": "Sales Performance", "fr-FR": "Performance des ventes" }

• guidedTourHotSpotDescription – Sets the description for the guided tour hotspot, supporting translations. Example:

{ "en-US": "This chart shows monthly sales trends", "fr-FR": "Ce graphique montre les tendances des ventes mensuelles" }

Authorization

(Configured in Authorization)

• 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".

Links

• Figma: tba
• Live style guide: https://e1-dev.k8s.myapp.de/live-style-guide/other-components/line-chart

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

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.