WordCloud with hover effects on words

This is a demo tutorial. While there is no step-by-step commentary available (yet), the live demo below is fully functional. Feel free to open it for full source code.

This demo shows how we can add background color to the WordCloud labels, as well as change their appearance on hover.

Code

series.labels.template.setAll({
  paddingTop: 5,
  paddingBottom: 5,
  paddingLeft: 5,
  paddingRight: 5,
  fontFamily: "Courier New",
  cursorOverStyle: "pointer",
  setStateOnChildren: true,
  interactive: true
});

series.labels.template.setup = function(target) {
  const bg = target.set("background", am5.RoundedRectangle.new(root, {
    fill: am5.color(0x000000)
  }));
  
  bg.states.create("hover", {
    fill: am5.color(0xff621f)
  });
}

series.labels.template.states.create("hover", {
  fill: am5.color(0xffffff)
});

series.labels.template.setAll({
  paddingTop: 5,
  paddingBottom: 5,
  paddingLeft: 5,
  paddingRight: 5,
  fontFamily: "Courier New",
  cursorOverStyle: "pointer",
  setStateOnChildren: true,
  interactive: true
});

series.labels.template.setup = function(target) {
  var bg = target.set("background", am5.RoundedRectangle.new(root, {
    fill: am5.color(0x000000)
  }));
  
  bg.states.create("hover", {
    fill: am5.color(0xff621f)
  });
}

series.labels.template.states.create("hover", {
  fill: am5.color(0xffffff)
});

Note the setStateOnChildren: true and interactive: true in label configuration.

The former ensures that "hover" state is triggered on all label children, including background, when it is hovered.

The latter makes label "interactive". Otherwise the hover state would not be triggered.

Demo

See the Pen WordCloud with hover effects on words by amCharts team (@amcharts) on CodePen.