ChartArea.setAreaFill

Syntax

setAreaFill(value: Array);

Parameters

value. The PP.Ui.ChartAreaFill and/or PP.Ui.ChartSectorFill class element array.

Description

The setAreaFill method adds fill elements of bubble chart plotting area.

Example

To execute this example, the HTML page must contain the BubbleChart component named bubbleChart (see Example of Creating the BubbleChart Component). Create fill area on bubble chart:

// Get chart area
chartArea = bubbleChart.getChartArea();
 
// Set rectangle fill area
areaFillSettings = {
  "Label": {
    "Padding": "5,5,5,5",
    "HorizontalAlignment": "Left",
    "VerticalAlignment": "Top",
    "MaskText": "Some area\nX: from {%Left} to {%Right}\nY: from {%Top} to {%Bottom}",
    "Style": {
      "Release": {
        "Font": {
          "Color": "#008800"
        }
      }
    }
  },
  "Left": "10000",
  "Top": "50",
  "Width": "100000",
  "Height": "50",
  "Fill": {
    "Color": "#008800",
    "Opacity": "0.2"
  },
  "Stroke": "#008800",
  "PPType": "PP.Ui.ChartAreaFill"
};
 
// Set angle fill area
angleFillSettings = {
  "Label": {
    "Padding": "5,5,5,5",
    "MaskText": "Another area\nFrom {%Start}deg to {%End}deg",
    "Style": {
      "Release": {
        "Font": {
          "Color": "#000088"
        }
      }
    }
  },
  "Start": "0",
  "Angle": "60",
  "Fill": {
    "Color": "#000088",
    "Opacity": "0.2"
  }
};
 
// Apply fill settings
chartArea.setAreaFill(areaFillSettings);
chartArea.setAreaFill(angleFillSettings);
// Refresh component
bubbleChart.refreshAll();

As a result rectangular and angle areas of bubble chart are filled: