Background: PP.Brush;
The Background property specifies brush for visual control background.
Use JSON or the setBackground method to set the property value, and the getBackground method to get the property value.
To execute the example, the HTML page must contain the component named bubbleChart (see BubbleChart component named bubbleChart (see Example of Creating the BubbleChart Component). Set new value of bubble chart area transparency, set left margin and bottom padding for bubble chart area, and define title of bubble chart area. Set new font and border for text label for X axis of the bubble chart area, redraw the text label, show total values of label width and height:
// Get bbuble chart area var chartArea = bubbleChart.getChartArea(); // Get bubble chart area background var background = chartArea.getBackground(); // Set new value of background transparency background.setOpacity(0.5); // Set bubble chart area background chartArea.setBackground(background); // Set left margin of bubble chart area chartArea.getMargin().setLeft(30); // Set bottom padding of bubble chart area chartArea.getPadding().setBottom(30); // Set bubble chart title var header = new PP.Ui.ChartLabel({ Text: "Bubble chart", VerticalAlignment: PP.VerticalAlignment.Top, HorizontalAlignment: PP.HorizontalAlignment.Center }); chartArea.setHeader(header); // Get text label of the X axis of bubble chart var label = chartArea.getAxisX().getLabels().getItem(1); // Determine style var style = new PP.Style(); // Determine the object that determines black color var color = new PP.Color(255, 255, 255); // Create a new border object var borderSettings = {LeftColor: color, Width: 1} var border = new PP.Border(borderSettings); // Create a new font object var fontSettings = { FontFamily: "Arial", Size: 10, Color: "red"} var font = new PP.Font(fontSettings); // Set new values of borders and font for obtained label and bubble chart area label.setStyle(style, PP.ControlState.Release); label.setFont(font); label.setBorder(border); chartArea.setStyle(style, PP.ControlState.Release); chartArea.setFont(font); // Refresh bubble chart bubbleChart.refresh(); // Rerender bubble chart label.draw(); // Output general values of label width and height console.log("General label width: " + label.getRealWidth()); console.log("General label height: " + label.getRealHeight());
After executing the example background transparency, left margin and bottom padding of bubble chart area are changed, a title is set. New font and borders are set for text label in the X axis of bubble chart area, the label is rerendered:
The browser console displays values of total width and height for the obtained text label:
Label total width: 57
Label total height: 25
See also: