ContentAlignment: PP.HorizontalAlignment;
The ContentAlignment property specified alignment of legend contents.
Use JSON or the setContentAlignment method to set the property value, and the getContentAlignment method to get the property value.
To execute the example, the HTML page must contain the BubbleChart component named bubbleChart (see Example of Creating the BubbleChart Component). Change legend contents alignment, set legend header and footer, hide data absence label, set that legend will overlap the bubble chart main area, show legend type, and process the HeaderClicked event:
// Get value interval legend var legend = bubbleChart.getLegends()[0]; // Set legend width legend.setWidth(600); // Set legend contents alignment legend.setContentAlignment(PP.HorizontalAlignment.Left); // Change legend header var header = legend.getHeader(); header.setText("Header"); legend.setHeader(header); // Set legend footer legend.setFooter(new PP.Ui.LegendHeader({ Text: "Footer", VerticalAlignment: PP.VerticalAlignment.Bottom })); // Hide data absence mark legend.setNoDataVisible(false); // Set overlaying of bubble chart main area size by legend bubbleChart.getLegends()[1].setIsOverlap(true); // Refresh bubble chart bubbleChart.refresh(); // Display legend type console.log("Legend type: " + legend.getType()); // Handle the HeaderClicked event legend.HeaderClicked.add(function () { // Display message about legend header click console.log("The HeaderClicked event is initiated") });
Click the interval legend header.
After executing the example interval legend contents alignment is changed, header and footer are set, data absence label is hidden, and legend overlaps the bubble chart main area:
Also the browser console displays legend type and a message concerning type of the processed event:
Legend type: Intervals
HeaderClicked event initialized
See also: