Configuring chart

  1. Click the Configure button, or hover over the chart component and click the Configure icon.
  2. Specify the Component ID. See Naming recommendation for components.
  3. Click the General Settings tab and specify the Component heading.

    The component heading you specified is displayed as the heading of the chart component. To enable the translation keys, enclose the name in <> and do not use spaces. See Configuring translations.

  4. Click the Operations tab and select a data service to connect it to the component. An operation indicates how the data is used by the component. The default operation available in Experience Designer for charts is Read data. Read is used for data services that use get or list transactions.
  5. Click the Interactions tab and click + Add. Specify this information:
    Source component
    To identify what triggers the interaction, select a source component from the list. You can select the chart, other components, or the application.
    Event

    To identify when the interaction is triggered, select an event from the list. The event can be when the chart, other components, or the application loads, is selected, refreshed, or when a search field is used.

    Operation
    To identify which operation is triggered by the interaction, select the operation that is connected to the required data service.
  6. Click Save.
  7. Click the Properties tab and specify this information:
    Chart type
    Select how the chart looks like. The stacked variants of bar and column are used to show subsets of data within the same bar or column.
    Group by type

    Select how the data in the chart is grouped.

    The By sum option is used to group the data by summing the value of the records retrieved by the API. For example, for each order date, the sum of the order quantity is displayed. You can view that for the 20221219 date, 105 products are ordered.

    The By count option is used to group the data by counting the number of records retrieved by the API. For example, for each order date, the number of finished orders is displayed. You can view that for the 20221219 date, two orders are completed.

    Label column
    Select which field is displayed as label. The label indicates what value to display in the chart. For example, to see the number of orders per date, the date is the value you select from the Label column list.
    Value column

    Select which field is used as value. The value indicates what you can view in the chart and the value must be numerical. For example, to view the number of orders per date, the number of orders is the value you must select from the Value column list.

    Stack column

    The Stack column field is only enabled when a stacked chart type is selected. Select which data is stacked. The Stack column shows subsets of the data that you selected in this field. For example, select status as stack column. For each order date, the sum of the order quantity is displayed. You can view that for the 20221219 date, 105 products are ordered. Of those 105 products, 5% of them belong to orders that are in the status 20 and 95% belong to orders in the status 60.

  8. Click the Toolbar tab and click + Add to add buttons in the chart. Select one of these toolbar options:
    • Standard button: A preconfigured button with label, style, and icon.
    • Custom button: You can configure a button when you select custom button.
  9. To configure a button, select Custom button and specify this information:
    ID
    Specify an ID for the button to display in the component. See Naming recommendation for components.
    Label
    Specify the name for the button to display in the component. To enable translation keys, enclose the name in <> and do not use spaces. See Configuring translations.
    Style
    Select whether the button should display with Icon only, Text only, or Icon+Text.
    Icon
    If you select Icon, or Icon+Text from the Style field, select an icon from the Icon list.
  10. To separate buttons with a vertical line in the form, select + add > Separator.
    You can rearrange the order of the buttons and separators by clicking the vertical dots in the row and dragging the row up or down in the list.
  11. To save the configuration for the chart component, click Save.
  12. To ensure that the chart you added and configured is applied, click the Save button on the application.