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());
Related
I have download MPAndroidChart Example in order to make some changes so I decide to change
ListViewMultiChartActivity and in LineChartItem I add upper/lower limit and run applications and it is working but when I scroll down, in linechart is added other upper/lower limits that I do not create and it is strange. I added some image and a code
I am using Android Studio and Android 8.0 API 26 and mpandroidchart 3.1.0-alpha
That only happen when I scroll down faster but If I scroll slower it is not happen. The problem that I see is that upper/lower limit are belong to other line graph and in one graph is overlaping.
https://user-images.githubusercontent.com/34872326/50542025-3ede8280-0b80-11e9-9463-1153a26caa0d.jpg
https://user-images.githubusercontent.com/34872326/50542022-3e45ec00-0b80-11e9-9c75-d9f15634bac4.jpg
holder.chart.getDescription().setEnabled(false);
holder.chart.setDrawGridBackground(false);
XAxis xAxis = holder.chart.getXAxis();
xAxis.setPosition(XAxisPosition.BOTTOM);
xAxis.setTypeface(mTf);
xAxis.setDrawGridLines(false);
xAxis.setDrawAxisLine(true);
YAxis leftAxis = holder.chart.getAxisLeft();
leftAxis.setTypeface(mTf);
leftAxis.setLabelCount(5, false);
leftAxis.setAxisMinimum(0f); // this replaces setStartAtZero(true)
YAxis rightAxis = holder.chart.getAxisRight();
rightAxis.setTypeface(mTf);
rightAxis.setLabelCount(5, false);
rightAxis.setDrawGridLines(false);
rightAxis.setAxisMinimum(0f); // this replaces setStartAtZero(true)
LimitLine upper_limit = new LimitLine(mChartData.getYMax(), "Max Value");
upper_limit.setLineWidth(2f);
upper_limit.enableDashedLine(10f, 10f, 0f);
upper_limit.setLabelPosition(LimitLine.LimitLabelPosition.RIGHT_TOP);
upper_limit.setTextSize(10f);
LimitLine lower_limit = new LimitLine(mChartData.getYMin(), "Min Value");
lower_limit.setLineWidth(2f);
lower_limit.enableDashedLine(10f, 10f, 0f);
lower_limit.setLabelPosition(LimitLine.LimitLabelPosition.RIGHT_BOTTOM);
lower_limit.setTextSize(10f);
leftAxis.addLimitLine(upper_limit);
leftAxis.addLimitLine(lower_limit);
leftAxis.setDrawLimitLinesBehindData(true);
// set data
holder.chart.setData((LineData) mChartData);
// do not forget to refresh the chart
// holder.chart.invalidate();
holder.chart.animateX(750);
return convertView;
I found the anwser. I need to put leftAxis.removeAllLimitLines(); before to add a limit because that line code prevent to have limit overlaping –
I am new to using the MPAndroid LineChart. I have a simple code and have produced a graph as shown below:
However, on this, I want to do the following:
1) To match the XAxis labels with the vertical grid lines, so that the grid lines also pass through the blue dots; AND
2) To show the XAxis value on the blue dots. By default, the YAxis values can be shown - I know how to do this; currently I have disabled this, and it is not shown in the picture below, but if I were to show enable them, then, they will be 0.0, 2.0, 4.0, 6.0 and 8.0 on the 5 blue dots. What I want is to show the XAxis values instead.
Could you please suggest a way? Many thanks.
I'm not sure. but its work for me.
XAxis xAxis = chart.getXAxis();
xAxis.setPosition(XAxisPosition.BOTTOM);
xAxis.setTextSize(10f);
xAxis.setTextColor(Color.RED);
xAxis.setDrawAxisLine(true);
xAxis.setDrawGridLines(false);
For dynamic XAxis label,
xAxis.setValueFormatter(new IndexAxisValueFormatter(getAreaCount));
public ArrayList<String> getAreaCount() {
ArrayList<String> label = new ArrayList<>();
for (int i = 0; i < yourList.size(); i++)
label.add(yourList.get(i).getTopicName());
return label;
}
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.
I am using MPAndroidChart.
How to change the BarEntryLabels in to left in HorizontalBarChart?vHow to remove that projects from its bottom?
How to disable zoom ?
While clicking on to particular bar colour is changing how to disable it?
IN BarChart there i have added 6 months but EntryLabels is not properly aligned to corresponding bar.
Code:
BARENTRY = new ArrayList<>();
BarEntryLabels = new ArrayList<String>();
AddValuesToBARENTRY();
AddValuesToBarEntryLabels();
Bardataset = new BarDataSet(BARENTRY, "Projects");
BARDATA = new BarData(BarEntryLabels, Bardataset);
Bardataset.setColors(new int[]{Color.parseColor("#701112")});
horizontalBarChart.setData(BARDATA);
horizontalBarChart.setDrawBarShadow(false);
horizontalBarChart.setDrawValueAboveBar(true);
// if more than 60 entries are displayed in the chart, no values will be
// drawn
horizontalBarChart.setMaxVisibleValueCount(60);
// scaling can now only be done on x- and y-axis separately
horizontalBarChart.setPinchZoom(false);
// draw shadows for each bar that show the maximum value
// mChart.setDrawBarShadow(true);
horizontalBarChart.setDrawGridBackground(false);
horizontalBarChart.setDescription("");
Bardataset.setBarSpacePercent(10f);
barChart.setData(BARDATA);
barChart.setDrawBarShadow(false);
barChart.setDrawValueAboveBar(true);
// if more than 60 entries are displayed in the chart, no values will be
// drawn
barChart.setMaxVisibleValueCount(60);
// scaling can now only be done on x- and y-axis separately
barChart.setPinchZoom(false);
// draw shadows for each bar that show the maximum value
// mChart.setDrawBarShadow(true);
barChart.setDrawGridBackground(false);
barChart.setDescription("");
For the "project" legend part try this
Legend legend = mBarChart.getLegend();
legend.setEnabled(false);
To make touch disable set setTouchEnabled(boolean enabled) on your bar chart object like this
mBarChart.setTouchEnabled(false);
and if you want to show all label you should try
axis.setLabelCount(...)
mBarChart.getXAxis().setValueFormatter(new IndexAxisValueFormatter(labels));
and also try official documents
BARENTRY1 = new ArrayList<>();
BarEntryLabels1 = new ArrayList<String>();
AddValuesToHorizontalBARENTRY();
AddValuesToHorizontalBarEntryLabels();
Bardataset = new BarDataSet(BARENTRY1, "Projects");
BARDATA = new BarData(BarEntryLabels1, Bardataset);
Bardataset.setColors(new int[]{Color.parseColor("#701112")});
horizontalBarChart.setData(BARDATA);
horizontalBarChart.setDrawBarShadow(false);
horizontalBarChart.setDrawValueAboveBar(true);
horizontalBarChart.setPinchZoom(false);
horizontalBarChart.setDrawGridBackground(false);
horizontalBarChart.setDescription("");
Bardataset.setBarSpacePercent(10f);
Legend legend = horizontalBarChart.getLegend();
legend.setEnabled(false);
horizontalBarChart.setTouchEnabled(false);
XAxis xAxis1 = horizontalBarChart.getXAxis();
xAxis1.setPosition(XAxis.XAxisPosition.BOTTOM);
xAxis1.setTextSize(8);
xAxis1.setSpaceBetweenLabels(8);
xAxis1.setTextColor(Color.parseColor("#701112"));
xAxis1.setTypeface(tf);
YAxis leftAxis = barChart.getAxisLeft();
leftAxis.setEnabled(false);
Do like this.The following issue will be fix.
I am trying to make a horizontal barchart that covers the entire parent layout but its not. Below is my code -
HorizontalBarChart barchart = new HorizontalBarChart(activity);
barchart.setLayoutParams(new LinearLayout.LayoutParams(0, 110, weight));
ArrayList<BarEntry> entries = new ArrayList<BarEntry>();
entries.add(new BarEntry(86.0f, 0));
BarDataSet dataset = new BarDataSet(entries, "");
dataset.setColor(Color.parseColor("#E0E0E0"));
ArrayList<String> labels = new ArrayList<String>();
labels.add("86.0");
BarData bardata = new BarData(labels, dataset);
barchart.setData(bardata);
barchart.setDescription("");
Legend legend = barchart.getLegend();
legend.setEnabled(false);
YAxis topAxis = barchart.getAxisLeft();
topAxis.setDrawLabels(false);
YAxis bottomAxis = barchart.getAxisRight();
bottomAxis.setDrawLabels(false);
XAxis rightAxis = barchart.getXAxis();
rightAxis.setDrawLabels(false);
bottomAxis.setDrawLabels(false);
barchart.setPadding(-1, -1, -1, -1);
barchart.setBackgroundColor(Color.CYAN);
return barchart;
I want my horizontal barchart (barchart) to fill the entire blue area. Can someone please help.
EDIT : #PhilippJahoda i tried your solution, but at first launch it shows up the same way it was, when i click/touch the chart then only it covers the entire area. Can you please tell me why i have to touch the chart to make it fill the entire space.
At first launch it looks like -
Screen shot:
After clicking it looks like -
Screen shot2:
Update to the latest version of the library if you have not already.
Then, just remove all offsets from the chart. It's in the documentation.
Call:
chart.setViewPortOffsets(0f, 0f, 0f, 0f);
The padding removal works with
chart.setViewPortOffsets(0f, 0f, 0f, 0f);
but if the effect appears only after touch, try to invalidate chart view (after you set data) this way:
post(new Runnable() {
#Override
public void run() {
chartView.invalidate();
}
});
YAxis yl = chart.getAxisLeft();
yl.setSpaceTop(20f);
Best way to control the padding what I feel is as:
Set all the offsets to 0
chart.setViewPortOffsets(0f, 0f, 0f, 0f);
Control the padding from the XML
com.github.mikephil.charting.charts.LineChart
android:id="#+id/chart"
android:layout_width="match_parent"
android:layout_height="500dp"
android:layout_marginTop="10dp"
android:layout_marginLeft="10dp"
android:layout_marginBottom="10dp"
When you first set your ViePortOffsets and after that moveViewTo then it works.
Graph.setViewPortOffsets(0F,0F,0F,0F)
Graph.moveViewTo(0f,0f,YAxis.AxisDependency.RIGHT)
Graph.invalidate()