Custom Arcade Chart in Popup

Question

I'm trying to create a chart that displays in a popup, from features in another layer using the current layer as a filter. I have the following code returning the appropriate FeatureSet filtered and grouped as I would like. But the format appears to be incorrect. I can't work out what the correct format is to have the chart actually display the data in the featureset.

var state = $feature.AALRegion;

var portal = Portal('https://www.arcgis.com');

var fields = [
    'OBJECTID',
    'Region',
    'gridcode',
    'Hectares'
];

var fs = FeatureSetByPortalItem(
    portal,
    '7369e87b3b104eae8c18507261184083',     // FeatureService ID that you want to grab fields from.
    0,                                      // Sublayer index, usually 0.
    fields,                                 // Array of fields to grab from the FeatureService.
    False                                   // Include geometry?
);

var final = GroupBy(Filter(fs,"Region = @state"),'gridcode',
      {
        name: 'sumhec',
        expression: 'Hectares',
        statistic: 'SUM'
    },
);

return final

kenbuja · Accepted Answer

You'll have to use an Arcade element instead of a chart. This uses the "media" popupElement in the return. Here's an example with your code that creates a basic bar chart

var state = $feature.AALRegion;

var portal = Portal('https://www.arcgis.com');

var fields = [
    'OBJECTID',
    'Region',
    'gridcode',
    'Hectares'
];

var fs = FeatureSetByPortalItem(
    portal,
    '7369e87b3b104eae8c18507261184083',     // FeatureService ID that you want to grab fields from.
    0,                                      // Sublayer index, usually 0.
    fields,                                 // Array of fields to grab from the FeatureService.
    False                                   // Include geometry?
);

var final = GroupBy(Filter(fs,"Region = @state"),'gridcode',
      {
        name: 'sumhec',
        expression: 'Hectares',
        statistic: 'SUM'
    },
);

var Values = {};
var barNames = [];

for (var i in final) {
  Values[Text(i.gridcode)] = i.sumhec; //you have to use a Text string for the Value keys. It doesn't work with numbers
  Push(barNames, i.gridcode)
}

return {
  type: "media",
  attributes:Values,
  mediaInfos:[{
    type: "barchart",
    title: `Sum of ${state}`,
    value: {
      fields: barNames
    }
  }]
}