How can I create common chart labels in Widget Builder?

  1. All changes to a label will be done within the “series” chart property as shown below.

pic1

  1. By default, the label of a chart is not visible and has no properties. As a general first step, click the check-box next to the “visible” property and click “Preview” on the top right side of the screen to see what you are working with as a starting point:

pic2

  1. You can now expand the series property and click the + button next to the label property to add customization to your label.
    There are quite a lot of options but the most common 2 are going to be “font” and “format”.
    You can left click on both of these properties and add them by clicking OK:

pic3

  1. We now have “font” and “format” under the label property.

pic4

  1. Customizing the “font”:
  • Click the + button to add properties to the font.
    Most commonly used will be color, size and weight .
    color changes the color of the text,
    size changes the size of the text, and
    weight changes the thickness of the text.

pic5

  • The size and weight can be changed by typing a number and the color can either by changed by using the hex-code for the color you want or by clicking the dropdown arrow and selecting a color as follows:

pic6

  1. Customizing the “format”:
  • Click the + button to add properties to the font.
    You will almost always use both the precision and type properties.
    precision specifies number of digits to show, type selects the format of the lable (Eg: percentage, fixedPoint, etc).

pic7

Most commonly precision would be 2 or 0.
Most commonly type would be fixedPoint or percent.

fixedPoint would add commas to separate large number and based on the precision shows the appropriate number of decimal places.
Eg: Selecting fixedPoint with precision = 0 would convert 1000 to 1,000.
Selecting fixedPoint with precision = 2 would convert 1000 to 1,000.00

percent converts your value to a percentage and automatically multiples it by 100.
Eg: selecting percent with precision = 0 would convert 0.1234 to 12%
Selecting percent with precision = 2 would convert 0.1234 to 12.34%

In Summary

We made the label visible ,
customized the font to size = 30, weight = 500, and color to black
customized the format with typed = percent and precision = 2

We started with the following:

pic8

And the final widget label now looks like the following:

pic9

1 Like