How to add background to MPAndroidCharts xAxis labels?
I didn't want to mess with the Library, so I had to extend several classes and override several methods to meet my requirements. I did the following:
extend XAxis class and override:
private int mXAxisLabelBackgroundColor = Color.argb(200, 140, 234, 255);
/**
* boolen used to enable or disable label background, default is enabled
*/
private boolean mEnableLabelBackground = false;
public CustomXAxis(){
super();
}
public void setLabelBackgroundColor(int color){
mXAxisLabelBackgroundColor = color;
}
public void setLabelBackgroundColor(String colorHex){
mXAxisLabelBackgroundColor = Color.parseColor(colorHex);
}
public int getXAxisLabelBackgroundColor(){
return mXAxisLabelBackgroundColor;
}
/**
* Enable/disable X Axis label background, default is disabled.
* @param enable
*/
public void setDrawLabelBackground(boolean enable){
mEnableLabelBackground = enable;
}
/**
*
* @return boolean true if drawing label background is enabled otherwise false
*/
public boolean isDrawLabelBackgroundEnabled(){
return mEnableLabelBackground;
}
Extend XAxisRenderer and override drawLabels (Canvas c, float pos). Draw a rectangle just before drawing the labels.
if (((CustomXAxis)mXAxis).isDrawLabelBackgroundEnabled()) {
drawLabelBackground(c);
}
Extend YAxis and just add an accessor and mutator to set the Yaxis shortcut above or below the grid line.
private float mYLabelPosition = 0f;
public CustomYAxisRight(){
super(AxisDependency.RIGHT);
}
/**
* Sets the label position above or below the gridline.
* <p>use negative number to set label position above gridline.</p>
* @param position
*/
public void setYLabelPosition(float position){
mYLabelPosition = position;
}
public float getYLabelPosition(){
return mYLabelPosition;
}
Extend YAxisRenderer and override drawYLabels (Canvas c, float fixedPosition, float [] position, float offset)
c.drawText(text, fixedPosition, positions[i * 2 + 1] + (offset+((CustomYAxisRight)mYAxis).getYLabelPosition()), mAxisLabelPaint);
I also wanted to show a gridline for the y-axis label of 0 when the chart starts at 0.
Override renderGridlines (Canvas c) and draw the line before drawing other lines.
if (mYAxis.isStartAtZeroEnabled()) {
mTrans.pointValuesToPixel(position);
gridLinePath.moveTo(mViewPortHandler.offsetLeft(), mViewPortHandler.contentBottom() - 1f);
gridLinePath.lineTo(mViewPortHandler.contentRight(), mViewPortHandler.contentBottom() - 1f);
// draw a path because lines don't support dashing on lower android versions
c.drawPath(gridLinePath, mGridPaint);
gridLinePath.reset();
}
Finally, continue with LineChart and override:
@Override
protected void init() {
super.init();
mAxisRight = new CustomYAxisRight();
mXAxis = new CustomXAxis();
mAxisRendererRight = new CustomYAxisRenderer(mViewPortHandler,mAxisRight,mRightAxisTransformer);
mXAxisRenderer = new CustomXAxisRenderer(mViewPortHandler, mXAxis, mLeftAxisTransformer);
}
@Override
public void setViewPortOffsets(final float left, final float top, final float right, final float bottom) {
mCustomViewPortEnabled = true;
if (((CustomXAxis)mXAxis).isDrawLabelBackgroundEnabled()){
if (bottom == 0){
//we have to leave a space for the labels to draw
_bottomOffset = 80f;
}
}
post(new Runnable() {
@Override
public void run() {
mViewPortHandler.restrainViewPort(left, top, right, _bottomOffset);
prepareOffsetMatrix();
prepareValuePxMatrix();
}
});
}
source to share
I may have also been working on changing the background color of the X-Axis label, there is no direct API for this, but I did so.
- Step 1:
XAxisRenderer
class firstXAxisRenderer
and overridedrawLabels()
. - Step 2: In
drawLabels()
add the below code beforedrawLabel(c, label, x, pos, anchor, labelRotationAngleDegrees)
.
if (i == 0) {
Paint rectPaint = new Paint();
rectPaint.setColor(context.getResources().getColor(R.color.vitaskin_skin_history_background_color));
rectPaint.setStyle(Paint.Style.FILL);
c.drawRect(0, (int) mViewPortHandler.contentBottom(), mViewPortHandler.getChartWidth(), mViewPortHandler.getChartHeight(), rectPaint);
}
source to share