Stacked Area Chart

A stacked area chart UI type is used to display a summarization of data across multiple categories in AI chat. Under the hood, it uses Apache ECharts library to render the chart. In your AI Agent builder you should response in output key with this format:

output:

[
.... can be other ui types ...
 {
    "ui_type": "stacked-area-chart",
    "title": "Traffic Trend",
    "description": "Weekly Traffic Trend",
    "data": {
      "x_axis": {
        "values": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
      },
      "series": [
        {
          "name": "Email",
          "data": [
            120,
            132,
            101,
            134,
            90,
            230,
            210
          ]
        },
        {
          "name": "Union Ads",
          "data": [
            220,
            182,
            191,
            234,
            290,
            330,
            310
          ]
        },
        {
          "name": "Video Ads",
          "data": [
            150,
            232,
            201,
            154,
            190,
            330,
            410
          ]
        },
        {
          "name": "Direct",
          "data": [
            320,
            332,
            301,
            334,
            390,
            330,
            320
          ]
        },
        {
          "name": "Search Engine",
          "data": [
            820,
            932,
            901,
            934,
            1290,
            1330,
            1320
          ]
        }
      ]
    }
  },
... can be other ui types ...
]

tip

Title and description are optional. If you need to display only stacked area chart data you can omit them.
X axis should be in data.x_axis.values field. Series should be in data.series field. Series should have name and data fields. In general, the stacked area chart should be populated with data returned from your AI Agent Service. In most cases, this is done using a loop (e.g. for or foreach) to iterate over the results and build the response in the format described above.

Result: