Search results

Stop API in Vue Diagram API component

Defines the different colors and the region of color transitions

<div id='diagram'></div>
let stopscol: StopModel[] = [];
let stops1: StopModel = { color: 'white', offset: 0, opacity: 0.7 };
stopscol.push(stops1);
let stops2: StopModel = { color: 'red', offset: 0, opacity: 0.3 };
stopscol.push(stops2);
let gradient: RadialGradientModel = { cx: 50, cy: 50, fx: 50, fy: 50, stops: stopscol, type: 'Radial' };
let nodes: NodeModel[] = [{ id: 'node1', width: 100, height: 100,
style: { gradient: gradient }
}];
let diagram: Diagram = new Diagram({
...
  nodes: nodes,
...
});
diagram.appendTo('#diagram');

Properties

color

string

Sets the color to be filled over the specified region

Defaults to

offset

number

Sets the position where the previous color transition ends and a new color transition starts

Defaults to 0

opacity

number

Describes the transparency level of the region

Defaults to 1