BarChart draws additional horizontal grid lines when setting custom customAxisMax/labelCount #310

drbarto · 2015-08-20T16:39:47Z

Hi,

I'm using ios-chart to display a stacked bar chart which shows labels on the left axis.

I want to avoid "odd" axis label values; they should be "regular", i.e. multiples of 10, 100, etc.

Using customAxisMin/customAxisMax/labelCount seems to be the way to achieve this behavior: So e.g. for a maximum bar value of 32, I calculate the next largest multiple of 10 which is 40, and use this value as customAxisMax; customAxisMin is alway set to 0; to get intervals of 10 on the axis labels, I set the labelCount to 4 to get labels at 10, 20, 30 and 40 (also, a label is drawn at 0, which is ok).

When setting the axis metrics like this, the chart is drawn with additinal horizontal grid lines (see screenshot): it shows lines at the axis label values (which is good), but in addition it also draws lines at the top value of each bar (which is bad).

This seems to be a bug, but maybe I'm just overlooking something.

Any help is appreciated. BTW -- thanks for the great lib!

Regards,
Martin

liuxuan30 · 2015-08-21T01:14:13Z

first of all, it's not a stacked bar chart, it's just normal bar chart.
From the chart, I suspect you don't have your dataSets correctly setup. It seems like you have 7 values (from the y axis grid lines count), and 3 dataSets, from each xIndex bars count (2) plus 1 empty space(supposed to have one more bar, but no value?) It seems strange with this combination.

Anyway, you need to provide your ios-charts version and dataSets so we can try to reproduce.

Again, it's not a stacked bar chart, you can check charts demo code to see how to draw multiple bars and stacked bars.

drbarto · 2015-08-21T11:26:34Z

Hi,

it indeed is a stacked bart chart, but only shows a single value per bar. I've creates a new screenshot with multiple values to make this clearer. The image shows two versions of the chart: on the left, you see the chart without setting customAxisMin/customAxisMax/labelCount -- the grid lines are drawn correctly. On the right, the custom axis properties are set, resulting in additional horizontal grid lines. Again, the only difference between the two screenshots here is the use of customAxisMin/customAxisMax/labelCount!

I'm using ios-charts version 2.1.3. Here is my Swift code (assumes that you have a member var barChartView of type BarChartView):

let entry1 = BarChartDataEntry(values: [ 8, 16 ], xIndex: 0)
let entry2 = BarChartDataEntry(values: [ 32, 0 ], xIndex: 1)
let dataSet = BarChartDataSet(yVals: [ entry1, entry2 ], label: nil)
dataSet.colors = [ UIColor.purpleColor(), UIColor.greenColor()]
let chartData = BarChartData(xVals: [ "1", "2" ], dataSet: dataSet)

barChartView.data = chartData
barChartView.leftAxis.startAtZeroEnabled = false
barChartView.leftAxis.customAxisMin = 0
barChartView.leftAxis.customAxisMax = 40
barChartView.leftAxis.labelCount = 4
barChartView.notifyDataSetChanged()

liuxuan30 · 2015-08-22T02:33:57Z

I tried your data in ChartsDemo, it draws normally, but it only has one dataSet. Again, you are having more than 1 dataSet, and it seems the issue starts from there? you should check your code and run some samples on demo chart code.

- (void)setDataCount:(int)count range:(double)range
{
    NSMutableArray *xVals = [[NSMutableArray alloc] init];
    NSMutableArray *yVals1 = [[NSMutableArray alloc] init];

    [yVals1 addObject:[[BarChartDataEntry alloc] initWithValues:@[@8, @12] xIndex:0]];
    [yVals1 addObject:[[BarChartDataEntry alloc] initWithValues:@[@32, @0] xIndex:1]];

    BarChartDataSet *set1 = [[BarChartDataSet alloc] initWithYVals:yVals1 label:nil];

    set1.colors = @[ChartColorTemplates.vordiplom[0], ChartColorTemplates.vordiplom[1], ChartColorTemplates.vordiplom[2]];

    NSMutableArray *dataSets = [[NSMutableArray alloc] init];
    [dataSets addObject:set1];

    BarChartData *data = [[BarChartData alloc] initWithXVals:@[@"1",@"2"] dataSets:dataSets];

    _chartView.data = data;
    _chartView.leftAxis.startAtZeroEnabled = NO;
    _chartView.leftAxis.customAxisMin = 0;
    _chartView.leftAxis.customAxisMax = 40;
    _chartView.leftAxis.labelCount = 4;
    [_chartView notifyDataSetChanged];
}

