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

Guidelines

[NO DATA AVAILABLE]

Accessibility

[NO DATA AVAILABLE]