XY#api#events#tooltips
This demo shows how we can use cursorpositionchanged event to reposition the related tooltip to the exact cursor’s position.
cursorpositionchanged
/** * --------------------------------------- * 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/ * --------------------------------------- */ am4core.useTheme(am4themes_animated); // Create chart instancevar chart = am4core.create("chartdiv", am4charts.XYChart); // Add datachart.data = [ { category: "Research", value: 450 }, { category: "Marketing", value: 1200 }, { category: "Distribution", value: 1850 }]; // Create axesvar categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());categoryAxis.dataFields.category = "category";categoryAxis.renderer.grid.template.location = 0;//categoryAxis.renderer.minGridDistance = 30; var valueAxis = chart.yAxes.push(new am4charts.ValueAxis()); // Create seriesvar series = chart.series.push(new am4charts.ColumnSeries());series.dataFields.valueY = "value";series.dataFields.categoryX = "category"; series.tooltip.background.filters.clear(); chart.cursor = new am4charts.XYCursor();chart.plotContainer.tooltipPosition = "pointer";chart.plotContainer.tooltipText = " ";chart.cursor.events.on("cursorpositionchanged", function (ev) { var xAxis = ev.target.chart.xAxes.getIndex(0); var index = xAxis.positionToIndex(xAxis.toAxisPosition(ev.target.xPosition)); var item = series.dataItems.getIndex(index); if (item) { chart.tooltipText = item.categoryX + ": [bold]" + item.valueY + "[/]\n"; } else { chart.tooltipText = ""; }});
<div id="chartdiv"></div>
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: 250px;}
context-sensitive-tooltip-that-follows-mouse-cursor
