Show value when tapped [MPAndroidChart]

Question

I`ve been looking for a way to enable the MPAndroidChart to only display the value(label) of data point when clicked. But It seems that I could not find it online even in the documentation.

I used the line chart and what I want is to only display the label of the certain point when clicked.

Nawab

Answer 1

1- Enable touch in the chart

chart.setTouchEnabled(true);

2 - Create MarkerView

public class CustomMarkerView extends MarkerView {

    private TextView tvContent;
    public CustomMarkerView (Context context, int layoutResource) {
        super(context, layoutResource);
        // this markerview only displays a textview
        tvContent = (TextView) findViewById(R.id.tvContent);
    }

    // callbacks everytime the MarkerView is redrawn, can be used to update the
    // content (user-interface)
    @Override
    public void refreshContent(Entry e, Highlight highlight) {
        tvContent.setText("" + e.getVal()); // set the entry-value as the display text
    }

    @Override
    public int getXOffset() {
        // this will center the marker-view horizontally
        return -(getWidth() / 2);
    }

    @Override
    public int getYOffset() {
        // this will cause the marker-view to be above the selected value
        return -getHeight();
    }
}

3 - Create the tvContent view

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="40dp"
    android:background="@drawable/markerImage" >

    <TextView
        android:id="@+id/tvContent"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="7dp"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:text=""
        android:textSize="12dp"
        android:textColor="@android:color/white"
        android:ellipsize="end"
        android:singleLine="true"
        android:textAppearance="?android:attr/textAppearanceSmall" />

</RelativeLayout>

4. Set the view Marker in the chart

CustomMarkerView mv = new CustomMarkerView (Context, R.layout.custom_marker_view_layout);
chart.setMarkerView(mv);

https://github.com/PhilJay/MPAndroidChart/wiki/MarkerView

Onionskin

Thank you very much! It worked for me after some changes which I got from the answer below. – Scherman

Answer 2

Use IMarker Interface (MarkerView has been deprecated since release 3.0.0)

1. Create a new class that implements the IMarker interface

public class YourMarkerView extends MarkerView {

private TextView tvContent;

public MyMarkerView(Context context, int layoutResource) {
    super(context, layoutResource);

    // find your layout components
    tvContent = (TextView) findViewById(R.id.tvContent);
}

// callbacks everytime the MarkerView is redrawn, can be used to update the
// content (user-interface)
@Override
public void refreshContent(Entry e, Highlight highlight) {

    tvContent.setText("" + e.getY());

    // this will perform necessary layouting
    super.refreshContent(e, highlight);
}

private MPPointF mOffset; 

@Override
public MPPointF getOffset() {

    if(mOffset == null) {
       // center the marker horizontally and vertically
       mOffset = new MPPointF(-(getWidth() / 2), -getHeight());
    }

    return mOffset;
}}

2. set your marker to the chart

IMarker marker = new YourMarkerView();
chart.setMarker(marker);

Reference: https://github.com/PhilJay/MPAndroidChart/wiki/IMarker-Interface

Entrust

Hi , Is it possible to set change background color of text in refreshContent ? – Meld

Answer 3

Example in Kotlin for future you:

Define marker layout i.e. gold_marker_layout

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <TextView
        android:id="@+id/tvContent"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:text="6828.1465"
        android:textSize="12sp"
        android:textColor="@android:color/white"
        android:ellipsize="end"
        android:singleLine="true"
        android:textAppearance="?android:attr/textAppearanceSmall"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Quick note: I set the initial text to 6828.1465 because that's my max-width text - watch out here.

If you don't need getXOffset and getYOffset you can assign marker like that:

lineChart.marker = object : MarkerView(context, R.layout.gold_marker_layout) {
    override fun refreshContent(e: Entry, highlight: Highlight) {
        (findViewById<View>(R.id.tvContent) as TextView).text = "${e.y}"
        }
    }

That's it, you should be good to go

Michal