Generating Curved Corners on Bar Chart Risers

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.

Syntax: How to Generate Bar Chart Risers With Curved Corners

"series": number, "border": {"cornerRadius": {"x": value, "y": value}}

where:

"series": number

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.

"border"

Defines the properties of the border around the riser.

"cornerRadius": {"x": value, "y": value}

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:

  • A number that specifies the radius of the corner in pixels.
  • A percent string such as "20%", that represents a percentage of the ordinal or numeric axis of the riser.
  • A CSS length string such as "5em" or "10px" that specifies the radius of the corner in pixels. For information about CSS length strings, see https://developer.mozilla.org/en-US/docs/Web/CSS/length.
  • An object with "x" and "y" properties (where "x" and "y" can be any of the above) to specify the corner radius along the ordinal axis (x) and numeric axis (y) of the riser.

Example: Controlling Corner Shape of Bar Chart Risers

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