Defining the Shapes of Risers for a Series in Bar, Line, and Area Charts

How to:

The riserShape property is used in conjunction with the comboCharts properties to define a combination chart (that is, a chart that can consist of a combination of bar risers, area risers, and line risers). In bar, line, and area charts, these properties can be used to define the shape of risers (bar, line, or area) for each series. The comboCharts properties control the layout (stacked, absolute, percent, or sideBySide) of the risers for each series.

Top of page
x
Syntax: How to Define the Shape of Risers in Bar, Line, and Area Charts
series:
[
    (
      series: snumber,
      riserShape: 'string',
   }
]

where:

snumber

Is a zero-based series number. If the series does not exist in the chart, the property is ignored.

'string'

Is a string that defines the shape of the riser for the specified series Valid values are:

  • 'bar'.
  • 'line'.
  • 'area'.
Example: Defining Riser Shapes in Bar, Line, and Area Charts

The following request against the GGSALES data source generates a vertical bar chart in which the comboCharts properties define the bar series layout as stacked, the line series layout as absolute, and the area series layout as undefined. The properties for each series define the riser shape for that series:

GRAPH FILE GGSALES
SUM  DOLLARS BUDDOLLARS UNITS BUDUNITS ASQ.DOLLARS 
BY PRODUCT
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH VBAR
ON GRAPH SET STYLE *
*GRAPH_JS
legend: {visible: true},
border: {width: 2, color: 'teal'},
title: {visible: true, text: 'ComboChart',font: '14pt Sans-Serif', color: 'teal'},
blaProperties: {lineConnection:'curved',
   comboCharts: {
      barSeriesLayout: 'stacked',
      lineSeriesLayout:'absolute',
      areaSeriesLayout: undefined}    
},
series: [
   {series: 0, color: 'purple', riserShape: 'line', border: {width: 2},marker: {shape: 'pirateCross', size: 14, visible: true}},
   {series: 1, color: 'lightgreen', riserShape: 'bar'},
   {series: 2, color: 'yellow', riserShape: 'bar'},  
   {series: 3, color: 'coral', riserShape: 'bar'},
    {series: 4, color: 'tan', riserShape: 'area'}
]
*END
ENDSTYLE
END

The output is:

WebFOCUS