Develop Reference

How to remove blurriness around pie chart when using custom colors?

I'm using MPAndroidchart pie chart and used my own colors for charts. Now the problem is the pie chart is blurred. Its edges are in blur. I want to remove the blur and make it sharp edges.How to do it?
I don't have 10 reputations to post image.
https://drive.google.com/open?id=1umms-1LZj0XuuKuDpOWZqcpRCOn6rh-X
Here is the code for chart displaying.
private void showChart(BudgetResponse.Budgets[] items) {
chart.setVisibility(View.VISIBLE);
chart.setUsePercentValues(true);
chart.getDescription().setEnabled(false);
chart.setExtraOffsets(5, 10, 5, 5);
chart.setDragDecelerationFrictionCoef(0.95f);
//chart.setCenterTextTypeface(tfLight);
//chart.setCenterText(generateCenterSpannableText());
chart.setDrawHoleEnabled(true);
chart.setHoleColor(Color.TRANSPARENT);
chart.setTransparentCircleColor(Color.WHITE);
chart.setTransparentCircleAlpha(110);
chart.setHoleRadius(58f);
chart.setTransparentCircleRadius(61f);
chart.setDrawCenterText(true);
SimpleSpanBuilder sb=new SimpleSpanBuilder();
sb.append("Total budget",new RelativeSizeSpan(1.0f));
float budget=0;
try{
for (int i=0;i<items.length;i++){
budget+=Float.parseFloat(items[i].getCurrentAmount());
}
}catch (Exception e){
e.printStackTrace();
}
sb.append("\n"+budget,new RelativeSizeSpan(2.0f),
new ForegroundColorSpan(activity.getResources().getColor(R.color.colorPrimary)));
chart.setCenterText(sb.build());
chart.setCenterTextColor(activity.getResources().getColor(R.color.titleColor));
chart.setCenterTextSizePixels(12f);
chart.setRotationAngle(0);
// enable rotation of the chart by touch
chart.setRotationEnabled(false);
chart.setHighlightPerTapEnabled(true);
chart.animateY(1400, Easing.EaseInOutQuad);
chart.getLegend().setEnabled(false);
ArrayList<PieEntry> entries = new ArrayList<>();
ArrayList<Integer> pieColors=new ArrayList<>();
for (BudgetResponse.Budgets budgets:items){
entries.add(new PieEntry(Float.parseFloat(budgets.getCurrentAmount()), budgets.getCategoryGroupName()));
if(budgets.getCategoryGroupName().contains("Bills")){
pieColors.add(getAppColor(R.color.lightViolet));
}else if(budgets.getCategoryGroupName().contains("Entertainment")){
pieColors.add(getAppColor(R.color.lightPink));
}else if(budgets.getCategoryGroupName().contains("Food")){
pieColors.add(getAppColor(R.color.lightBlue));
}else if(budgets.getCategoryGroupName().contains("Auto")){
pieColors.add(getAppColor(R.color.darkViolet));
}else if(budgets.getCategoryGroupName().contains("Shopping")){
pieColors.add(getAppColor(R.color.lightOrangeVariant));
}else if(budgets.getCategoryGroupName().contains("Transfers")){
pieColors.add(getAppColor(R.color.lightGreenVariant));
}
}
// add a lot of colors
ArrayList<Integer> colors = new ArrayList<>(pieColors);
PieDataSet dataSet = new PieDataSet(entries, "Budget Spends");
dataSet.setDrawIcons(false);
dataSet.setSliceSpace(3f);
dataSet.setIconsOffset(new MPPointF(0, 40));
dataSet.setSelectionShift(1f);
colors.add(ColorTemplate.getHoloBlue());
dataSet.setColors(colors);
//dataSet.setSelectionShift(0f);
PieData data = new PieData(dataSet);
data.setValueFormatter(new PercentFormatter(chart));
data.setValueTextSize(11f);
data.setValueTextColor(Color.TRANSPARENT);
//data.setValueTypeface(tfLight);
chart.setData(data);
//to remove labels over pie chart
chart.setDrawEntryLabels(false);
//to remove percentage over pie chart
chart.setUsePercentValues(false);
//chart.setDrawCenterText(false);
// undo all highlights
chart.highlightValues(null);
MyMarkerView mv = new MyMarkerView(activity, R.layout.custom_marker_view);
mv.setChartView(chart); // For bounds control
chart.setMarker(mv); //
chart.invalidate();
}
I want to remove blurriness around chart.
In activity the donut chat looks great. But in viewpager it looks blur.

