As the name implies, MarkerView is a MarkerView. When clicking the value on the chart, a prompt box is generally required to display the value. MPAndroidChart also provides a corresponding interface, setMarker(MarkerView). The renderings are as follows:

Here is a simple drawing, the layout can be customized:

1. Chart

The implementation of stacked bar charts can refer to my other article, MPAndroidChart implementation of stacked bar charts.

2. Customize MarkerView

public class MyMarkView extends MarkerView {
  private TextView tv1;
  private TextView tv2;

  public MyMarkView(Context context) {
    super(context, R.layout.mark_view);
    initView();
  }

  private void initView(a) {
    tv1 = findViewById(R.id.tv1);
    tv2 = findViewById(R.id.tv2);
  }

  @Override
  public void refreshContent(Entry e, Highlight highlight) {
	// Update the display data. Since it is a bar graph, it can be cast to BarEntry
    BarEntry barEntry = (BarEntry) e;
    // Get the list of Y values
    float[] values = barEntry.getYVals();

    tv1.setText(String.format(Locale.US, "Data 1: %.2f", values[0]));
    tv2.setText(String.format(Locale.US, "Data 2: %.2f", values[1]));
    super.refreshContent(e, highlight);
  }

  private MPPointF mOffset;

  @Override
  public MPPointF getOffset(a) {
  	// Set the MarkerView offset, which is the position displayed in the prompt box
    if (mOffset == null) {
      // center the marker horizontally and vertically
      mOffset = new MPPointF(-(getWidth() / 2), -getHeight());
    }

    returnmOffset; }}Copy the code

Add MarkerView

When initializing the diagram, add the following code:

    MyMarkView myMarkView = new MyMarkView(this);
    // Must be set, otherwise the MarkerView will exceed the chart
    myMarkView.setChartView(barChart);
    barChart.setMarker(myMarkView);
Copy the code

4. MarkerView display position

MarkerView display position mainly calculated in getOffsetForDrawingAtPoint approach, specific source code is as follows:

    @Override
    public MPPointF getOffsetForDrawingAtPoint(float posX, float posY) {
		// Get the offset we set
        MPPointF offset = getOffset();
        mOffset2.x = offset.x;
        mOffset2.y = offset.y;
		Chart is empty if setChartView is not called
        Chart chart = getChartView();
		// Get the width and height of the MarkerView
        float width = getWidth();
        float height = getHeight();

		// Calculate the final position
        if (posX + mOffset2.x < 0) {
            mOffset2.x = - posX;
        } else if(chart ! =null && posX + width + mOffset2.x > chart.getWidth()) {
            mOffset2.x = chart.getWidth() - posX - width;
        }

        if (posY + mOffset2.y < 0) {
            mOffset2.y = - posY;
        } else if(chart ! =null && posY + height + mOffset2.y > chart.getHeight()) {
            mOffset2.y = chart.getHeight() - posY - height;
        }

        return mOffset2;
    }

Copy the code

If you want to customize the display location, just override this method.