I am using MPAndroidChart for drawing a chart in my Android App.
One requirement is I need to bar chart starting from non-zero y position, as suggested in this. So I had using CandleStickChart for the same.
Now my bars are getting cut off at the start and end.
Is there any way to give padding at the start and end of the graph so that it does not get cut off.
Note: My XAxis values are like "4Nov", "5Nov"...
After trying many things, I found out this solution,
graph.getXAxis().setAxisMaximum(candleData.getXMax() + 0.25f);
graph.getXAxis().setAxisMinimum(candleData.getXMin() - 0.25f);
What worked for me is increasing the SpaceTop value.
var yaxis = chart.AxisLeft;
yaxis.SpaceTop = 1.35f;
Related
When I create a line chart with values for each point, the values on the chart overlap the line, as shown in the screenshot. Is there a function to add padding to the values to raise them up so that this doesn't happen? I've looked all over the place for an answer to this or even someone else having the same issue and haven't found what I'm looking for.
My current chart:
I figured it out.
Based on this line in the source code:
int valOffset = (int) (dataSet.getCircleRadius() * 1.75f);
The padding is calculated based on the radius of the circle on the line, so my solution is to increase the size of the circle, set the outer radius to be transparent, and set the hole color to be the same as the line, which accomplishes what I want. This may not work for everyone, depending on what you're trying to do, but it worked in my case.
I have 3 issue related to MPChartAndroid.
How to make chart to see selected values.
1. Add space to the left of LeftAxis and to the right of rightAxis to fully see the values.
2. how to make first and last chart value to fully see the values.
3. Add space under xAxis to see the cut text.
To overcome issue with cutoff x-Axis label, you need to set some extra space on bottom of your chart view.
mLineChart.setExtraOffsets(left,top,right,bottom); try code below
mLineChart.setExtraOffsets(0,0,0,10);
For overcome issue with overlapping value on axis line you need to set some spacing (start position of lines) on x-Axis, try code below
xAxis.setSpaceMax(0.01f);
xAxis.setSpaceMin(0.01f);
also try xAxis.setAvoidFirstLastClipping(true);
I am using MPAndroidChart library and have a set of data entries where the Y values are between 20 - 30 and I'm currently displaying it in a Line chart. However, I notice that there is a big gap because the Y-axis starts at 0 instead of 20.
How can I make Y-axis to start at the 20 instead of 0? Or even better the minimum of all y-values?
Thank you for your time!
You can find this in the documentation.
yAxis.setAxisMinValue(...)
allows you to adjust the lower limit of the axis to your needs.
The last version includes a left and right axis. You can set to zero like this (Kotlin):
chart.axisLeft.axisMinimum = 0f
chart.axisRight.axisMinimum = 0f
You can set zero in Bar Graph like this in Java
barChart.getAxisLeft().setAxisMinValue(0f);
barChart.getAxisRight().setAxisMinValue(0f);
I'm working with MPAndroidChart and I'm really enjoying it since it's really well done.
But I've got a problem that I haven't been able to resolve in a few hours. I've got a seekbar under the three charts (as you can see from the screenshots below) and I'd like to align it with the X-axis, skipping the space occupied by the Y-axis' labels on the left and the padding that gets added on the right.
Have you got any suggestion on how to achieve my goal? Is there a way of knowing the labels' width and the charts' extra-padding? Or, better, can I get the X-axis width?
Thanks in advance! Bye!
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);
This will remove all padding / margin / offset from the chart, making the actual content of the chart (the data) being the next thing to your screen edge.
I'm trying to set the width of the bars of a BarSeries with Shinobi.
Code's following:
DataAdapter<String, Double> da1 = new SimpleDataAdapter<String, Double>();
da1.add(new DataPoint<String, Double>("q1", 1.0));
da1.add(new DataPoint<String, Double>("q2", 3.0));
da1.add(new DataPoint<String, Double>("q3", 4.5));
da1.add(new DataPoint<String, Double>("q4", -2.5));
BarSeries series1 = new BarSeries();
series1.setDataAdapter(da1);
BarSeriesStyle css1 = series1.getStyle();
css1.setLineWidth(180.0f);
css1.setAreaColor(Color.YELLOW);
CategoryAxis xAxis = new CategoryAxis();
chart.setXAxis(xAxis);
xAxis.getStyle().setInterSeriesPadding(0.2f);
NumberAxis yAxis = new NumberAxis();
chart.setYAxis(yAxis);
yAxis.getStyle().setInterSeriesPadding(0.2f);
chart.addSeries(series1);
What happens is that the line css1.setLineWidth(180.0f); is completely ignored. I can put 1.0f or 1000.0f and the lines are always the same width no matter what.
What am I missing, or doing wrong? I'm using shinobi 1.5.1.
Edit: same goes with ColumnSeries:
ColumnSeries cs = new ColumnSeries();
DataAdapter<Float, Integer> adapterAxis = new SimpleDataAdapter<Float, Integer>();
adapterAxis.add(new DataPoint<Float, Integer>(0f, 3));
cs.getStyle().setLineColor(Color.BLACK);
cs.getStyle().setLineWidth(1f);
cs.setDataAdapter(adapterAxis);
1f or 20f, nothing changes.
chart.addSeries(cs);
Edit: following Kai's answer.
I tried playing around with setInterSeriesPadding, but it doesn't do what I need in that if I approach 1.f as padding value the bar will shrink, but if I set 0f the bar will have a minimum height and the space between them will remain 'big'.
To be clearer: I have 4 bars at 0 to 4 on the Y axis with different X values. Each one is centered more or less on the Y value (not really, but not important right now). E.g. bar centered in 2 will go from ~1.8 to ~2.2 and bar centered in 3 will go from ~2.8 to to ~3.2. I want them thicker, so that they go from ~1.55 to ~2.45 and from ~2.55 to ~3.45. How do I do that?
Edit 2 (images):
Actual:
Desired (sorry for my lack of Paint skills, it was just a way to show that I want them thicker):
When you refer to width of a bar series, I am going to assume you mean the height, i.e. measuring from the top to the bottom of the bar. I'd like to mention that the setLineWidth() method is not intended for this purpose, but in fact this method is used to style the line which is drawn around the edge of a bar (or column) to act as a border. As the value passed to this method is increased, the bars (or columns) remain the same size, but the line grows inward. Subsequently, a large number will give the appearance of no line, as the bar or column will have a line so thick that it fills the entire bar (or column).
If you wish to manipulate the height of the bars (or the width of the columns) you need to use the methods:
http://www.shinobicontrols.com/docs/ShinobiControls/ShinobiChartsAndroid/1.5.1/Premium/Normal/apidocs/docs/reference/com/shinobicontrols/charts/AxisStyle.html#setInterSeriesPadding(float)
and
http://www.shinobicontrols.com/docs/ShinobiControls/ShinobiChartsAndroid/1.5.1/Premium/Normal/apidocs/docs/reference/com/shinobicontrols/charts/AxisStyle.html#setInterSeriesSetPadding(float)
I hope that you find this information useful. Thanks and kind regards,
Kai.
EDIT:
Hello Stephen,
Thanks for the extra information.
So today I created a quick app, using your code to populate a Shinobi chart with data.
I did see the thin bars issue which you describe. I believe in order to correct this you also need to call the method Axis.setInterSeriesSetPadding(float).
Although when you use a single series in your chart it is not obvious, this method does affect the spacing between individual bars. By default there is a small spacing between bars if this method is not explicitly called.
Please remember also that these two methods expect a float value between 0 (no padding at all) and 1. I suggest you call both of these methods with a parameter of 0.0 and slowly increase the values until you achieve the appearance you wish. You should only need to call these 2 methods on your category axis, not the data axis.
Whilst building my app with your code I did notice that you use a bar series, but you have your category axis on the x axis. I found when I built my app it initially only displayed 3 bars as the first category ("q1") was rendered as having a zero data value. This is because categories are internally given an integer index, and so the first category is stored with a 0 index.
The typical way to use a bar series is to have the categories on the y axis and the data values on the x axis. I modified my app to use this configuration and I found all 4 bars showed correctly. Furthermore I was able to have a padding ranging from nothing, where the bars were butted up against each other, to a lot of padding where the bars appear thin.
I hope that this helps,
Thanks,
Kai.
Disclaimer: I work for ShinobiControls.