How to display currency as currency rather than just numbers in chart series labels?

Can you share the XML for the page? Better yet, can you create a clone of it using only standard fields and objects?

Here is the XML of a vanilla test page using the Opportunities object. Amount is a currency field that displays as a number in the chart. Please let me know if you need anything else. I appreciate your looking into this!

<skuid__page unsavedchangeswarning=“yes” personalizationmode=“server” showsidebar=“false” showheader=“false”>















<skuid__grid uniqueid=“sk-1niz-17632” flexDirection=“row” justifyContent=“flex-start” alignItems=“flex-start”>



<skuid__chart model=“Opportunities” maintitle=“Opportunities” type=“donut” uniqueid=“sk-1nkB-29874”>












pie
donut

</skuid__chart>



</skuid__grid>










</skuid__page>

The XML didn’t get through. Make sure to use this.

Oops here it is.

<skuid__page unsavedchangeswarning="yes" personalizationmode="server" showsidebar="false" showheader="false">
	<models>
		<model id="Opportunities" limit="20" query="true" createrowifnonefound="false" datasource="salesforce" sobject="Opportunity">
			<fields>
				<field id="RecordTypeId"/>
				<field id="RecordType.Name"/>
				<field id="Amount"/>
				<field id="StageName"/>
			</fields>
			<conditions>
				<condition type="fieldvalue" value="0.0" enclosevalueinquotes="false" field="Amount" operator="gt"/>
			</conditions>
			<actions/>
		</model>
	</models>
	<components>
		<skuid__grid uniqueid="sk-1niz-17632" flexDirection="row" justifyContent="flex-start" alignItems="flex-start">
			<divisions>
				<division minWidth="100px" ratio="1">
					<components>
						<skuid__chart model="Opportunities" maintitle="Opportunities" type="donut" uniqueid="sk-1nkB-29874">
							<dataaxes>
								<axis id="axis1"/>
							</dataaxes>
							<categoryaxes>
								<axis id="categories" categorytype="field"/>
							</categoryaxes>
							<serieslist>
								<series valuefield="Amount" splittype="field" aggfunction="sum" splitfield="StageName"/>
							</serieslist>
							<colors/>
							<legend layout="horizontal" halign="center" valign="bottom"/>
							<allowedtypes>
								<type>pie</type>
								<type>donut</type>
							</allowedtypes>
						</skuid__chart>
					</components>
				</division>
			</divisions>
		</skuid__grid>
	</components>
	<resources>
		<labels/>
		<javascript/>
		<css/>
		<actionsequences/>
	</resources>
	<styles>
		<styleitem type="background" bgtype="none"/>
	</styles>
</skuid__page>

I wish it were easier but the formatting of the data labels isn’t a declarative method.

Here are the resources used to make the snippet to format the labels.

Highcharts API Option: plotOptions.pie.dataLabels.format

A format string for the data label. Available variables are the same as for formatter.

https://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting

Highcharts Demo - JSFiddle - Code Playground

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

Here’s where to select the snippet.

Here’s the XML with the tiniest javascript snippet I ever made. 😉

<skuid__page unsavedchangeswarning="yes" personalizationmode="server" showsidebar="false" showheader="false">
	<models>
		<model id="Opportunities" limit="20" query="true" createrowifnonefound="false" datasource="salesforce" sobject="Opportunity">
			<fields>
				<field id="Amount"/>
				<field id="StageName"/>
			</fields>
			<conditions>
				<condition type="fieldvalue" value="0.0" enclosevalueinquotes="false" field="Amount" operator="gt"/>
			</conditions>
			<actions/>
		</model>
	</models>
	<components>
		<skuid__grid uniqueid="sk-1niz-17632" flexDirection="row" justifyContent="flex-start" alignItems="flex-start">
			<divisions>
				<division minWidth="100px" ratio="1">
					<components>
						<skuid__chart model="Opportunities" maintitle="Opportunities" type="donut" uniqueid="sk-1nkB-29874" rendersnippet="beforeRender">
							<dataaxes>
								<axis id="axis1"/>
							</dataaxes>
							<categoryaxes>
								<axis id="categories" categorytype="field"/>
							</categoryaxes>
							<serieslist>
								<series valuefield="Amount" splittype="field" splitfield="StageName" aggfunction="sum" splittemplate="{{StageName}}" innerContentTemplate="$ {{Amount}}"/>
							</serieslist>
							<colors/>
							<legend layout="horizontal" halign="center" valign="bottom"/>
							<allowedtypes>
								<type>pie</type>
								<type>donut</type>
							</allowedtypes>
							<styles>
								<spacing/>
							</styles>
						</skuid__chart>
					</components>
				</division>
			</divisions>
		</skuid__grid>
	</components>
	<resources>
		<labels/>
		<javascript>
			<jsitem location="inlinesnippet" name="beforeRender" cachelocation="false">var params = arguments[0];

params.series[0].dataLabels.format = '$ {y:,.2f} USD'</jsitem>
		</javascript>
		<css/>
		<actionsequences/>
	</resources>
	<styles>
		<styleitem type="background" bgtype="none"/>
	</styles>
</skuid__page>

That is amazing! The tiniest snippet made the biggest difference. Many thanks!