drbarto · 2015-08-22T08:23:48Z

Problem solved!
In my original code, I disabled the right axis' labels (drawLabelsEnabled) but not its gridlines. So the right axis used a different gridline interval, which caused the weird-looking grid. By completely disabling the right axis (enabled), the problem disappeared.

Thanks for you help!

Regards,
Martin

vincentmaithu · 2016-01-07T16:21:43Z

Can you show your code drbarto?

how did you disable the right axis 'completely'

liuxuan30 · 2016-01-08T02:12:50Z

chartView.rightAxisEnbled = false

vincentmaithu · 2016-01-08T09:27:41Z

okay cool thanks.

raghunath44 · 2016-03-03T06:50:51Z

How to remove that vertical Line After Every Index

liuxuan30 · 2016-03-04T01:58:56Z

@raghunath44 it's called grid line. just disable it

raghunath44 · 2016-03-07T07:20:09Z

This is My code..
_unitVersusPaymentChart.descriptionText = @"";
_unitVersusPaymentChart.noDataTextDescription = @"You need to provide data for the chart.";

_unitVersusPaymentChart.pinchZoomEnabled = NO;
_unitVersusPaymentChart.drawBordersEnabled = NO;
_unitVersusPaymentChart.drawBarShadowEnabled = NO;
_unitVersusPaymentChart.drawGridBackgroundEnabled = NO;
_unitVersusPaymentChart.drawMarkers = NO;
_unitVersusPaymentChart.leftAxis.drawAxisLineEnabled = NO;

ChartLegend *legend = _unitVersusPaymentChart.legend;
legend.position = ChartLegendPositionBelowChartCenter;
legend.font = [UIFont fontWithName:@"HelveticaNeue-Light" size:14.f];

ChartXAxis *xAxis = _unitVersusPaymentChart.xAxis;
xAxis.labelFont = [UIFont fontWithName:@"HelveticaNeue-Light" size:9.f];
xAxis.labelPosition = XAxisLabelPositionBottom;
xAxis.spaceBetweenLabels = 0.0;

_unitVersusPaymentChart.rightAxis.drawGridLinesEnabled = NO;
_unitVersusPaymentChart.rightAxis.enabled = NO;

_unitVersusPaymentChart.leftAxis.enabled = NO;
_unitVersusPaymentChart.rightAxis.enabled = NO;
_unitVersusPaymentChart.drawBarShadowEnabled = NO;

How to remove the VerticalLine after every Index?

liuxuan30 · 2016-03-07T08:18:19Z

xAxis.drawGridLineEnabled = NO

raghunath44 · 2016-03-07T09:42:42Z

How to Decrease the labelFont size in Piechart and BarChart?
This is My code:
-(void)setUpPieChartViewOptions:(PieChartView *)pieChartView{

pieChartView.usePercentValuesEnabled = YES;
pieChartView.holeTransparent = YES;
pieChartView.holeRadiusPercent = 0.58;
pieChartView.transparentCircleRadiusPercent = 0.61;
pieChartView.descriptionText = @"";

[pieChartView setExtraOffsetsWithLeft:5.f top:10.f right:5.f bottom:5.f];

pieChartView.drawCenterTextEnabled = YES;

NSMutableParagraphStyle *paragraphStyle = [[NSParagraphStyle defaultParagraphStyle] mutableCopy];
paragraphStyle.lineBreakMode = NSLineBreakByTruncatingTail;
paragraphStyle.alignment = NSTextAlignmentCenter;

NSMutableAttributedString *centerText = [[NSMutableAttributedString alloc] initWithString:@"UNITS"];
pieChartView.centerAttributedText = centerText;

pieChartView.drawHoleEnabled = YES;
pieChartView.rotationAngle = 0.0;
pieChartView.rotationEnabled = YES;
pieChartView.highlightPerTapEnabled = YES;

// pieChartView.yAxis.labelFont = [UIFont fontWithName:@"HelveticaNeue-Light" size:10.f];
// yaxis.labelTextColor = [UIColor blackColor];
pieChartView.legend.enabled = FALSE;

}

BarChartView:
_unitVersusPaymentChart.descriptionText = @"";
_unitVersusPaymentChart.noDataTextDescription = @"You need to provide data for the chart.";

