How to: |
By default, bar chart risers have square corners. You can use the series property cornerRadius to generate curved corners for a more modern look.
Note: Legend markers are not curved, even if the chart risers are curved.
"series": number, "border": {"cornerRadius": {"x": value, "y": value}}
where:
Specifies a series number for which the corners are being rounded, or "all", to apply the cornerRadius properties to all risers. The corner shape specified for series "all" is applied to any series that does not have its own cornerRadius property.
Defines the properties of the border around the riser.
Defines the properties of the corners of the riser.
The cornerRadius property can consist of one value or two values. A single zero (0) value generates square corners. This is the default corner shape. Rounded corners can be circular or elliptical. The x and y values denote the size of the circle radius or the semi-major and semi-minor axes of the ellipse, where x and y are orientation-aware and depend on chart orientation. x represents the ordinal axis, and y represents the numeric axis.
Valid values for x and y are:
In the following request, series 0 (COGS_US) has elliptical corners, series 2 (REVENUE_US) has square corners, and series 1 (GROSS_PROFIT_US) has the round corners specified for series "all".
GRAPH FILE WF_RETAIL_LITE SUM COGS_US GROSS_PROFIT_US REVENUE_US BY PRODUCT_CATEGORY ON GRAPH PCHOLD FORMAT JSCHART ON GRAPH SET LOOKGRAPH BAR ON GRAPH SET EMBEDHEADING ON ON GRAPH SET STYLE * INCLUDE=IBFS:/FILE/IBI_HTML_DIR/ibi_themes/Warm.sty,$ TYPE=DATA, COLUMN=PRODUCT_CATEGORY, BUCKET=x-axis, $ TYPE=DATA, COLUMN=COGS_US, BUCKET=y-axis, $ TYPE=DATA, COLUMN=GROSS_PROFIT_US, BUCKET=y-axis, $ TYPE=DATA, COLUMN=REVENUE_US, BUCKET=y-axis, $ *GRAPH_JS series: [{series: 'all', border: {cornerRadius: 10}}, {series: 0, border: {cornerRadius: {x: "10%", y: "30%"}}}, {series: 2, border: {cornerRadius: 0}} ] *END ENDSTYLE END
The output is shown in the following image.
WebFOCUS | |
Feedback |