Vertical lines at X Axis iOS-charts

Question

Maybe this is a simple question but I wanted to know how I can draw vertical lines under X Axis and upper labels in X Axis in iOS-charts. (See the pic, like red lines)

UPDATE: the library I'm using is this https://github.com/danielgindi/ios-charts

I read in the bellow answer that you did it, Is it possible for you to share the solution with me ? — Nagaraj, Aug 24 '17 at 11:06

score 4 · Answer 1 · answered Apr 15 '19 at 17:42

4

I managed to draw the ticks below the x axis by overriding drawLabel. This function draws the labels below the x axis and therefore can draw something else there. For example our desired ticks!

class XAxisRendererWithTicks: XAxisRenderer {

     override func drawLabel(context: CGContext, formattedLabel: String, x: CGFloat, y: CGFloat, attributes: [NSAttributedString.Key: Any], constrainedToSize: CGSize, anchor: CGPoint, angleRadians: CGFloat) {

         super.drawLabel(context: context, formattedLabel: formattedLabel, x: x, y: y, attributes: attributes, constrainedToSize: constrainedToSize, anchor: anchor, angleRadians: angleRadians)

         context.beginPath()

        context.move(to: CGPoint(x: x, y: y))
        context.addLine(to: CGPoint(x: x, y: self.viewPortHandler.contentBottom))

        context.strokePath()
     }
}

To use the custom renderer:

let customXAxisRenderer = XAxisRendererWithTicks(viewPortHandler: self.chartView.viewPortHandler, xAxis: xAxis, transformer: self.chartView.getTransformer(forAxis: .left))

self.chartView.xAxisRenderer = customXAxisRenderer

Example image: Please don´t mind the colors but I think you get what I mean. ;)

Hope this helps!

answered Apr 15 '19 at 17:42

Philipp Otto

4,061
2
32
49

hi Philipp, how to add short line at odd label, because i only have label at odd position. – saint Aug 14 '20 at 02:50
Hey @saint. Sorry for the late answer, I just read it. I think the code I added here is not responsible for deciding where to draw the labels (odd/even etc...) It is more just adding a line where labels would be added anyways. So we would kinda leave the scope of the question here. I hope you find or you already found a way to make the chart add labels to odd positions but it would definitely be in another function or delegate call. – Philipp Otto Aug 21 '20 at 14:21
@PhilippOtto, Thanx man! Your code was on time I only have one question. How to add a label under each vertical line? – PAULMAX May 04 '21 at 12:53
1

Hey @PAULMAX. This answer is some time ago so I am not sure anymore but I would assume that the labels came from the general way of adding the labels. So as far as I can recall there was no magic needed, just the out of the box functionality for the diagram – Philipp Otto May 04 '21 at 13:08
@PhilippOtto Thank you very much for your answer! I'm currently working on a large project and CHARTS are just its part. I would be very grateful if you could help me. – PAULMAX May 04 '21 at 13:15
1

Hey @PAULMAX sorry cant help you with this right now, I havent worked with Charts in some time and dont have access to this project anymore. Good luck mate – Philipp Otto May 04 '21 at 13:39

Wingzero · Accepted Answer · 2016-02-17T13:53:40.797

2

You could, but you have to override some methods, take a look at drawGridLine() and drawLabels() in x axis renderer for example.

drawGridLine gives you the full details about how to draw a grid line in ios-charts, understaning it will be very helpful to write your own customizations.

edited Feb 17 '16 at 13:53

answered Feb 17 '16 at 04:17

Wingzero

9,644
10
39
80

Can you be a little more specific please? Im using LineChartView in ios-charts, I really appreciate it. Thanks – Aili Feb 17 '16 at 13:04
As I said, such kind of questions are just customizations based ios-charts. You should get familiar with the x axis renderer code first. You just need to know the xIndex position, and draw a short line seg. Quite simple once you get familiar with x axis renderer. – Wingzero Feb 17 '16 at 13:51
Thanks for your suggestion, I did it! :) – Aili Feb 17 '16 at 15:20
@Aili Would you please tell me how did you do it ? I also have a similar requirement. – Nagaraj Aug 24 '17 at 11:04

score 0 · Answer 3 · answered Feb 17 '16 at 06:54

Set major tick locations and minor tick locations for the axis you want to get the lines like red color. Please try with the following sample code written for x-axis of the graph.

CPTXYAxisSet *axisSet = (CPTXYAxisSet *)graph.axisSet;
CPTXYAxis *x = axisSet.xAxis;   //Get the axis of the graph

// x and y axis line color
CPTMutableLineStyle *axisLineStyle = [CPTMutableLineStyle lineStyle];
axisLineStyle.lineWidth = 2.0f;
axisLineStyle.lineColor = [CPTColor whiteColor];  //Set color whatever you want

//Text Style for axis title
CPTMutableTextStyle *axisTextStyle = [[CPTMutableTextStyle alloc] init];
axisTextStyle.color = [CPTColor whiteColor];      //Set color whatever you want

// Line color
CPTMutableLineStyle *tickLineStyle = [CPTMutableLineStyle lineStyle];
tickLineStyle.lineColor = [CPTColor whiteColor];  //Set color whatever you want
tickLineStyle.lineWidth = 2.0f;

x.title = @"Title for the axis";
x.titleOffset = 50.0f;
x.axisLineStyle = axisLineStyle;                //axis line style
x.titleTextStyle = axisTextStyle;               //axis title text style
x.majorTickLineStyle = axisLineStyle;           //Major axis tick style which you wanted
x.minorTickLineStyle = axisLineStyle;           //Minor axis tick style
x.labelTextStyle = axisTextStyle;               //axis label text style
x.labelingPolicy = CPTAxisLabelingPolicyNone;   //axis labeling policy
x.tickDirection = CPTSignNegative;              //This will set the red lines below the x-axis as displayed in screenshot you have attached.

Have a happy coding..!!

Vertical lines at X Axis iOS-charts

3 Answers3

Linked