_unitVersusPaymentChart.pinchZoomEnabled = NO;
_unitVersusPaymentChart.drawBordersEnabled = NO;
_unitVersusPaymentChart.drawBarShadowEnabled = NO;
_unitVersusPaymentChart.drawGridBackgroundEnabled = NO;
_unitVersusPaymentChart.drawMarkers = NO;
_unitVersusPaymentChart.leftAxis.drawAxisLineEnabled = NO;



ChartLegend *legend = _unitVersusPaymentChart.legend;
legend.position = ChartLegendPositionBelowChartCenter;
legend.font = [UIFont fontWithName:@"HelveticaNeue-Light" size:14.f];

ChartXAxis *xAxis = _unitVersusPaymentChart.xAxis;
xAxis.labelFont = [UIFont fontWithName:@"HelveticaNeue-Light" size:9.f];
xAxis.labelPosition = XAxisLabelPositionBottom;
xAxis.spaceBetweenLabels = 0.0;
xAxis.drawGridLinesEnabled = NO;
_unitVersusPaymentChart.rightAxis.drawGridLinesEnabled = NO;
_unitVersusPaymentChart.rightAxis.enabled = NO;


//yAxis.labelFont = [UIFont fontWithName:@"HelveticaNeue-Light" size:6.f];

_unitVersusPaymentChart.leftAxis.enabled = NO;
_unitVersusPaymentChart.rightAxis.enabled = NO;
_unitVersusPaymentChart.drawBarShadowEnabled = NO;

liuxuan30 · 2016-03-08T02:45:10Z

@raghunath44 stop asking irrelevant questions in a closed thread.
Take a look at the bar and pie chart properties for font, you can change the font size for the font you want.

wzh28x · 2016-06-16T00:53:18Z

How to show the label

rajesh-loudcell · 2018-03-20T10:10:34Z

I want to show average of 30 days value by using horizontal line on the bar graph ..Is any idea?

thierryH91200 · 2018-03-20T15:17:20Z

@rajesh-loudcell try

let ll2 = ChartLimitLine(limit: yourAverage, label: " average of 30 days")
// begin option
ll2.lineWidth = 4.0
ll2.lineDashLengths = [5.0, 5.0]
ll2.labelPosition = .rightBottom
ll2.valueFont = NSFont.systemFont(ofSize: CGFloat(10.0))
// end option
        
let leftAxis = chartView.leftAxis
leftAxis.removeAllLimitLines()
leftAxis.addLimitLine(ll2)

drbarto closed this as completed Aug 22, 2015

ChartsOrg locked and limited conversation to collaborators Mar 29, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

BarChart draws additional horizontal grid lines when setting custom customAxisMax/labelCount #310

BarChart draws additional horizontal grid lines when setting custom customAxisMax/labelCount #310

drbarto commented Aug 20, 2015

liuxuan30 commented Aug 21, 2015

drbarto commented Aug 21, 2015

liuxuan30 commented Aug 22, 2015

drbarto commented Aug 22, 2015

vincentmaithu commented Jan 7, 2016

liuxuan30 commented Jan 8, 2016

vincentmaithu commented Jan 8, 2016

raghunath44 commented Mar 3, 2016

liuxuan30 commented Mar 4, 2016

raghunath44 commented Mar 7, 2016

liuxuan30 commented Mar 7, 2016

raghunath44 commented Mar 7, 2016

liuxuan30 commented Mar 8, 2016

wzh28x commented Jun 16, 2016

rajesh-loudcell commented Mar 20, 2018

thierryH91200 commented Mar 20, 2018 •

edited

Loading

BarChart draws additional horizontal grid lines when setting custom customAxisMax/labelCount #310

BarChart draws additional horizontal grid lines when setting custom customAxisMax/labelCount #310

Comments

drbarto commented Aug 20, 2015

liuxuan30 commented Aug 21, 2015

drbarto commented Aug 21, 2015

liuxuan30 commented Aug 22, 2015

drbarto commented Aug 22, 2015

vincentmaithu commented Jan 7, 2016

liuxuan30 commented Jan 8, 2016

vincentmaithu commented Jan 8, 2016

raghunath44 commented Mar 3, 2016

liuxuan30 commented Mar 4, 2016

raghunath44 commented Mar 7, 2016

liuxuan30 commented Mar 7, 2016

raghunath44 commented Mar 7, 2016

liuxuan30 commented Mar 8, 2016

wzh28x commented Jun 16, 2016

rajesh-loudcell commented Mar 20, 2018

thierryH91200 commented Mar 20, 2018 • edited Loading

thierryH91200 commented Mar 20, 2018 •

edited

Loading