DataChart Element
With Alleo Adaptive Cards, you can create custom charts with externally connected data. In the Adaptive Card Designer, you can use the DataChart button illustrated below to add the charting control.
Chart Type
You can specify the Line, Bar, or Pie under the Chart Type dropdown:
Sample Code
Below is an example of the json code used to format the chart and connect external data.
CARD PAYLOAD EDITOR
{
"type": "AdaptiveCard",
"body": [
{
"type": "TextBlock",
"size": "Medium",
"weight": "Bolder",
"text": "BAR CHART"
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "DataChart",
"spacing": "None",
"dataChart": {
"data": {
"labels": "${data.labels}",
"dataSets": [
{
"label": "A",
"data": "${data.dataSets[0].data}",
"backgroundColor": [
"rgba(255, 99, 132, 0.2)",
"rgba(54, 162, 235, 0.2)",
"rgba(255, 206, 86, 0.2)",
"rgba(75, 192, 192, 0.2)",
"rgba(153, 102, 255, 0.2)",
"rgba(255, 159, 64, 0.2)"
],
"borderColor": [
"rgba(255, 99, 132, 1)",
"rgba(54, 162, 235, 1)",
"rgba(255, 206, 86, 1)",
"rgba(75, 192, 192, 1)",
"rgba(153, 102, 255, 1)",
"rgba(255, 159, 64, 1)"
],
"borderWidth": 1
}
]
},
"options": {},
"type": 1
},
"size": "Large",
"title": "Bar Chart",
"heightSize": "Large",
"widthSize": "Large",
"chartType": "Bar"
}
],
"width": "auto",
"horizontalAlignment": "Center",
"minHeight": "200px",
"verticalContentAlignment": "Center"
}
],
"horizontalAlignment": "Center"
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.5",
"styleName": "default"
}
SAMPLE DATA EDITOR
{
"dataSource": {
"url": "https://alleo-adaptive-card.p.rapidapi.com/chart?rapidapi-key=5f87771ad7mshb8aa447d4326470p136922jsn24493b8fe869"
},
"data": {
"labels": [
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8"
],
"dataSets": [
{
"label": "A",
"data": [
1,
19,
3,
5,
2,
3,
12,
19,
3,
5,
2,
3
]
}
]
}
}