We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Connector gradient

Hello, Is it possible to set a gradient color for the connector line?

I'm trying to use the following code, but the line color is black.

let lgm: LinearGradientModel = {
      id: 'lg',
      type: 'Linear',
      stops: [
        { color: "#f4a460", offset: 0 },
        { color: "#f08080", offset: 100 }
      x1: 0, y1: 0, x2: 50, y2: 50

    const connector: ConnectorModel = {
      id: `${NODE_NAME_PREFIX.Line}${Guid.Generate()}`,
      style: {
        gradient: lgm,
        opacity: 1,
        strokeWidth: 2
      targetDecorator: {
        shape: 'None'
      constraints: ConnectorConstraints.Default & ~(ConnectorConstraints.Select | ConnectorConstraints.ReadOnly),
      sourceID: sourceShape,
      targetID: destShape,
      sourcePortID: `${this.getPortId(diagram, sourceShape, startDirection)}`,
      connectorSpacing: 1,
      type: 'Straight',
      targetPortID: `${this.getPortId(diagram, destShape, this.GetLinkDirection(startDirection))}`,
      annotations: [{ content: '', constraints: AnnotationConstraints.ReadOnly }],

1 Reply

VG Vivisa Ganesan Syncfusion Team April 26, 2023 12:47 PM UTC


It is not possible to apply gradient for connectors and we can give only stroke color to the connector.



Live Chat Icon For mobile
Up arrow icon