Can't properly click/touch on nodes

[JonathanRufino]

I'm having trouble to trigger tooltip, as you can see from gif below, the center of touch must hit the mark to trigger the event.

There is any way to increase the touch area? Or anything similar?

Example

I have provided an expo app sample to demonstrate the problem

https://expo.io/@jonathanrufino/echarts-touch-sample

Source Code: https://github.com/JonathanRufino/echarts-touch-sample

App.js

import React from 'react'
import { StyleSheet, View } from 'react-native'
import Echarts from 'native-echarts'

import data from './data.json'

export default class App extends React.Component {
  render() {
    const temperatures = data.temperatures
    const temperatureRanges = data.temperatureRanges

    const option = {
      grid: {
          top: 36,
          bottom: 36,
      },
      tooltip: {
          show: true,
          trigger: 'item',
          triggerOn: 'mousemove|click',
          formatter: function (params, ticket, callback) {
              if (params.data[1] === undefined) {
                  return null
              }
              const date = new Date(params.data[0])
              const time = date.toLocaleString('pt-BR', {
                hour: 'numeric', minute: 'numeric', hour12: true
              })
              const temperature = params.data[1]
              return `${temperature}&#176;C<br />${time}`
          }
      },
      xAxis: {
          type: 'time',
          name: 'h',
          nameLocation: 'end',
          min: null,
          max: null,
          splitNumber: 6,
          axisLabel: {
              formatter: function (value, index) {
                  return new Date(value).getHours()
              },
          }
      },
      yAxis: {
          type: 'value',
          name: '°C',
          nameLocation: 'end',
      },
      series: [
          {
              name: 'warning',
              type: 'line',
              smooth: true,
              lineStyle: {
                  color: '#1F80A9',
              },
              itemStyle: {
                  color: '#1F80A9',
              },
              symbol: 'circle',
              symbolSize: 6,
              markArea: {
                  itemStyle: {
                      normal: {
                          color: 'rgba(252, 243, 207, 0.75)',
                      },
                  },
                  data: temperatureRanges.warning,
              },
          },
          {
              name: 'good',
              type: 'line',
              smooth: true,
              lineStyle: {
                  color: '#1F80A9',
              },
              itemStyle: {
                  color: '#1F80A9',
              },
              symbol: 'circle',
              symbolSize: 6,
              markArea: {
                  itemStyle: {
                      normal: {
                          color: 'rgba(213, 245, 227, 0.75)',
                      },
                  },
                  data: temperatureRanges.good,
              },
          },
          {
              name: 'Temperatura',
              data: temperatures.reverse(),
              showAllSymbol: 'auto',
              type: 'line',
              smooth: true,
              lineStyle: {
                  color: '#1F80A9',
              },
              itemStyle: {
                  color: '#1F80A9',
              },
              symbol: 'circle',
              symbolSize: 8,
              markArea: {
                  itemStyle: {
                      normal: {
                          color: 'rgba(250, 219, 216, 0.75)',
                      },
                  },
                  data: temperatureRanges.danger,
              },
          },
      ],
    }

    return (
      <View style={styles.container}>
        <Echarts option={option} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
})

data.json

{
  "temperatures": [
    [
      "2019-01-29T09:58:12",
      -17.62
    ],
    [
      "2019-01-29T09:35:33",
      -16.59
    ],
    [
      "2019-01-29T09:25:07",
      -14.98
    ],
    [
      "2019-01-29T09:24:51",
      -14.98
    ],
    [
      "2019-01-29T09:14:07",
      -13.1
    ],
    [
      "2019-01-29T09:03:41",
      -16.81
    ],
    [
      "2019-01-29T08:53:16",
      -15.09
    ],
    [
      "2019-01-29T08:44:51",
      -16.27
    ],
    [
      "2019-01-29T08:38:30",
      -17.48
    ],
    [
      "2019-01-29T08:28:07",
      -16.35
    ],
    [
      "2019-01-29T08:17:38",
      -15.01
    ],
    [
      "2019-01-29T08:08:13",
      -16.4
    ],
    [
      "2019-01-29T07:53:43",
      -18.17
    ],
    [
      "2019-01-29T07:02:39",
      -18.38
    ],
    [
      "2019-01-29T06:52:13",
      -17.1
    ],
    [
      "2019-01-29T06:41:47",
      -14.7
    ],
    [
      "2019-01-29T06:31:22",
      -10.52
    ],
    [
      "2019-01-29T06:25:00",
      -11.67
    ],
    [
      "2019-01-29T06:14:34",
      -15.26
    ],
    [
      "2019-01-29T06:04:09",
      -17.29
    ],
    [
      "2019-01-29T05:52:42",
      -18.43
    ],
    [
      "2019-01-29T05:01:36",
      -18.02
    ],
    [
      "2019-01-29T04:10:32",
      -18.29
    ]
  ],
  "temperatureRanges": {
    "danger": [
      [
        {
          "yAxis": -23
        },
        {
          "yAxis": -100
        }
      ],
      [
        {
          "yAxis": 100
        },
        {
          "yAxis": -18
        }
      ]
    ],
    "good": [
      [
        {
          "yAxis": -19
        },
        {
          "yAxis": -22
        }
      ]
    ],
    "warning": [
      [
        {
          "yAxis": -22
        },
        {
          "yAxis": -23
        }
      ],
      [
        {
          "yAxis": -18
        },
        {
          "yAxis": -19
        }
      ]
    ]
  }
}