Amcharts 4 treemap balloon

Question

How do I change the text/style in the balloon on the Treemap chart from amchart 4 ?

In this example below, how do I remove the "Ford" from the balloon?

Answer 1

My sincere apologies for the super late answer, the question showed up recently related to another, not sure how this slipped through the cracks.

This is a good question for at least 2 reasons:

1. At the time we did not have a guide on modifying tooltip background color.
2. TreeMap charts are not like others, we're not working directly with an actual TreeMapSeries.

If you're just looking to edit the tooltip's text, we can do this via the TreeMapSeries template, specifically on its column template, i.e. columns.template.tooltipText, e.g. using the original demo as a base:

// The default `tooltipText` for all columns, e.g.
// `chart.series.getIndex(0).columns.template.tooltip`, is
// `"{parentName} {name}: {value}"`
//
// Let's keep {parentName} on a separate line in `tooltipText`, and play with
// font size, colors, and style. (Note we cannot nest formatting brackets.)
//
// More on string and visual formatting:
// https://www.amcharts.com/docs/v4/concepts/formatters/formatting-strings/
level1SeriesTemplate.columns.template.tooltipText =
  "[bold font-size: 22px; #fff]{parentName}[/]\n[font-size: 20px]{name}:[/] [font-size: 20px #fff]{value}[/]";

But if you're looking to do more than that, e.g. modify the background, you'll need to work on the actual columns themselves, since actual tooltip objects are not available on column templates. Here's a way of going about this for TreeMapSeries and their columns as soon as they're ready:

// Looking over this chart type, i.e. TreeMap, we find it has a
// seriesContainer property:
// https://www.amcharts.com/docs/v4/reference/treemap/#seriesContainer_property
//
// and all containers have a "childadded" event:
// https://www.amcharts.com/docs/v4/reference/container/#childadded_event
//
// which works just as expected.
//
// More on events here:
// https://www.amcharts.com/docs/v4/concepts/event-listeners/
chart.seriesContainer.events.on("childadded", function(event) {
  // The chart will load with the initial series at first,
  // we're not interested in that.
  if (chart.series.length === 1) return;

  // Once we click a car company / TreeMap column, a new series will be generated
  // and added to the seriesContainer. Here, event.target will be the seriesContainer,
  // and event.newValue will always be the new TreeMapSeries.
  var series = event.newValue;

  // level-/depth-specific code, if you wanted
  // if (series.level === 1) {
  // }

  // The series exists, but is not ready/populated yet. In general, datavalidated
  // is a good event to check against for initial load/readiness of a series.
  series.events.once("datavalidated", function() {
    series.columns.each(function(column) {
      // In order to customize tooltip colors, we need to set getFillFromObject to false,
      // otherwise as it sounds, it'll grab color data from the parent object.
      // https://www.amcharts.com/docs/v4/reference/tooltip/#getFillFromObject_property
      // https://www.amcharts.com/docs/v4/reference/tooltip/#getStrokeFromObject_property
      column.tooltip.getFillFromObject = false;
      // column.tooltip.getStrokeFromObject = false; // not needed, since it defaults to false
      column.tooltip.background.stroke = am4core.color("#fff");
      column.tooltip.background.strokeWidth = 3;
      column.tooltip.background.strokeOpacity = 0.3;

      // background of tooltip, let's make it darker than the column's bg.
      column.tooltip.background.fill = am4core.color(
        am4core.colors.brighten(column.fill.rgb, -0.3)
      );
      // let's also make it slightly transparent.
      column.tooltip.background.fillOpacity = 0.8;

      // tooltip text color, we can also set this via string visual formatting,
      // see `tooltipText` assignment further below.
      // Every Tooltip has a Label:
      // https://www.amcharts.com/docs/v4/reference/tooltip/#label_property
      // https://www.amcharts.com/docs/v4/reference/label/
      //
      // Let's make the default color brighter than the column bg color.
      column.tooltip.label.fill = am4core.color(
        am4core.colors.brighten(column.fill.rgb, 0.7)
      );
      // alignment of text within tooltip (cannot use string visual formatting for this).
      // Let's center the text, mainly the title/parent company.
      column.tooltip.label.textAlign = "middle";
    });
  });
});

I've prepared a demo here:

https://codepen.io/team/amcharts/pen/07c3ca3e33b4ad955246893d19df3a6c/

Hope this covers the things you may have been interested in modifying.