amCharts v4: Instant Tooltip per Bullet
Answering https://stackoverflow.com/q/55019921/781824
by notacouch
HTML
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/dark.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<div id="amcharts_chartdiv" class="clearfix" style="background-color:#222;height:500px;">
</div>
JavaScript
// forked from: https://jsfiddle.net/Knavaneeth/x4a8m3h1/6/
// original question: https://stackoverflow.com/q/55019921/781824
var dynamic_data_arr = [{date: "2019-02-25", market1: "21.67", sales1: "Amazon", market2: "25.92", sales2: "La Collette"},
{date: "2019-02-26", market1: "21.67", sales1: "Amazon", market2: "25.92", sales2: "La Collette,Co-op"}];
am4core.useTheme(am4themes_dark);
am4core.useTheme(am4themes_animated);
// Themes end
// Create chart instance
chart = am4core.create("amcharts_chartdiv", am4charts.XYChart);
// Add data
// chart.data = [] ;
chart.data = dynamic_data_arr;
// chart.validateData();
// Create axes
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
//dateAxis.renderer.grid.template.location = 0;
//dateAxis.renderer.minGridDistance = 30;
var valueAxis1 = chart.yAxes.push(new am4charts.ValueAxis());
// valueAxis1.title.text = "Sales";
var valueAxis2 = chart.yAxes.push(new am4charts.ValueAxis());
// valueAxis2.title.text = "Market Days";
valueAxis2.renderer.opposite = true;
valueAxis2.renderer.grid.template.disabled = true;
var series3 = chart.series.push(new am4charts.LineSeries());
series3.dataFields.valueY = "market1";
series3.dataFields.dateX = "date";
series3.dataFields.nameX = "sales1";
series3.name = "Amazon";
series3.strokeWidth = 2;
series3.tensionX = 0.7;
series3.yAxis = valueAxis2;
/* series3.tooltipText = "{nameX}\n[bold font-size: 20]{valueY}[/]"; */
series3.showBalloon = true;
var bullet3 = series3.bullets.push(new am4charts.CircleBullet());
bullet3.circle.radius = 3;
bullet3.circle.strokeWidth = 2;
bullet3.circle.fill = am4core.color("#fff");
bullet3.circle.tooltipText = "{nameX}\n[bold font-size: 20]{valueY}[/]";
var...