Android MP Pie Chart how to remove text and values from Pie chart

How can i achieve this using MPAndroidChart ?
Using version : com.github.PhilJay:MPAndroidChart:v3.1.0-alpha
Adding code for Legend and piechart margin:
private void setPieChartData() {
//https://stackoverflow.com/a/50551488/1427037
pieChart.setUsePercentValues(true);
pieChart.getDescription().setEnabled(false);
pieChart.setExtraOffsets(5,5,10,5);
pieChart.setDragDecelerationFrictionCoef(0.9f);
pieChart.setDrawCenterText(false);
pieChart.setDrawHoleEnabled(false);
//pieChart.animateY(1000, Easing.EasingOption.EaseInOutCubic);
ArrayList<PieEntry> yValues = new ArrayList<>();
yValues.add(new PieEntry(34f,"Ilala"));
yValues.add(new PieEntry(56f,"Temeke"));
yValues.add(new PieEntry(66f,"Kinondoni"));
yValues.add(new PieEntry(45f,"Kigamboni"));
yValues.add(new PieEntry(45f,"Kigamboni2"));
pieChart.setDrawEntryLabels(false);
PieDataSet dataSet = new PieDataSet(yValues, "Desease Per Regions");
dataSet.setSliceSpace(0.1f);
dataSet.setDrawValues(false);
dataSet.setSelectionShift(5f);
dataSet.setColors(ColorTemplate.VORDIPLOM_COLORS);
PieData pieData = new PieData((dataSet));
pieData.setValueTextSize(10f);
pieData.setValueTextColor(Color.BLACK);
pieChart.setData(pieData);
pieChart.setDrawSliceText(false);
setLegend();
}
private void setLegend() {
Legend l = pieChart.getLegend();
l.setFormSize(10f); // set the size of the legend forms/shapes
l.setForm(Legend.LegendForm.SQUARE); // set what type of form/shape should be used
l.setYOffset(5f);
//l.setPosition(Legend.LegendPosition.RIGHT_OF_CHART);
l.setVerticalAlignment(Legend.LegendVerticalAlignment.TOP); // set vertical alignment for legend
l.setHorizontalAlignment(Legend.LegendHorizontalAlignment.RIGHT); // set horizontal alignment for legend
l.setOrientation(Legend.LegendOrientation.VERTICAL);
l.setTextSize(12f);
l.setTextColor(Color.BLACK);
//l.setXEntrySpace(5f); // set the space between the legend entries on the x-axis
l.setYEntrySpace(1f); // set the space between the legend entries on the y-axis
// set custom labels and colors
List<LegendEntry> entries = new ArrayList<>();
ArrayList<PieEntry> yValues = new ArrayList<>();
yValues.add(new PieEntry(34f,"Ilala"));
yValues.add(new PieEntry(56f,"Temeke"));
yValues.add(new PieEntry(66f,"Kinondoni"));
yValues.add(new PieEntry(45f,"Kigamboni"));
yValues.add(new PieEntry(45f,"Kigamboni2"));
for (int i = 0; i < 3; i++) {
LegendEntry entry = new LegendEntry();
entry.formColor = ColorTemplate.VORDIPLOM_COLORS[i];
entry.label = yValues.get(i).getLabel() ;
entries.add(entry);
}
l.setCustom(entries);
}
[![code result][2]][2]
How to set position of legend same as actual image i am getting problem to set its layout.please correct code and share any link for help
Please share details to resolve this problem
How to resolve this UI issue .. legend label should be on right side same as Required mock

For removing entry value & labels use method :
myPieChart.setDrawSliceText(false); // To remove slice text
myPieChart.setDrawMarkers(false); // To remove markers when click
myPieChart.setDrawEntryLabels(false); // To remove labels from piece of pie
myPieChart.getDescription().setEnabled(false); // To remove description of pie
For showing legends beside your chart try below methods :
Legend l = myPieChart.getLegend(); // get legend of pie
l.setVerticalAlignment(Legend.LegendVerticalAlignment.CENTER); // set vertical alignment for legend
l.setHorizontalAlignment(Legend.LegendHorizontalAlignment.RIGHT); // set horizontal alignment for legend
l.setOrientation(Legend.LegendOrientation.VERTICAL); // set orientation for legend
l.setDrawInside(false); // set if legend should be drawn inside or not
Check out more from here & from main doc page of MPAndroidChart.

