Happy to help,
Ahh, that explains some things. GraphicsLayer are great for quickly adding graphics to the map but it is generally preferred to construct a FeatureLayer with its source property when working with client-side graphics since the FeatureLayer has more capabilities than the GraphicsLayer, including rendering, querying, labeling and in your case better Legend support. This functionality is somewhat new and it looks like we need to update the table.
I'd suggest creating a client side feature layer from your graphics, this will give you more functionality moving forward with your app. You simply need to use your array of graphics in the FeatureLayer's source property, and move the symbol from the graphic into the renderer on the FeatureLayer.
- Set an array of graphics on the FeatureLayer.source property. All graphics must have the same geometry type.
- Specify an array of field objects, which provide the schema (name, alias, and type) of each attribute field.
- Set the objectID field property to a field containing unique IDs for each feature in the source property.
I modified the normal sample for client side feature layers in this codepen to hopefully show one approach of how this can be done with an array of adult graphics and another array of pupae graphics.
https://codepen.io/sagewall/pen/qBgeZeq
If you have thousands and thousands of individual data points you also might find the approach used in this sample useful. https://developers.arcgis.com/javascript/latest/sample-code/layers-featurelayer-large-collection/