Highcharts Legend Selection double fires in Android WebView

Question

I have a pie chart, bar chart, and area chart in my Android app using Highcharts via a WebView. They all have legends to reduce the series as needed for the user. I noticed that selecting an item on the legend is double firing. Hence, I'm unable to remove datapoints/series from the chart since it gets removed and added back automatically. Note that I'm using Android 4.1 and HighchartsJS 3.0.1.

As a test, I pointed my WebView to load directly from the Highcharts API demo site and I am able to reproduce the issue. Does anyone have a quick fix to this issue through some javascript code that stops this "ghost" clicking?

If you want to reproduce the issue through an Android app, this is the code that I used:

DashboardActivity.java

public class DashboardActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_dashboard);
       WebView webView = (WebView)findViewById(R.id.dashboard_webview);
       webView.getSettings().setJavaScriptEnabled(true);
       webView.loadUrl("http://www.highcharts.com/demo/pie-legend");
    }
}

activity_dashboard.xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".DashboardActivity" >

<WebView 
    android:id="@+id/dashboard_webview"
    android:layout_height="fill_parent"
    android:layout_width="fill_parent" />

</RelativeLayout>

Michael Hari Michael Hari · Accepted Answer · 2013-04-24T19:17:24

I was able to solve this issue by editing the highcharts source. On line 9944, change

.on('click', function (event) {

to

.on('touchend', function (event) {

Highcharts Legend Selection double fires in Android WebView

1 Answers