topic Arcade Popup Chart axes labels & styling in ArcGIS Online Developers Questions

Arcade Popup Chart axes labels & styling

BartvanderWolf — Tue, 01 Nov 2022 14:52:31 GMT

Hi All,
Trying to compose a popup with a linechart. Using the samples I managed to produce a chart Not really happy with the result...

Below is my code and a screenshot of my popup containing a ArcGis-Pro chart (picture as attachement) and the arcade media chart. I'd like to alter the arcade-chart so it looks more like the Pro-chart.
Specific questions:

A Can I add x-axes labels?
B Can I style the grapg line?

var relsel = OrderBy(FeatureSetByRelationshipName($feature,"FeatureVerticesToP_v4", ['*']),"POINT_M"); var firstR = First(relsel) var chartValues = {} var chartNames = [] for (var f in relsel) { chartValues[Text(f.POINT_M, '#,#')] = f.POINT_Z Push(chartNames, Text(f.POINT_M, '#,#')) } return { type: 'media', title : 'TestChart', description : 'Chart showing crossection of the walk that day', attributes : chartValues, // replace this dictionary with your own key-value pairs, mediaInfos: [{ type : 'linechart', //linechart | barchart | piechart | columnchart //title : '', //caption : '', altText : 'profile graph showing crossection of the days walk', //altText will be read by screen readers value : { fields: chartNames, // choose what attributes to use in the chart //normalizeField : '', // the name of the attribute to normalize by or value } }] }

Re: Arcade Popup Chart axes labels & styling

N8-CORR — Thu, 19 Jan 2023 21:42:07 GMT

I'm curious to know if you can add x-axis labels myself.

Re: Arcade Popup Chart axes labels & styling

Carld_Entremont — Tue, 30 May 2023 07:29:02 GMT

I had the same problem with the axes labelling. A quick and dirty workaround was to add css to your application...

To add a y axis label use:

.esri-feature-media__container:before{

display:block;

font-size: 10px;

max-width: 50px;

padding:20% 0 0 0;

content:"Y axis title here";

}

To centre the x axis caption label you can use:

.esri-feature-media__item-caption{

display:flex;

font-size: 10px;

justify-content: center;

}

To centre the x axis title label you can use:

.esri-feature-media__item-title{

display:flex;

font-size: 10px;

justify-content: center;

}