Gradient Definitions

Gradients can be defined by a string or a JSON object.

JSON Object: This JSON object definition defines a linear or radial gradient:

color: {
	type: 'string', 
	start:{
		x: number | 'string', 
		y: number | 'string'
	}, 
	end:{ // Linear Gradients Only
		x: number | 'string', 
		y: number | 'string'
	},  
	radius: 'string',  // Radial Gradients Only
	stops: [ 
			{ 
				offset: number | 'string', 
				color: 'string'
			},
			...
		]
}

type: a string that defines the type of gradient: 'linear' or 'radial'

start/x: specifies the starting X-coordinate in the destination object space.

start/y: specifies the starting Y-coordinate in the destination object space.

end/x: If type is 'linear', specifies the ending X-coordinate in the destination object space.

end/y: If type is 'linear', specifies the ending Y-coordinate in the destination object space.

radius: If type is 'radial, specifies the radius of the gradient in the destination object space.

stops: a comma separated list of "offset color" pairs. This array can be any length, and can be a list of objects or arrays.

The start: x/y and end: x/y parameters can be specified as numbers (e.g., 0/20) or as strings (e.g., '5%'/'20%'). Numbers are interpreted as raw Scalable Vector Graphics (SVG) pixel coordinates. For example, start: x:0/y:0 is the object's top left corner. Negative numbers are not valid; any number less than zero is treated as zero. Numeric start/end coordinates are only useful for objects where you can set the area dimensions (e.g., the chart background area). For example, if the chart background/draw area is set to 200 by 200 pixels and start x:0/y:0 and stop x:100/y:0 is used to define a linear gradient, the gradient will be applied from the left edge to the center of the rectangle. If an object's size is calculated by the library (e.g., legend area, chart frame, risers, etc.), string percentages are typically used. For radial gradients, start: x/y defines the center of the gradient (e.g., start: x: '50%'/y: '50%' draws the gradient in the center of the object).

For radial gradients, the radius property defines the distance from the center to the outermost edge of the gradient. For example if an object is 200 by 200 pixels with a gradient start: x:'50%'/y:'50%' and radius: '100%', the outermost gradient edge will be 100 pixels beyond the edges of the object. In this example, 100% of 200 pixels is 200 pixels, so the gradient is actually 400 pixels from extreme left to extreme right. For a radial gradient that starts in the center (start: x:'50%'/y:'50%'), radius: '50%' is normally used to draw the gradient from the center to the outermost edges of the object.

The stops:offset values can be numbers or strings with '%'. Only numbers between 0 and 1 are valid, and are treated as percentages. A value 0.5 is the same as "50%". Numbers less than zero are treated as zero, and numbers greater than one are treated as 1.

string: To define a gradient in a string, use one of the following:

For a linear gradient, use a string in the following format:

linear-gradient(startX, startY, endX, endY, stopsOffset stopsColor,...stopsOffset stopsColor)

For a radial gradient, use a string in the following format:

radial-gradient(startX, startY, radius, stopsOffset, stopsColor,...stopsOffset stopsColor)

Examples:

fill: {
	color: 'linear-gradient(0,0,100%,100%, 20% teal, 95% cyan)'
	},

fill: {
	color: 'radial-gradient(50%,50%,50%, 20% blue, 35% red, 55% blue, 75% red, 1 lightblue)'
	},

You can learn more about SVG and defining gradients at: http://www.w3.org/TR/SVG/pservers.html.