Tooltip not showing on Android but on iOS it does.

[saasjesus]

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} ></ChartView> ) : ( <LoadingBox /> )} </View> `

Greetings, Armin