I'm using MPChartlib for a basic "Barchart" (3 bars and values between 0 and 100).
the background of the app is dark so I'd like to put the text in white but when I set the text with color code "FFFFFF" in chart_color stored in string.xml but the text appear in dark blue.
//Axe X
XAxis x = barchart.getXAxis();
x.setPosition(XAxisPosition.BOTTOM);
x.setTextColor(R.color.chart_color);
x.setAxisLineColor(R.color.chart_color);
// Design
barchart.setDragEnabled(false);
barchart.setDrawGridBackground(false);
barchart.setTouchEnabled(false);
barchart.setHighlightEnabled(false);
barchart.setMaxVisibleValueCount(101);
barchart.setDescription(null);
barchart.setGridBackgroundColor(R.color.chart_color);
barchart.invalidate(); // refresh
//Axe Y
barchart.getAxisLeft().setAxisMaxValue(100);
barchart.getAxisLeft().setDrawTopYLabelEntry(true);
barchart.getAxisLeft().setDrawAxisLine(false);
barchart.getAxisLeft().setDrawGridLines(false);
barchart.getAxisLeft().setAxisLineColor(R.color.chart_color);
barchart.getAxisLeft().setTextColor(R.color.chart_color);
barchart.getAxisRight().setAxisMaxValue(100);
barchart.getAxisRight().setDrawTopYLabelEntry(true);
barchart.getAxisRight().setAxisLineColor(R.color.chart_color);
barchart.getAxisRight().setTextColor(R.color.chart_color);
I tried lots of things and research but couldn't find the issue, does the lib doesn't use the same kind of color code or something ?
Thanks for your help,
Alex
You are passing the resource id to the library, not the actual color.
Use this to get the color:
int color = ContextCompat.getColor(context, R.color.chart_color);
LineDataSet dataSet = ...;
dataSet.setColor(color);
You can also find this in the documentation.
if you want change bars color prefer pass context as well like example below
ArrayList<BarEntry> entries = new ArrayList<>();
entries.add(new BarEntry(87f, 0));
entries.add(new BarEntry(90f, 1));
ArrayList<String> labels = new ArrayList<>();
labels.add("title 1");
labels.add("title 2);
BarDataSet dataSet = new BarDataSet(entries, "# of Calls ");
BarData barData = new BarData(labels, dataSet);
dataSet.setColors(new int[]{R.color.color1 , R.color.color2} , context);
barChart.setData(barData);
barChart.animateY(3000 , Easing.EasingOption.EaseOutBack );
Related
I'm trying to put a radar chart in my Android application using MPAndroidChart library.
I've seen this very similar question and tried that approach but it didn't work for me
Here's my code
RadarChart chart = findViewById(R.id.activity_family_member_detail_chart);
Drawable iconTotalEarnedPoints = getDrawable(R.drawable.ic_star_border);
Drawable iconEarnedMoney = getDrawable(R.drawable.ic_attach_money);
Drawable iconTextPosts = getDrawable(R.drawable.ic_message);
Drawable iconImagePosts = getDrawable(R.drawable.ic_photo_size_select_actual);
Drawable iconAudioPosts = getDrawable(R.drawable.ic_audiotrack);
List<RadarEntry> entries = new ArrayList<>();
entries.add(new RadarEntry(member.getTotalEarnedPoints(), iconTotalEarnedPoints));
entries.add(new RadarEntry(member.getEarnedMoney(), iconEarnedMoney));
entries.add(new RadarEntry(member.getTextPosts(), iconTextPosts));
entries.add(new RadarEntry(member.getImagePosts(), iconImagePosts));
entries.add(new RadarEntry(member.getAudioPosts(), iconAudioPosts ));
RadarDataSet radarDataSet = new RadarDataSet(entries, "");
RadarData radarData = new RadarData(radarDataSet);
chart.setData(radarData);
chart.getLegend().setEnabled(false);
chart.getDescription().setEnabled(false);
chart.getYAxis().setEnabled(false);
chart.animateXY(1000, 1000);
chart.invalidate();
What i am getting as a result is a radar that shows the correct values, but the labels are numbers (from 0 to 4) while instead of numbers i would like to have the specified drawables, how can i achieve that?
I am working on MPAndroid chart library where I am displaying single bar religion values using bar graph. I want to give a color to each BarEntry as per religion name like "Islam" = green, "Christianity" = Blue etc. I have searched many examples on this forum but not able to solve this.
List<BarEntry> entries = new ArrayList<>();
entries.add(new BarEntry(0f, 20,"Islam"));
entries.add(new BarEntry(1f, 20,"Christianity"));
entries.add(new BarEntry(2f, 20,"Judaism"));
entries.add(new BarEntry(3f,20,"Sikhism"));
entries.add(new BarEntry(4f,20,"Hinduism"));
BarDataSet bSet = new BarDataSet(entries, "Marks");
bSet.setColors(ColorTemplate.VORDIPLOM_COLORS);
ArrayList<String> barFactors = new ArrayList<>();
barFactors.add("Islam");
barFactors.add("Christianity");
barFactors.add("Judaism");
barFactors.add("Sikhism");
barFactors.add("Hinduism");
XAxis xAxis = chart.getXAxis();
xAxis.setGranularity(1f);
xAxis.setGranularityEnabled(true);
BarData data = new BarData(bSet);
data.setBarWidth(1f); // set custom bar width
data.setValueTextSize(12);
Description description = new Description();
description.setTextColor(R.color.colorPrimary);
description.setText("Religion analysis");
chart.setDescription(description);
chart.setData(data);
chart.setFitBars(true); // make the x-axis fit exactly all bars
chart.invalidate(); // refresh
chart.getXAxis().setValueFormatter(new IndexAxisValueFormatter(barFactors));
I am using this library link:
implementation 'com.github.PhilJay:MPAndroidChart:v3.0.3'
I want bar colors like bottom colors in this picture. How can I solve this issue?
You need to define colors in your colors.xml file as follow:
<color name="Islam">#1abc9c</color>
<color name="Christianity">#2ecc71</color>
<color name="Judaism">#3498db</color>
<color name="Sikhism">#9b59b6</color>
<color name="Hinduism">#16a085</color>
Also provide your respective color codes in above code.
After that you need to tell bardataset about these colors as follow:
barDataSet.setColors(new int[]
{
R.color.Islam, R.color.Christianity, R.color.Judaism,
R.color.Sikhism, R.color.Hinduism
}, getContext());
This will do the job just give the order of colors in an order in which you are giving values to bar dataset.
I want to set a specific color for a bar in BarChart from MPAndroidChart. I do everything according to a documentation, but the color isn't changing.
Here's my code:
barChart = (BarChart) findViewById(R.id.bar_chart);
List<BarEntry> entries = new ArrayList<BarEntry>();
entries.add(new BarEntry(1.0f, 10.0f)); //tmp values
BarDataSet dataSet = new BarDataSet(entries, "bars");
dataSet.setColor(R.color.red); //color from resourses
BarData barData = new BarData(dataSet);
barChart.setData(barData);
barChart.invalidate();
The funny thing is that before I tried to change the color of the bar, the bar was blue, after I tried to change its color, it became grey (no matter, what color it must be). I don't understand why doesn't the color change.
I also tried to override getColor method in the BarDataSet class, but result is the same -- bar is grey.
Change this line,
dataSet.setColor(R.color.red); //resource id of a color
to,
dataSet.setColor(getResources().getColor(R.color.red)); //resolved color
When you call setColor you need to pass in an integer that represents an RGB triple. R.color.red is not an RGB triple but instead an integer that represents a resource in R.java.
See this question for more about the difference between a resource id and a resolved color.
BarDataSet dataSet = new BarDataSet(entries, "bars");
dataSet.setColors(ColorTemplate.MATERIAL_COLORS);
If you want to set color, you can create and array of color. Then set that array to Bardataset.
Example is given Below.
int[] colors = {Color.rgb(153, 193, 12), Color.rgb(179, 130, 76)};
Bardataset.setColors(colors);
I think you should write Your code in this sequence.
Take a look below :
BarDataSet dataSet = new BarDataSet(entries, "bars");
dataSet.setColor(Color.parseColor("#104E78"));
BarData barData = new BarData(dataSet);
Try it.
We can change color this way.
bardataset.setColors(new int[]{getResources().getColor(R.color.red)});
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());
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