Applying individual styles for Force-directed links

This tutorial will show how we can use adapters to style each link in a Force-directed chart individually.

Adding styles to data

The easiest way to associate specific styles with a link is to that information to actual data, e.g.:

[{
  name: "Browsers",
  children: {
    name: "Chrome",
    value: 1,
    stroke: am5.color(0xff0000)
  }, {
    name: "Firefox",
    value: 1
  }, {
    name: "IE",
    value: 1,
  }, {
    name: "Safari",
    value: 1
  }, {
    name: "Opera",
    value: 1,
    stroke: am5.color(0x00ff00)
  }]
}]

However, just adding it there will not accomplish anything. We will use an adapter to apply the styles in data to the actual links.

Using an adapter

As mentioned before, we will use an adapter - a custom function which can dynamically modify value of any setting - to look up style info in data, and modify actual setting.

TypeScript

series.links.template.adapters.add("stroke", function(width, target) {
  // Get link target data item
  const dataItem = target.get("target");

  // Look up style data in data context
  return dataItem.dataContext.stroke ? dataItem.dataContext.stroke : width;
});

JavaScript

series.links.template.adapters.add("stroke", function(width, target) {
  // Get link target data item
  var dataItem = target.get("target");

  // Look up style data in data context
  return dataItem.dataContext.stroke ? dataItem.dataContext.stroke : width;
});

Applying multiple styles

We can create as many adapters as we need, e.g.:

TypeScript

series.links.template.adapters.add("strokeWidth", function(width, target) {
  const dataItem = target.get("target");
  return dataItem.dataContext.strokeWidth ? dataItem.dataContext.strokeWidth : width;
});

series.links.template.adapters.add("strokeOpacity", function(width, target) {
  const dataItem = target.get("target");
  return dataItem.dataContext.strokeOpacity ? dataItem.dataContext.strokeOpacity : width;
});

series.links.template.adapters.add("stroke", function(width, target) {
  const dataItem = target.get("target");
  return dataItem.dataContext.stroke ? dataItem.dataContext.stroke : width;
});

JavaScript

series.links.template.adapters.add("strokeWidth", function(width, target) {
  var dataItem = target.get("target");
  return dataItem.dataContext.strokeWidth ? dataItem.dataContext.strokeWidth : width;
});

series.links.template.adapters.add("strokeOpacity", function(width, target) {
  var dataItem = target.get("target");
  return dataItem.dataContext.strokeOpacity ? dataItem.dataContext.strokeOpacity : width;
});

series.links.template.adapters.add("stroke", function(width, target) {
  var dataItem = target.get("target");
  return dataItem.dataContext.stroke ? dataItem.dataContext.stroke : width;
});

Example

Open in CodePen