Is there any limit for data label for pie chart?

Certified Lead Developer

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

Parents
  • 0
    Certified Senior Developer

    You can try "ON_CHART"  in seriesLabelStyle. 


  • 0
    Certified Senior Developer
    in reply to Rishikesh Raj

    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")
                  )
                )
              }
            )
          }
        )
      }
    )

Reply
  • 0
    Certified Senior Developer
    in reply to Rishikesh Raj

    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")
                  )
                )
              }
            )
          }
        )
      }
    )

Children
  • 0
    Certified Lead Developer
    in reply to Rishikesh Raj

    A couple of observations in your code. 

    1. The colors of the pie chart are not the same as the colors of the legends. Hence, it is better to have a single source of truth (a variable).
    2. You need not add icons and the text is two separate side-by-side items. Both can be added in a single richTextDisplayField

    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)
                  }
                )
              )
            }
          )
        }
      )
    )