Class DiagramGradient

It allows the user to define and apply the gradient effect.

Inheritance
System.Object
SfDiagramBase
DiagramGradient
Inherited Members
Namespace: Syncfusion.Blazor.Diagrams
Assembly: Syncfusion.Blazor.dll
Syntax
public class DiagramGradient : SfDiagramBase
Remarks
There are two types of gradients as follows
1. Linear Gradient.
2. Radial Gradient.
The following code demonstrates, how to define the Linear Gradient and its properties.
Examples
<SfDiagram Height="600px" Nodes="@NodeCollection">
</SfDiagram>
@code{
  public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>() { };
  protected override void OnInitialized()
  {
   // A node is created and stored in nodes array.
   DiagramNode Node = new DiagramNode()
   {
     // Position of the node
     OffsetX = 250,
     OffsetY = 250,
     // Size of the node
     Width = 100,
     Height = 100,
     Style = new NodeShapeStyle()
     {
        Gradient = new DiagramGradient()
        {
         //Start point of linear gradient
         X1 = 0,
         Y1 = 0,
         //End point of linear gradient
         X2 = 50,
         Y2 = 50,
         //Sets an array of stop objects
         Stops = new ObservableCollection<DiagramsGradientStop>()
         {
            new DiagramsGradientStop(){ Color = "white", Offset = 0},
            new DiagramsGradientStop(){ Color = "#6BA5D7", Offset = 100}
          },
          Type = GradientType.Linear
        }
      },
    };
    NodeCollection.Add(Node);
  }
 }

Constructors

DiagramGradient()

It allows the user to define and apply the gradient effect.

Declaration
public DiagramGradient()

Properties

Cx

Specifies the center point of the outer circle of the radial gradient.

Declaration
public double Cx { get; set; }
Property Value
Type Description
System.Double

Cy

Specifies the center point of the outer circle of the radial gradient.

Declaration
public double Cy { get; set; }
Property Value
Type Description
System.Double

Fx

Specifies the center point of the inner circle of the radial gradient.

Declaration
public double Fx { get; set; }
Property Value
Type Description
System.Double

Fy

Specifies the center point of the inner circle of the radial gradient.

Declaration
public double Fy { get; set; }
Property Value
Type Description
System.Double

Id

Specifies the Id of the gradient.

Declaration
public string Id { get; set; }
Property Value
Type Description
System.String

R

Specifies the radius of a radial gradient.

Declaration
public double R { get; set; }
Property Value
Type Description
System.Double

Stops

Specifies the color and a position, where the previous color transition ends, and a new color transition starts.

Declaration
public ObservableCollection<DiagramsGradientStop> Stops { get; set; }
Property Value
Type Description
System.Collections.ObjectModel.ObservableCollection<DiagramsGradientStop>

Type

Specifies the type of gradient.

Declaration
public GradientType Type { get; set; }
Property Value
Type Description
GradientType

X1

Specifies the start point of the Linear gradient.

Declaration
public double X1 { get; set; }
Property Value
Type Description
System.Double

X2

Specifies the start point of the Linear gradient.

Declaration
public double X2 { get; set; }
Property Value
Type Description
System.Double

Y1

Specifies the endpoint of the Linear gradient.

Declaration
public double Y1 { get; set; }
Property Value
Type Description
System.Double

Y2

Specifies the endpoint of the Linear gradient.

Declaration
public double Y2 { get; set; }
Property Value
Type Description
System.Double