Tooltip not showing on Android but on iOS it does.

[adaryabegi]

Hello!

I have a ChartView which actually worked really good until I saw that the tooltip for the graphs are only showing on iOS and on
android not.

I think it may has something todo with overflow or so. Please help!

Edited:
I found out that the tooltip.formatter function gets not executed on android. Somebody know why? (I have tested it with alerts, on iOS i got an alert, on android I did not)

Code:
`
var Highcharts = "Highcharts";
var conf = {
chart: {
type: "line",
// zoomType: "xy",
renderTo: "container",
ignoreHiddenSeries: false,
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
click: function () {
this.series.chart;
this.series.chart.update({
tooltip: {
enabled: tooltipEnabled,
},
});
tooltipEnabled = tooltipEnabled ? false : true;
},
},
},

title: {
  text: "",
},
xAxis: {
  type: "datetime",
  tickPixelInterval: 150,
  dateTimeLabelFormats: {
    millisecond: "%H:%M",
    second: "%H:%M",
    minute: "%H:%M",
    hour: "%H:%M",
    day: "%e. %b",
    week: "%e. %b",
    month: "%b '%y",
    year: "%Y",
  },
},
yAxis: {
  title: {
    text: "",
  },
  max: 10,
  plotLines: [
    {
      value: 0,
      width: 1,
      color: "#808080",
    },
  ],
},

tooltip: {
  formatter: function () {
    //formatter generell nicht showing
    alert("clicked");
    if (this.point.bemerkung !== undefined && this.point.bemerkung !== "") {
      const date = new Date(this.point.x);

      return (
        "<b>" +
        this.point.y.toFixed(2) +
        "</b><br/>" +
        this.series.name +
        "<br/>" +
        date.toLocaleString("de-AT") +
        "<br/>" +
        "Bemerkung: " +
        this.point.bemerkung
      );
    } else {
      const date = new Date(this.x);

      return (
        "<b>" +
        this.point.y.toFixed(2) +
        "</b><br/>" +
        this.series.a +
        "</b><br/>" +
        date.toLocaleString("de-AT")
        //Highcharts.dateFormat("%d.%m.%Y %H:%M", this.x)
      );
    }
  },

  useHTML: true,
  enabled: true,
},
legend: {
  enabled: false,
},
exporting: {
  enabled: false,
},
credits: {
  enabled: false,
},
plotOptions: {
  series: {
    marker: {
      enabled: true,
      symbol: "circle",
      animation: true,
      duration: 500,
      radius: 3.5,
    },

    point: {
      events: {
        click: function () {
          window.postMessage("data");
        },
      },
    },
  },
},
series: [
  {
    data: [{ x: von.getTime() + 1 * 1000, y: 0 }],
    hide: true,
    color: "rgba(0,0,0,0)",
    clickable: false,
    visible: false,
  },
  checkedLaut && {
    name: "Lautstärke",
    data: lautstärke.data,
    regression: false,
    color: "rgba(0,0,0, 1)",
    animation: true,

    // (function () {
    //   // generate an array of random data
    //   var data = [],
    //     time = new Date().getTime(),
    //     i;

    //   for (i = -19; i <= 0; i += 1) {
    //     data.push({
    //       x: time + i * 1000,
    //       y: Math.random(),
    //     });
    //      ("data", data);
    //      ("lautsätken data", lautstärke.data);
    //   }
    //   return data;
    // })(),
  },
  checkedBel && {
    name: "Belastung",
    regression: true,
    data: belastung.data,
    color: "rgba(245,214,93,1	)",
    animation: true,
  },
  checkedDurch &&
    durschnittAllerUser.length > 0 && {
      name:
        "Durchschnitt aller Benutzer mit dem gleichen Ausganswert (Lautstärke)",
      data: durchAllLine,
      color: "rgba(230,157,58,1)	",
      regression: true,
      marker: {
        enabled: false,
      },
      dashStyle: "ShortDash",
      animation: true,
    },
  checkedLinear1 && {
    type: "line",
    name: "Lautstärke Linear",
    regression: true,
    regressionSettings: {
      type: "linear",
    },
    animation: true,
    color: "rgba(0,0,0,1)",
    marker: {
      enabled: false,
    },
    dashStyle: "ShortDash",
    data: lautLine.line,
  },
  checkedLinear2 && {
    animation: true,
    type: "line",
    name: "Belastung Linear",

    color: "rgba(245,214,93,1	)",
    dashStyle: "ShortDash",
    marker: {
      enabled: false,
    },
    data: belLine.line,
  },
],

};

const options = {
global: {
useUTC: false,
},
lang: {
decimalPoint: ",",
// resetZoom: "Zurücksetzen",
thousandsSep: ".",
months: [
"Jänner",
"Februar",
"März",
"April",
"Mai",
"Juni",
"Juli",
"August",
"September",
"Oktober",
"November",
"Dezember",
],
weekdays: [
"Montag",
"Dienstag",
"Mittwoch",
"Donnerstag",
"Freitag",
"Samstag",
"Sonntag",
],
},
};

<View onStartShouldSetResponder={() => true}>
{wait === false ? (
<ChartView
style={{ height: 300, marginTop: 15 }}
config={conf}
options={options}
originWhitelist={["*"]}
useWebKit={true}
javaScriptEnabled={true}
domStorageEnabled={true}
>
) : (

)}

`

Greetings,
Armin