javascripthtmlchartsamchartsamcharts4

Is it possible to show any image on top of bar when user hover any bar in Amcharts

I am working on amcharts and my requirement is to show an image and top of the image its value when user hover any column is it possible in amcharts using version 4 ?

/**
 * ---------------------------------------
 * This demo was created using amCharts 4.
 * 
 * For more information visit:
 * https://www.amcharts.com/
 * 
 * Documentation is available at:
 * https://www.amcharts.com/docs/v4/
 * ---------------------------------------
 */

// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end

// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);

// Add data
chart.data = [{
  "country": "USA",
  "visits": 2025
}, {
  "country": "China",
  "visits": 1882
}, {
  "country": "Japan",
  "visits": 1809
}, {
  "country": "Germany",
  "visits": 1322
}, {
  "country": "UK",
  "visits": 1122
}, {
  "country": "France",
  "visits": 1114
}, {
  "country": "India",
  "visits": 984
}, {
  "country": "Spain",
  "visits": 711
}, {
  "country": "Netherlands",
  "visits": 665
}, {
  "country": "Russia",
  "visits": 580
}, {
  "country": "South Korea",
  "visits": 443
}, {
  "country": "Canada",
  "visits": 441
}, {
  "country": "Brazil",
  "visits": 395
}];

// Create axes

var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "country";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.minGridDistance = 30;

categoryAxis.renderer.labels.template.adapter.add("dy", function(dy, target) {
  if (target.dataItem && target.dataItem.index & 2 == 2) {
    return dy + 25;
  }
  return dy;
});

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

// Create series
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueY = "visits";
series.dataFields.categoryX = "country";
series.name = "Visits";
series.columns.template.tooltipText = "{categoryX}: [bold]{valueY}[/]";
series.columns.template.fillOpacity = .8;

var columnTemplate = series.columns.template;
columnTemplate.strokeWidth = 2;
columnTemplate.strokeOpacity = 1;
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

#chartdiv {
  width: 100%;
  height: 500px;
}
<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"></div>

As we can see when we hover any column it shows me a tooltip , but I want to show the image on top and its value on top of image when user hover any column , see the attached image . Required functionality

There is an example of images on top of chart but i need to show image when its hover

https://www.amcharts.com/demos-v4/column-chart-images-top-v4/

Solution

  • Yes, you can do that. You need this extra configuration, especially tooltipHTML:

    series.columns.template.tooltipHTML = '<div class="tooltip"><div><strong>{valueY}</strong></div><img src="https://cdn.pixabay.com/photo/2012/04/26/19/47/penguin-42936_960_720.png" alt="Linux"></div>';
series.columns.template.tooltipY = am4core.percent(0);
series.tooltip.pointerOrientation = "vertical";
series.tooltip.fontSize = 10;
series.tooltip.getFillFromObject = false;
series.tooltip.label.fill = "#000000";
series.tooltip.background.fill = "rgba(0, 0, 0, 0)";
series.tooltip.background.stroke = "rgba(0, 0, 0, 0)";
series.tooltip.background.filters.clear();

    .tooltip {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tooltip img {
  width: 15px;
  height: 15px;
}

    Warning from the documentation: Text versus HTML

    HTML tooltips are not supported by older Internet Explorer browsers. Such tooltips will also not export to images when exporting your chart.

    It's important to know that if both tooltipText and tooltipHTML are set, the latter will take precedence on browsers that support it, falling back to the former on older browsers. Setting both might be a good strategy if you want to universally support all browsers.

    If I put the above code in your example, we get the following result:

    /**
 * ---------------------------------------
 * This demo was created using amCharts 4.
 * 
 * For more information visit:
 * https://www.amcharts.com/
 * 
 * Documentation is available at:
 * https://www.amcharts.com/docs/v4/
 * ---------------------------------------
 */

// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end

// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);

// Add data
chart.data = [{
  "country": "USA",
  "visits": 2025
}, {
  "country": "China",
  "visits": 1882
}, {
  "country": "Japan",
  "visits": 1809
}, {
  "country": "Germany",
  "visits": 1322
}, {
  "country": "UK",
  "visits": 1122
}, {
  "country": "France",
  "visits": 1114
}, {
  "country": "India",
  "visits": 984
}, {
  "country": "Spain",
  "visits": 711
}, {
  "country": "Netherlands",
  "visits": 665
}, {
  "country": "Russia",
  "visits": 580
}, {
  "country": "South Korea",
  "visits": 443
}, {
  "country": "Canada",
  "visits": 441
}, {
  "country": "Brazil",
  "visits": 395
}];

// Create axes

var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "country";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.minGridDistance = 30;

categoryAxis.renderer.labels.template.adapter.add("dy", function(dy, target) {
  if (target.dataItem && target.dataItem.index & 2 == 2) {
    return dy + 25;
  }
  return dy;
});

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

// Create series
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueY = "visits";
series.dataFields.categoryX = "country";
series.name = "Visits";
series.columns.template.fillOpacity = .8;
series.columns.template.tooltipText = "{categoryX}: [bold]{valueY}[/]";
// ==================================================
series.columns.template.tooltipHTML = '<div class="tooltip"><div><strong>{valueY}</strong></div><img src="https://cdn.pixabay.com/photo/2012/04/26/19/47/penguin-42936_960_720.png" alt="Linux"></div>';
series.columns.template.tooltipY = am4core.percent(0);
series.tooltip.pointerOrientation = "vertical";
series.tooltip.fontSize = 10;
series.tooltip.getFillFromObject = false;
series.tooltip.label.fill = "#000000";
series.tooltip.background.fill = "rgba(0, 0, 0, 0)";
series.tooltip.background.stroke = "rgba(0, 0, 0, 0)";
series.tooltip.background.filters.clear();
// ==================================================

var columnTemplate = series.columns.template;
columnTemplate.strokeWidth = 2;
columnTemplate.strokeOpacity = 1;
    body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

#chartdiv {
  width: 100%;
  height: 500px;
}

.tooltip {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tooltip img {
  width: 15px;
  height: 15px;
}
    <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"></div>