I hope it will help!
I did it,
pieChart.setDrawCenterText(true);
pieChart.setDrawEntryLabels(true);
pieChart.setDrawMarkers(false);
pieChart.getDescription().setEnabled(false);
pieChart.getLegend().setEnabled(false);
just change to false all and you shouldn't see any text(s)!
[ sorry if i had poor English ]

MPAndroidChart - How to draw bar at bottom of line chart

I want to draw stock's history price chart with volume, similar to this:
With MPAndroidChart, I managed to get this result using CombinedChart:
Here's my code snippet:
CombinedChart mChart = (CombinedChart) findViewById(R.id.chart);
final ArrayList<BarEntry> barList = new ArrayList<>();
final ArrayList<Entry> lineList = new ArrayList<>();
// add Bar & Line data entries
.....
// bar depends on LEFT y-axis
BarDataSet barSet = new BarDataSet(barList, "");
barSet.setAxisDependency(YAxis.AxisDependency.LEFT);
BarData barData = new BarData(barSet);
// line depends on RIGHT y-axis
LineDataSet lineSet = new LineDataSet(lineList, "");
lineSet.setAxisDependency(YAxis.AxisDependency.RIGHT);
LineData lineData = new LineData(lineSet);
// set data to chart
....
float barYMax = barData.getYMax();
float lineYMin = lineData.getYMin();
// to make bar appears at bottom
YAxis leftAxis = mChart.getAxisLeft();
leftAxis.setAxisMaximum(barYMax * 10);
// to make line appears at top
YAxis rightAxis = mChart.getAxisRight();
rightAxis.setAxisMinimum(lineYMin * 0.5f);
In order to make "Line Chart" appears above "Bar Chart":
Bar chart depends on Left y-axis. To make bar appears at bottom, I make it's scale larger, with leftAxis.setAxisMaximum(barYMax * 10).
Line chart depends on Right y-axis. To shift line up, I do rightAxis.setAxisMinimum(lineYMin * 0.5f).
I wonder is there a better recommended way to achieve this effect?
With my solution, line chart may still overlap with bar partially. Ideally I wish to achieve no overlapping at all, with line appears completely on top of bar.

MPAndroidChart - First and last bars not rendering correctly

In the bar chart I am creating the first and last rows are consistently being cut in half (even if I add additional bars). This also causes the values above the bars to be out of place. I am inflating this within a fragment.
The axis are also only increasing by 0.9 instead of 1. To fix this do I need to implement the AxisValueFormatter interface?
Image:
Code:
.java
chart = (BarChart) view.findViewById(R.id.chart1);
// Chart settings
chart.setDrawGridBackground(false);
chart.setHighlightFullBarEnabled(true);
chart.setDrawBarShadow(false);
chart.setDrawValueAboveBar(true);
chart.setDescription("");
// Settings for X-Axis
XAxis xAxis = chart.getXAxis();
xAxis.setDrawGridLines(false);
xAxis.setEnabled(true);
xAxis.setDrawLabels(true);
xAxis.setPosition(XAxisPosition.BOTTOM);
// Settings for Y-Axis
YAxis leftAxis = chart.getAxisLeft();
YAxis rightAxis = chart.getAxisRight();
leftAxis.setAxisMinValue(0f);
rightAxis.setAxisMinValue(0f);
BARENTRY = new ArrayList<>();
BarEntryLabels = new ArrayList<String>();
BARENTRY.add(new BarEntry(2f, 1));
BARENTRY.add(new BarEntry(3f, 2));
BARENTRY.add(new BarEntry(4f, 3));
BARENTRY.add(new BarEntry(5f, 4));
BARENTRY.add(new BarEntry(6f, 5));
Bardataset = new BarDataSet(BARENTRY, "Projects");
Bardataset.setColors(ColorTemplate.COLORFUL_COLORS);
BARDATA = new BarData(Bardataset);
chart.setData(BARDATA);
chart.invalidate(); // refresh
chart.animateY(1500);
return view;

