Custom Bubble Marker for MpCharts ~ Android

No doubt MPAndroidChart library is filled with features for creating complex charts & graphs and is highly customizable, but recently I had to design a custom marker that needed to be displayed over a combined chart (line chart & bar chart).

Design that needed to be implemented

Unfortunately, all the examples that the MP Charts library provides use a static background image for a marker.

Meanwhile, the marker I needed had to be dynamic which could change its pointer position in all 4 directions and could adjust its X-Y position based on the user's touch.

Solution

I extended MarkerView class provided by the mpChart library and created my own implementation of the required marker design. where I change the marker offset based on the user’s touch within the boundaries of the chart view. To draw and change the pointer position of the marker i used Anroid’s canvas and paint classes/properties.

To change the marker position we need to override the getOffsetForDrawingAtPoint() function of MarkerView class.

Here is the gist of it

To draw the marker view itself we need to override the draw() method provided by Android on classes that have a view life-cycle, here is the gist of it.

You can play around with the constants I have used in this code like arrowSize & arrowCircleOffset to fit your own design needs.

For the marker layout itself though I had to apply a circular background of common color here is its full XML gist file.

and the background file gist, which is nothing but a simple shape file.

And the code to attach to the custom marker with the mpChart marker, which in this case is combinedChart as a reference

Here is the full custom maker file & a GIF example of the working code.