Skip to content
amCharts 5

WordCloud with hover effects on words

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

Code

Section titled “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)
});

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

Section titled “Demo”
Open in CodePen