To answer your questions:
In order to properly show your bars you need to fit the bars, like this (don't ask me why it's not enabled by default):
chart.setFitBars(true)
You can find more information in the BarChart javadocs:
setFitBars(boolean enabled): Adds half of the bar width to each side of the x-axis range in order to allow the bars of the barchart to be fully displayed.
If you have a CombinedChart you could use setSpaceMin() and setSpaceMax() to add additional spacing on both ends of the axis:
XAxis xAxis = chart.getXAxis();
xAxis.setSpaceMin(barData.getBarWidth() / 2f);
xAxis.setSpaceMax(barData.getBarWidth() / 2f);
It is currently impossible to infuence the value positions rendered on the axis. Creating a ValueFormatter only changes the displayed text, not the actual position of the label.

Please use setAxisMinimum and setAxisMaximum, it will work perfectly!
After your BarData is instantiated, you just need
chart.getXAxis().setAxisMinimum(-data.getBarWidth() / 2);
chart.getXAxis().setAxisMaximum(count-data.getBarWidth() / 2);`
There is no need for setFitBars, and the count is BARENTRY size.

If the problem is with the first bar only, you can use negative values for the axis minimum:
xAxis.setAxisMinimum(-0.5f);
Like in the answer to this question here:

i just fixed it,settings the x range min, using
barChart.setFitBars(true);
barChart.setVisibleXRangeMinimum(barEntries.size());

How to hide legends and axis in MPAndroidChart?

Is their any possibility to hide all rounded items from this picture.
I have used the following code,
public void setDataList(List<HorizontalBarChartData> dataList, Resources resources) {
ArrayList<String> categories = new ArrayList<String>();
ArrayList<BarEntry> values = new ArrayList<BarEntry>();
ArrayList<BarDataSet> dataSets = new ArrayList<BarDataSet>();
BarDataSet set1;
for (int i = 0; i < dataList.size(); i++) {
categories.add(dataList.get(i).getName());
values.add(new BarEntry(dataList.get(i).getValue(), i));
}
/*set1 = new BarDataSet(values, "Income, Expense, Disposable Income");*/
set1 = new BarDataSet(values, "Category 1, Category 2, Category 3");
set1.setBarSpacePercent(35f);
set1.setColors(new int[]{resources.getColor(R.color.cyan_blue), resources.getColor(R.color.vermilion_tint), resources.getColor(R.color.sea_green)});
dataSets.add(set1);
BarData data = new BarData(categories, dataSets);
data.setValueTextSize(10f);
horizontalBarChart.setData(data);
}
Update
How to hide rounded part from this image?

Yes, is possible, just using following code:
mChart.setDescription(""); // Hide the description
mChart.getAxisLeft().setDrawLabels(false);
mChart.getAxisRight().setDrawLabels(false);
mChart.getXAxis().setDrawLabels(false);
mChart.getLegend().setEnabled(false); // Hide the legend

As per this answer
mChart.getXAxis().setDrawLabels(false); will hide the entire X-Axis(as required for this question).
For positioning the X-Axis, following code works.
XAxis xAxis = mChart.getXAxis();
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
Position can be set to
BOTTOM
BOTH_SIDED
BOTTOM_INSIDE
TOP
TOP_INSIDE
This helps if you are trying to hide only the particular side axis instead of hiding the entire axis.

It appears mChart.setDescription() no longer accepts a String.
The method now accepts an instance of the Description Class like this:
mChart.setDescription(Description description)
So to modify or delete the Chart Description you may do it like below
Description description = new Description();
description.setText("");
mChart.setDescription(description);

Following code work for all chart
Legend l = mchart.getLegend();
l.setEnabled(false);.

To hide description, use this
mChart.getDescription().setEnabled(false)

Below code works for PieChart. Try to get same method for your Chart.
Legend l = mChart.getLegend();
l.setPosition(LegendPosition.NONE);

chart=(LineChart) findViewById(R.id.Chart);
chart.getLegend().setEnabled(false); // for hiding square on below graph

Kotlin solution for MPAndroidChart:v3.1.0
chart.description.isEnabled = false // hide the description
chart.legend.isEnabled = false // hide the legend
chart.xAxis.setDrawLabels(false) // hide bottom label
chart.axisLeft.setDrawLabels(false) // hide left label
chart.axisRight.setDrawLabels(false) // hide right label

I had the problem, that the bottom xAxis Labels are cutted off when I used mChart.getLegend().setEnabled(false)
Now I use chart.getLegend().setForm(Legend.LegendForm.NONE); instead and the labels are not cutted of anymore