amCharts tooltip is showing only on DateAxis but not ValueAxis

Question

I'm using amCharts and I'm making a XY Chart with multiple series, the tooltip shows ony when the X Axis type is DateAxis but not working when it's ValueAxis

var dateAxis = chart5.xAxes.push(new am4charts.DateAxis());
series.dataFields.dateX = "time";

amChart with tooltip:

Now when I change these 2 lines to Value Axis it doesn't work

var dateAxis = chart5.xAxes.push(new am4charts.ValueAxis());
    series.dataFields.valueX = "time";

amChart without tooltip:

Answer 1

I came across the same issue, and digging into the library code , I realized ValueAxis doesn't implement getSeriesDataItem method ( DateAxis and CategoryAxis do). So, the solution for me was to implement that method. Based on the other axis implementations, the code I came out with was:

am4charts.ValueAxis.prototype.getSeriesDataItem = function (series, position) {
    var key = this.axisFieldName + this.axisLetter;
    var value = this.positionToValue(position);
    return series.dataItems.getIndex(series.dataItems.findClosestIndex(value, function(x) {
        return x[key];
    }, "any"));
}

After adding this prototype, tooltips works with no issues when using ValueAxis:

 /********** FIX: Add getSeriesDataItem method to ValueAxis ************/ am4charts.ValueAxis.prototype.getSeriesDataItem = function (series, position) { var key = this.axisFieldName + this.axisLetter; var value = this.positionToValue(position); return series.dataItems.getIndex(series.dataItems.findClosestIndex(value, function(x) { return x[key]; }, "any")); } /**********************************************************************/ /* Create chart instance */ var chart = am4core.create("chartdiv", am4charts.XYChart); /* Add data */ chart.data = [{ "xValue": 1000, "yValue": 1587 }, { "xValue": 1100, "yValue": 1567 }, { "xValue": 1250, "yValue": 1617 }, { "xValue": 1400, "yValue": 1630 }, { "xValue": 1700, "yValue": 1660 }, { "xValue": 1754, "yValue": 1683 }, { "xValue": 2255, "yValue": 1691 }, { "xValue": 3004, "yValue": 1298 }]; /* Create axes */ var theXAxis = chart.xAxes.push(new am4charts.ValueAxis()); /* Create value axis */ var theYAxis = chart.yAxes.push(new am4charts.ValueAxis()); /* Create series */ var series1 = chart.series.push(new am4charts.LineSeries()); series1.dataFields.valueY = "yValue"; series1.dataFields.valueX = "xValue"; series1.name = "The X Axis"; series1.bullets.push(new am4charts.CircleBullet()); series1.tooltipText = "{valueY}"; /* Add legend */ chart.legend = new am4charts.Legend(); /* Create a cursor */ chart.cursor = new am4charts.XYCursor();

 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: 300px; }

 <script src="//www.amcharts.com/lib/4/core.js"></script> <script src="//www.amcharts.com/lib/4/charts.js"></script> <div id="chartdiv"></div>

Answer 2

Here's a reply to the request to post an example of this (it's happening to me, too) from @xorspark :

XY chart, Y axis is ValueAxis, X axis is CategoryAxis.... and the tooltip works: https://codepen.io/alavigne314/pen/JjozVWx

Same XY chart, but X axis is changed from CategoryAxis to ValueAxis... and the tooltip is gone: https://codepen.io/alavigne314/pen/povYBdp

The changes between the two are only 3 lines:

var theXAxis = chart.xAxes.push(new am4charts.CategoryAxis());
theXAxis.dataFields.category = "xValue";

gets changed to

var theXAxis = chart.xAxes.push(new am4charts.ValueAxis());

and

series1.dataFields.categoryX = "xValue";

gets changed to

series1.dataFields.valueX = "xValue";

Maybe we're both not reading something in the documentation correctly? If so, I can't find out what it is. Or perhaps... are tooltips broken or not supported in a both X-and-Y-ValueAxis chart?