How to custom tooltip in AmChart (v4) with dynamic variable name

April 24, 2024

I want to custom Tooltip Text in on XYChart with 2 LineSeries (TEMP_REAR and TEMP_CR)
Sample data:

[
{
    "sumTime": "2024-04-22 16:55:47",
    "TEMP_REAR": 7,
    "TEMP_REAR_lotId": "LOT_ID_2",
    "TEMP_CR": 6,
    "TEMP_CR_lotId": "LOT_ID_1"
},
{
    "sumTime": "2024-04-20 16:55:47",
    "TEMP_CR": 5,
    "TEMP_CR_lotId": "LOT_ID_3",
    "TEMP_REAR": 7,
    "TEMP_REAR_lotId": "LOT_ID_2",
}]

Expect Tooltip Text:

Name: TEMP_REAR
Sum Time: 2024-04-22 16:55:47
Sum Value: 7
Lot ID: LOT_ID 2

Name: TEMP_CR
Sum Time: 2024-04-22 16:55:47
Sum Value: 6
Lot ID: LOT_ID 1

You can see the problem is the field LOT ID (…_lotId). It was combined by _lotId. I tried many different ways but still not work. Please, help me to resolve it.

Name: TEMP_REAR
Sum Time: 2024-04-22 16:55:47
Sum Value: 7
Lot ID: LOT_ID 2

Name: TEMP_CR
Sum Time: 2024-04-22 16:55:47
Sum Value: 6
Lot ID: LOT_ID 1

>Solution :

You can use series.tooltipHTML option to format your tooltip content the way you like. Example:

am4core.useTheme(am4themes_animated);

var chart = am4core.create("chartdiv", am4charts.XYChart);
chart.cursor = new am4charts.XYCursor();
chart.data = [{
    "sumTime": "2024-04-22 16:55:47",
    "TEMP_REAR": 7,
    "TEMP_REAR_lotId": "LOT_ID_2",
    "TEMP_CR": 6,
    "TEMP_CR_lotId": "LOT_ID_1"
  },
  {
    "sumTime": "2024-04-20 16:55:47",
    "TEMP_CR": 5,
    "TEMP_CR_lotId": "LOT_ID_3",
    "TEMP_REAR": 7,
    "TEMP_REAR_lotId": "LOT_ID_2",
  }
];

var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.dataFields.date = "sumTime";

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

function createSeries(field, name) {
  var series = chart.series.push(new am4charts.LineSeries());
  series.dataFields.valueY = field;
  series.dataFields.dateX = "sumTime";
  series.name = name;

  series.tooltipHTML = `<b>Name: {name}</b><br>Sum Time: {dateX.formatDate("yyyy-MM-dd HH:mm:ss")}<br>Sum Value: {valueY}<br>Lot ID: {${field}_lotId}`;
  series.tooltip.getFillFromObject = false;
  series.tooltip.background.fill = am4core.color("#000");

  return series;
}

createSeries("TEMP_REAR", "TEMP_REAR");
createSeries("TEMP_CR", "TEMP_CR");

<html>

<head>
  <script src="https://cdn.amcharts.com/lib/4/core.js"></script>
  <script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
  <script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
  <div id="chartdiv" style="width: 100%; height: 400px;"></div>
</head>

<body>
</body>

</html>