Hi team,
i have requirement to implement a donut style of pie chart. everything is fine expect the data labels. it is not showing complete label name in the legend.
a!pieChartField( label: "Employee Credential Status", labelPosition: "ABOVE", series: { a!chartSeries(label: "off boarding or termination of client", data: 1374, color: "BLUEGRAY"), a!chartSeries(label: "making account to non billabale", data: 343, color: "AMBER"), a!chartSeries(label: "updated accouts to check pay", data: 97, color: "RED") }, height: "SHORT", seriesLabelStyle: "LEGEND", colorScheme: "CLASSIC", style: "DONUT", showTooltips:true, showDataLabels: true, showAsPercentage: true )
The requirement is to show complete label in the legend.
Discussion posts and replies are publicly visible
You can try "ON_CHART" in seriesLabelStyle.
You can aslo try this custom-made LEGEND.
a!columnsLayout( alignVertical: "BOTTOM", columns: { a!columnLayout( contents: a!pieChartField( label: "Employee Credential Status", labelPosition: "ABOVE", series: { a!chartSeries( label: "off boarding or termination of client", data: 1374, color: "BLUEGRAY" ), a!chartSeries( label: "making account to non billabale", data: 343, color: "AMBER" ), a!chartSeries( label: "updated accouts to check pay", data: 97, color: "RED" ) }, height: "SHORT", seriesLabelStyle: "NONE", colorScheme: "CLASSIC", style: "DONUT", showTooltips: true, showDataLabels: false, showAsPercentage: true ) ), a!columnLayout( contents: { a!sideBySideLayout( items: { a!sideBySideItem( width: "MINIMIZE", item: a!richTextDisplayField( value: a!richTextIcon(icon: "circle", color: "#E8CD31") ) ), a!sideBySideItem( item: a!richTextDisplayField( value: a!richTextItem( text: "off boarding or termination of client" ) ) ) } ), a!sideBySideLayout( items: { a!sideBySideItem( width: "MINIMIZE", item: a!richTextDisplayField( value: a!richTextIcon(icon: "circle", color: "#EB2700") ) ), a!sideBySideItem( item: a!richTextDisplayField( value: a!richTextItem(text: "making account to non billabale") ) ) } ), a!sideBySideLayout( items: { a!sideBySideItem( width: "MINIMIZE", item: a!richTextDisplayField( value: a!richTextIcon(icon: "circle", color: "#64A8D9") ) ), a!sideBySideItem( item: a!richTextDisplayField( value: a!richTextItem(text: "updated accouts to check pay") ) ) } ) } ) } )
A couple of observations in your code.
Below is an optimized version of your code.
a!localVariables( local!data: { { label: "off boarding or termination of client", data: 1374, color: "#619ed6" }, { label: "making account to non billabale", data: 343, color: "#fbc543" }, { label: "updated accouts to check pay", data: 97, color: "#e64344" } }, a!columnsLayout( alignVertical: "MIDDLE", columns: { a!columnLayout( contents: a!pieChartField( label: "Employee Credential Status", labelPosition: "ABOVE", series: a!forEach( items: local!data, expression: a!chartSeries( label: fv!item.label, data: fv!item.data, color: fv!item.color ) ), height: "SHORT", seriesLabelStyle: "NONE", colorScheme: "CLASSIC", style: "DONUT", showTooltips: true, showDataLabels: false, showAsPercentage: true ) ), a!columnLayout( contents: { a!forEach( items: local!data, expression: a!richTextDisplayField( labelPosition: "COLLAPSED", value: { a!richTextIcon( icon: "circle-large", color: fv!item.color ), " ", a!richTextItem(text: fv!item.label) } ) ) } ) } ) )