HTMLGraph | Tutorials | Changing Edge Color

Changing Edge Color

Edge color can be dynamically modified using --edge-color CSS variable for edge element, as shown in the example below.

This example demonstrates how to change edge color on mouse hover.

    
import { CanvasBuilder, BezierEdgeShape } from &#34;@html-graph/html-graph&#34;;

const element = document.getElementById(&#34;canvas&#34;);

const canvas = new CanvasBuilder(element)
  .setDefaults({
    edges: {
      shapeFactory: () =&gt; {
        const shape = new BezierEdgeShape({
          hasTargetArrow: true,
          color: &#34;#777777&#34;
          interactiveDistance: 20,
        });

        shape.element.addEventListener(&#34;mouseenter&#34;, () =&gt; {
          shape.element.style.setProperty(&#34;--edge-color&#34;, &#34;#f9880e&#34;);
        });

        shape.element.addEventListener(&#34;mouseleave&#34;, () =&gt; {
          shape.element.style.setProperty(&#34;--edge-color&#34;, &#34;#777777&#34;);
        });

        return shape;
      },
    },
  })
  .build();

Related Pages