Defining the Background Color of the Legend Area

How to:

The backgroundcolor property defines the background color of the legend area.


Top of page

x
Syntax: How to Define the Background Color of the Legend Area
legend: {
   backgroundcolor: color}  

where:

color

Can be:

  • A string, enclosed in single quotation marks, that defines a color (by name or numeric specification string) or a gradient. The default value is 'transparent'.
  • A JSON object that defines a gradient.

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



Example: Defining the Background Color of the Legend Area

The following request makes the background color of the legend area tan:

GRAPH FILE WF_RETAIL_LITE
SUM DISCOUNT_US GROSS_PROFIT_US REVENUE_US MSRP_US
BY PRODUCT_CATEGORY
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH VBAR
ON GRAPH SET STYLE *
*GRAPH_JS
  legend: {
      backgroundcolor: 'tan'    
  }  ,
series: [
    {series: 0, color: 'lightgreen'},
    {series: 1, color: 'coral'},
    {series: 2, color: 'lightblue'},
    {series: 3, color: 'burlywood'} 
]
*END
INCLUDE=ENIADefault_combine.sty,$
ENDSTYLE
END

The output is:

The following request applies a linear gradient that transitions from bisque to ghostwhite to the legend background area:

GRAPH FILE WF_RETAIL_LITE
SUM DISCOUNT_US GROSS_PROFIT_US REVENUE_US MSRP_US
BY PRODUCT_CATEGORY
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH VBAR
ON GRAPH SET STYLE *
*GRAPH_JS
legend: {
  position: 'right',
   backgroundcolor: {
      type: 'linear',
      start: {x: '0%', y: '0%'},
      end: {x: '100%', y: '100%'},
      stops: [
         [0, 'bisque'],[1, 'ghostwhite'],
         ],
   lineStyle: {
      width: 2,
      color: 'navy',
      },
   },      
},
series: [
    {series: 0, color: 'lightgreen'},
    {series: 1, color: 'coral'},
    {series: 2, color: 'lightblue'},
    {series: 3, color: 'burlywood'} 
]
*END
INCLUDE=ENIADefault_combine.sty,$
ENDSTYLE
END

The output is:


WebFOCUS