Using MPAndroidChart for Android Application — BarChart

MPAndroidChart is powerful in drawing chart for android application. This article is going to go through the procedures with you on how to apply MPAndroidChart to draw a bar chart.

Version

• Android Studio 4.0.1
• MPAndroidChart 3.0.3

Notes that there exist syntax differences bewteen MPAndroidChart version 3 and version 2.

Preparation

1. Import the MPAndroidChart to the project.

Find the build.gradle file in Gradle Scripts folder and insert the code below. (Choose the build.gradle with remark (Module: app))

repositories {
    maven { url "https://jitpack.io" }
}
dependencies {
    implementation 'com.github.PhilJay:MPAndroidChart:v3.0.3'
}

2. Declare the BarChart view in the layout xml

<com.github.mikephil.charting.charts.BarChart
android:id="@+id/barChart_view"/>

Procedures Detail

1. Navigating to the java file of the activity.
2. Declaring barChart as global variable

BarChart barChart;

3. Use findViewById to get the view of the BarChart in the layout xml

barChart = findViewById(R.id.barChart_view);

4. Defining showBarChart() function

showBarChart() is a function responsible for capturing data input and output the bar chart with the data.

private void showBarChart(){
    ArrayList<Double> valueList = new ArrayList<Double>();
    ArrayList<BarEntry> entries = new ArrayList<>();
    String title = "Title";

    //input data
    for(int i = 0; i < 6; i++){
        valueList.add(i * 100.1);
    }

    //fit the data into a bar
    for (int i = 0; i < valueList.size(); i++) {
        BarEntry barEntry = new BarEntry(i, valueList.get(i).floatValue());
        entries.add(barEntry);
    }

    BarDataSet barDataSet = new BarDataSet(entries, title);

    BarData data = new BarData(barDataSet);
    barChart.setData(data);
    barChart.invalidate();
}

Bar chart created so far

This is the bar chart we created so far. The outlook is very simple as we have not set anything about it.

Here we separate the outlook into 2 parts, one for the bar chart and another for the bar itself.

5. Defining initBarDataSet() function

initBarDataSet() is a function responsible for the outlook of the bar.

private void initBarDataSet(BarDataSet barDataSet){
    //Changing the color of the bar
    barDataSet.setColor(Color.parseColor("#304567"));
    //Setting the size of the form in the legend
    barDataSet.setFormSize(15f);
    //showing the value of the bar, default true if not set
    barDataSet.setDrawValues(false);
    //setting the text size of the value of the bar
    barDataSet.setValueTextSize(12f);
}

In this function, we are trying to set the outlook of the bar data set.

Point to Note

• Use ContextCompat.getColor() if the color is stored in xml

barDataSet.setColor( ContextCompat.getColor(this, R.color.savedColor));

• Nothing change on the appearance with setValueTextSize() as we have hidden the value by setDrawValues(false)

Call the initBarDataSet() function after the barDataSet is initialized in the showBarChart() function.

initalBarDataSet(barDataSet);

This is the bar chart we created so far. The color of the bar is changed successfully with its value hidden.

In the next part, we will try to amend the appearance of the whole bar chart and adding animation to the bar chart.

6. Defining initBarChart() function

initBarChart() is a function responsible for the appearance of the bar chart which should be called before calling showBarChart().

private void initBarChart(){
 //hiding the grey background of the chart, default false if not set
    barChart.setDrawGridBackground(false);
    //remove the bar shadow, default false if not set
    barChart.setDrawBarShadow(false);
    //remove border of the chart, default false if not set
    barChart.setDrawBorders(false);

 //remove the description label text located at the lower right corner
    Description description = new Description();
    description.setEnabled(false);
    barChart.setDescription(description);

    //setting animation for y-axis, the bar will pop up from 0 to its value within the time we set
    barChart.animateY(1000);
    //setting animation for x-axis, the bar will pop up separately within the time we set
    barChart.animateX(1000);

    XAxis xAxis = barChart.getXAxis();
    //change the position of x-axis to the bottom
    xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
    //set the horizontal distance of the grid line
    xAxis.setGranularity(1f);
    //hiding the x-axis line, default true if not set
    xAxis.setDrawAxisLine(false);
    //hiding the vertical grid lines, default true if not set
    xAxis.setDrawGridLines(false);

    YAxis leftAxis = barChart.getAxisLeft();
    //hiding the left y-axis line, default true if not set
    leftAxis.setDrawAxisLine(false);

    YAxis rightAxis = barChart.getAxisRight();
    //hiding the right y-axis line, default true if not set
    rightAxis.setDrawAxisLine(false);

    Legend legend = barChart.getLegend();
    //setting the shape of the legend form to line, default square shape
    legend.setForm(Legend.LegendForm.LINE);
    //setting the text size of the legend
    legend.setTextSize(11f);
    //setting the alignment of legend toward the chart
    legend.setVerticalAlignment(Legend.LegendVerticalAlignment.BOTTOM);
    legend.setHorizontalAlignment(Legend.LegendHorizontalAlignment.LEFT);
    //setting the stacking direction of legend
    legend.setOrientation(Legend.LegendOrientation.HORIZONTAL);
    //setting the location of legend outside the chart, default false if not set
    legend.setDrawInside(false);

}

Point to Note

• difference between border line and axis line

Although border line and axis line have the same location in the chart, color of border line is black and that of axis line is in grey. Moreover, the border line will cover the axis line.

• trigger event when click on the bar

Setting a listener for the bar

barChart.setOnChartValueSelectedListener(new barChartOnChartValueSelectedListener());

with barChartOnChartValueSelectedListener() defined as follow:

private class barChartOnChartValueSelectedListener implements OnChartValueSelectedListener{

    @Override
    public void onValueSelected(Entry e, Highlight h) {
        //trigger activity when the bar value is selected

    }

    @Override
    public void onNothingSelected() {

    }
}

Here is the final view of the bar chart.

Conclusion

In this article, we have go through how to apply the MPAndroidChart to our android application to show a bar chart. A lot of functions are introduced which some of them may not be suitable for creating you own bar chart so apply them with care and refer to the documentation from time to time.

Hope you enjoy this short journey with me:)