PowerCharts v3.2 introduces the features to create individual floating text labels on the chart. It helps in defining a strict text content that can be shown and dragged anywhere on the chart. As of now, you can only add or delete a label, but you cannot edit a label.

The first chart that we created in Overview page contains a pre-defined label with text "A Node added as Text Label". We would add another label on chart. The image below shows how the chart looks with the pre-defined label.

We will see how we can add the label in the following section.

When in edit mode, you can add a text label. You need to right click on a position over the chart where you wish the label to be placed. Then select "Add a Label" option from the context menu.

This pops up a dialog box, as shown above, with the following options:

• "Label" represents the text of the label
• "Alpha" sets the transparency of the label. 100 is fully opaque and 0 is completely transparent
• "Size" allows you to set the size of the font in pixels
• "Background" represents the background color of the label. To set the color you can either use the color picker or enter the hexadecimal code
• "Padding" sets the space around the label
• "Font Color" sets the color of the font of the label. To set the font color you can either use the color picker or enter the hexadecimal code
• "Border Color" represents the color of the border of the label. To set the border color you can either use the color picker or enter the hexadecimal color code
• "Allow Drag" sets whether the label will be fixed or drag-able

Select colors using color picker	Finally submit

When Submit is clicked the label would then be visible as under:

You can drag the label to any position on the chart.

You can define labels in chart data too. Each label is defined in the data of the chart through the <label> element inside the <labels> element.

In edit mode, the user can also selectively delete labels by right-clicking on the label and then selecting "Delete Label".

You can get the latest updated node positions using JavaScript or by submitting the updated positions to a server-side script.