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

Line chart

Line Chart Example

The Dynamic Line Chart component displays data as lines on a chart with customizable series, axes, and visual properties. It's designed to visualize trends over time or relationships between data points, with support for multiple data series, custom styling, and various data sources.

Properties

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.

  • 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 }   ] }

  • 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 ($)".

  • paddingClass - Configures the padding for the component using CSS classes. For example, "p-4" adds medium padding on all sides of the chart.

Data Source Properties

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

Event Actions

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

Authorization Properties

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

Visibility Properties

  • 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   } ]

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

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

Data source model

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 have to be set.

Data example Expand source

[ { createdOn: '2019-12-01T23:00:00.000Z', point1: 4, //x-axis point2: 2, //y-axis }, { createdOn: '2019-12-02T23:00:00.000Z', point1: 4, point2: 10, }, { createdOn: '2019-12-03T23:00:00.000Z', point1: 5, point2: 2, } ]

  • No labels