x

chartFrame: {
   fill: {
      color: fillcolor   },
   border: {
      width: number, 
      color: bordercolor,
      dash: 'dstring'
   },
   shadow: shadowval}

where:

fillcolor

Is the fill color. Can be:

A color string, enclosed in single quotation marks, specifying a name or numeric specification string, or a gradient defined by a string. The default value is 'transparent'.

A JSON object that defines a gradient.

For information about specifying colors and gradients, see Colors and Gradients.

number

Is the width of the frame border in pixels. The default value is zero (no border).

bordercolor

Is the color of the border around the frame. Can be:

A color string, enclosed in single quotation marks, specifying a name or numeric specification string, or a gradient defined by a string. The default value is 'transparent'.

A JSON object that defines a gradient.

'dstring'

Is a string that defines the dash style of the border. The default value is '' (a solid line). Use a string of numbers that defines the width of a dash in pixels followed by the width of the gap between dashes in pixels (for example, dash: '1 1' draws a dotted line).

Multiple dashes can be defined within the string (for example, '2 4 4 2'), in which case, the dashes alternate around the border.

shadowval

Enables or disables the shadow. Can be:

• true, which enables a default shadow on the chart frame.
• false, which disables a default shadow. The default value is false.

Top of page

Example: Formatting the Chart Frame

The following request against the GGSALES data source generates a chart frame whose fill color is antique white and whose border is a blue dashed line. It also generates a border that is a red dashed line with two different dash sizes that alternate around the border:

GRAPH FILE GGSALES
SUM DOLLARS UNITS 
BY PRODUCT
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH VBAR
ON GRAPH SET STYLE *
*GRAPH_JS
title: {visible:true, text:"Blue Frame and Red Border", color:'green', font:'bold 14pt Sans-Serif'},
chartFrame: {
   fill: {
      color: 'antiquewhite'
   },
   border: {
      width: 2, 
      color: 'blue',
      dash: '2 2'  
        }  
   },
  border: {
   width: 4, 
   color: 'red',
   dash: '2 4 4 2'   
},
*END
INCLUDE=ENIADefault_combine.sty,$
ENDSTYLE
END

The output is

The following example applies a linear gradient fill to the chart frame that transitions from bisque to ghost white:

GRAPH FILE GGSALES
SUM  DOLLARS BUDDOLLARS UNITS BUDUNITS ASQ.DOLLARS 
ACROSS PRODUCT
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH LINE
ON GRAPH SET STYLE *
*GRAPH_JS
blaProperties: {lineConnection: 'curved'},
border: {
   width: 2,
   color: 'navy',
},
chartFrame: {
   fill: {
      color: {
         type: 'linear',
         start: {x: '0%', y: '0%'},
         end: {x: '100%', y: '100%'},
         stops: [
            [0, 'bisque'],[1, 'ghostwhite'],    
            ],
         },
      },
      border: {
         width: 2,
         color: 'navy',
         },
},  
series: [
   {series: 0, color: 'purple'},
   {series: 1, color: 'lightgreen'},
   {series: 2, color: 'red'},  
   {series: 3, color: 'coral'},
    {series: 4, color: 'tan'}
]
*END
INCLUDE=ENIADefault_combine.sty,$
ENDSTYLE
END

The output is: