Cannot set the x-axis label color

[shamila]

Hi,

I can't change the color of x-axis label in my graph
please help me. 
My code
 _chart = [[TKChart alloc] initWithFrame:CGRectMake(3, 50, 300, self.frame.size.height - 77)];
    _chart.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
    _chart.title.hidden = NO;
    _chart.title.text = @"";
    _chart.legend.hidden = YES;
    _chart.allowAnimations = YES;
    _chart.allowTrackball = YES;
    _chart.delegate = self;    
    _chart.xAxis.style.labelStyle.font = [UIFont fontWithName:@"HelveticaNeueLTStd-Lt" size:12];
    _chart.xAxis.style.labelStyle.textColor =  [UIColor colorWithRed:(103/255.0) green:(103/255.0) blue:(103/255.0) alpha:1];
    _chart.xAxis.style.titleStyle.font = [UIFont fontWithName:@"HelveticaNeueLTStd-Lt" size:12];
    _chart.xAxis.style.titleStyle.textColor = [UIColor colorWithRed:(103/255.0) green:(103/255.0) blue:(103/255.0) alpha:1];
    _chart.yAxis.style.titleStyle.font = [UIFont fontWithName:@"HelveticaNeueLTStd-Lt" size:12];
    _chart.yAxis.style.titleStyle.textColor = [UIColor colorWithRed:(103/255.0) green:(103/255.0) blue:(103/255.0) alpha:1];
     [_chart reloadData];
    [self addSubview:_chart];

Thank you,
Shamila
   

[shamila]

I've got the answer. By change the order of the code  like
[self addSubview:_chart];
 _chart.xAxis.style.labelStyle.font = [UIFont fontWithName:@"HelveticaNeueLTStd-Lt" size:12];
  _chart.xAxis.style.labelStyle.textColor =  [UIColor colorWithRed:(103/255.0) green:(103/255.0) blue:(103/255.0) alpha:1];
  _chart.yAxis.style.labelStyle.font = [UIFont fontWithName:@"HelveticaNeueLTStd-Lt" size:12];
  _chart.yAxis.style.labelStyle.textColor =  [UIColor colorWithRed:(103/255.0) green:(103/255.0) blue:(103/255.0) alpha:1];

 [_chart reloadData];

[Jack]

Hi Shamila,

Yes, your assumption is correct. You should first add a series to the chart before setting axis properties. This is necessary because TKChart creates the axes automatically when adding a series based on the series data. You can override this behavior by setting the xAxis or yAxis properties explicitly.

Do not hesitate to contact us if you have further questions.

Regards,
Jack
Telerik

 

 

[Rico]

I try to do this in Swift, but I get an error when I try to call chart.reloaddata()


import UIKit


class DataSourceDelegate: UIViewController, TKChartDataSource {
    override func viewDidLoad() {
        super.viewDidLoad()
        let chart = TKChart(frame: CGRectInset(self.view.bounds, 10, 10))
        self.view.addSubview(chart)
        chart.dataSource = self
        chart.xAxis.style.labelStyle.font = UIFont(name: "System", size: 4)
        chart.xAxis.style.labelStyle.textColor = UIColor.redColor()
        chart.autoresizingMask = UIViewAutoresizing.FlexibleWidth | UIViewAutoresizing.FlexibleHeight
        chart.updateAnnotations()
        chart.reloadData()


    }
    
    func seriesForChart(chart: TKChart!, atIndex index: UInt) -> TKChartSeries! {
        var series = chart.dequeueReusableSeriesWithIdentifier("series1") as? TKChartSeries
        if series == nil {
            series = TKChartLineSeries(items: nil, reuseIdentifier: "series1")
            series!.title = "Series title"
        }
        
        return series
    }
    
    func numberOfSeriesForChart(chart: TKChart!) -> UInt {
        return 1
    }
    
    func chart(chart: TKChart!, numberOfDataPointsForSeriesAtIndex seriesIndex: Int) -> Int {
        return 10
    }
    
    
    func chart(chart: TKChart!, dataPointAtIndex dataIndex: Int, forSeriesAtIndex seriesIndex: Int) -> TKChartData! {
        var point = TKChartDataPoint(x: dataIndex, y: Int(arc4random_uniform(100)))
        return point
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}







mport UIKit


class DataSourceDelegate: UIViewController, TKChartDataSource {
    override func viewDidLoad() {
        super.viewDidLoad()
        let chart = TKChart(frame: CGRectInset(self.view.bounds, 10, 10))
        self.view.addSubview(chart)
        chart.dataSource = self
        chart.xAxis.style.labelStyle.font = UIFont(name: "System", size: 4)
        chart.xAxis.style.labelStyle.textColor = UIColor.redColor()
        chart.autoresizingMask = UIViewAutoresizing.FlexibleWidth | UIViewAutoresizing.FlexibleHeight
        chart.updateAnnotations()
        chart.reloadData()


    }
    
    func seriesForChart(chart: TKChart!, atIndex index: UInt) -> TKChartSeries! {
        var series = chart.dequeueReusableSeriesWithIdentifier("series1") as? TKChartSeries
        if series == nil {
            series = TKChartLineSeries(items: nil, reuseIdentifier: "series1")
            series!.title = "Series title"
        }
        
        return series
    }
    
    func numberOfSeriesForChart(chart: TKChart!) -> UInt {
        return 1
    }
    
    func chart(chart: TKChart!, numberOfDataPointsForSeriesAtIndex seriesIndex: Int) -> Int {
        return 10
    }
    
    
    func chart(chart: TKChart!, dataPointAtIndex dataIndex: Int, forSeriesAtIndex seriesIndex: Int) -> TKChartData! {
        var point = TKChartDataPoint(x: dataIndex, y: Int(arc4random_uniform(100)))
        return point
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}






import UIKit


class DataSourceDelegate: UIViewController, TKChartDataSource {
    override func viewDidLoad() {
        super.viewDidLoad()
        let chart = TKChart(frame: CGRectInset(self.view.bounds, 10, 10))
        self.view.addSubview(chart)
        chart.dataSource = self
        chart.xAxis.style.labelStyle.font = UIFont(name: "System", size: 4)
        chart.xAxis.style.labelStyle.textColor = UIColor.redColor()
        chart.autoresizingMask = UIViewAutoresizing.FlexibleWidth | UIViewAutoresizing.FlexibleHeight
        chart.updateAnnotations()
        chart.reloadData()


    }
    
    func seriesForChart(chart: TKChart!, atIndex index: UInt) -> TKChartSeries! {
        var series = chart.dequeueReusableSeriesWithIdentifier("series1") as? TKChartSeries
        if series == nil {
            series = TKChartLineSeries(items: nil, reuseIdentifier: "series1")
            series!.title = "Series title"
        }
        
        return series
    }
    
    func numberOfSeriesForChart(chart: TKChart!) -> UInt {
        return 1
    }
    
    func chart(chart: TKChart!, numberOfDataPointsForSeriesAtIndex seriesIndex: Int) -> Int {
        return 10
    }
    
    
    func chart(chart: TKChart!, dataPointAtIndex dataIndex: Int, forSeriesAtIndex seriesIndex: Int) -> TKChartData! {
        var point = TKChartDataPoint(x: dataIndex, y: Int(arc4random_uniform(100)))
        return point
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}

[Jack]

Hello Rico,

You can't get the system font by using this initialiser, because it will return nil and this causes the issue. You should use systemFontOfSize instead. Here is the code:

chart.xAxis.style.labelStyle.font = UIFont.systemFontOfSize(4)
chart.xAxis.style.labelStyle.textColor = UIColor.redColor()

I hope this helps. Do not hesitate to contact us if you have further questions.

Regards,
Jack
Telerik

 

 

[Rico]

Thank you that did it ;-)

[Megharaj]

 neither font not size is working for me(  chart.xAxis?.style.labelStyle.font = UIFont.systemFontOfSize(4)
            chart.xAxis?.style.labelStyle.textColor = UIColor.redColor()). 

below is the attached code

 

if(param1 == "trend"){
            if Cell4 != nil {
                Cell4 = TableViewCell4(style: UITableViewCellStyle.Subtitle, reuseIdentifier: reuseIndentifier)
            }
            var arr = Array<String>()

            arr = ["Actual","Plan"]


            let chart = TKChart(frame: CGRectInset(CGRectMake(0, -5, screenBounds.size.width, 300), -5, 0))
            chart.xAxis?.style.labelStyle.font = UIFont.systemFontOfSize(4)
            chart.xAxis?.style.labelStyle.textColor = UIColor.redColor()


           for var j = 0; j < arr.count; j++ {

            var ActulaData = [TKChartDataPoint]()
            if Statistics.sharedInstance.History.count > 0 {
                for var i = 0; i < Statistics.sharedInstance.History.count; ++i {
                    let history = Statistics.sharedInstance.History[i] as Dictionary<String,String>!
                    var lineName = arr[j]
                    var actual = ""
                    actual = history[lineName]!
                    actual = actual.stringByReplacingOccurrencesOfString(",", withString: "")
                    var act: Int? = (actual as NSString).integerValue
                    if act == nil {
                        act = 0
                    }
                    ActulaData.append(TKChartDataPoint(x: history["Header"], y: act))
                }
                let seriesForExpenses = TKChartLineSeries(items: ActulaData)
                seriesForExpenses.title = arr[j]
                chart.addSeries(seriesForExpenses)
                chart.backgroundColor = UIColor(red: 70/255, green: 130/255, blue: 180/255, alpha: 1.0)


                }
            }
                chart.legend.hidden = false
            let gridStyle = chart.gridStyle
            gridStyle.horizontalLineStroke = TKStroke(color: UIColor(white: 215.0 / 255.0, alpha: 1.0))
            gridStyle.horizontalLineAlternateStroke = TKStroke(color: UIColor(white: 215.0 / 255.0, alpha: 1.0))
            gridStyle.horizontalFill = TKSolidFill(color: UIColor(white: 228.0 / 255.0, alpha: 0.7))
            gridStyle.horizontalAlternateFill = TKSolidFill(color: UIColor.whiteColor())
            gridStyle.horizontalLinesHidden = false

            gridStyle.verticalLineStroke = TKStroke(color: UIColor(white: 215.0 / 255.0, alpha: 1.0))
            gridStyle.verticalLineAlternateStroke = TKStroke(color: UIColor(white: 215.0 / 255.0, alpha: 1.0))
            gridStyle.verticalLinesHidden = true
            gridStyle.verticalFill = TKSolidFill(color: UIColor(red: 0/255, green: 128/255, blue: 128/255, alpha: 1.0))
            gridStyle.verticalAlternateFill = TKSolidFill(color: UIColor(red: 173/255, green: 216/255, blue: 230/255, alpha: 1.0))


            chart.reloadData()
                Cell4!.addSubview(chart)
        }

[Jack]

Hello Megharaj,

Thank you for contacting us.

Please note that TKChart creates its axes automatically based on the input data. In this code snippet axes properties are set right after creating the TKChart instance and before creating a series. At this time there are no valid axes objects associated with TKChart and that is why the settings are not persisted. Move the following lines at the bottom of the code snippet (after the addSubview method call):

chart.xAxis?.style.labelStyle.font = UIFont.systemFontOfSize(4)
chart.xAxis?.style.labelStyle.textColor = UIColor.redColor()

Note also that calling reloadData method is not necessary in this case. Calling this method will reset all auto-generated axes in TKChart.

Regards,
Jack
Telerik

[Megharaj]

No luck,

i have made the changes, as per u r comments.

 

please find the changes below

 

{
            if Cell4 != nil {
                Cell4 = TableViewCell4(style: UITableViewCellStyle.Subtitle, reuseIdentifier: reuseIndentifier)
            }
            var arr = Array<String>()

            arr = ["Actual","Plan"]


            let chart = TKChart(frame: CGRectInset(CGRectMake(0, -5, screenBounds.size.width, 300), -5, 0))

           for var j = 0; j < arr.count; j++ {

            var ActulaData = [TKChartDataPoint]()
            if Statistics.sharedInstance.History.count > 0 {
                for var i = 0; i < Statistics.sharedInstance.History.count; ++i {
                    let history = Statistics.sharedInstance.History[i] as Dictionary<String,String>!
                    var lineName = arr[j]
                    var actual = ""
                    actual = history[lineName]!
                    actual = actual.stringByReplacingOccurrencesOfString(",", withString: "")
                    var act: Int? = (actual as NSString).integerValue
                    if act == nil {
                        act = 0
                    }
                    ActulaData.append(TKChartDataPoint(x: history["Header"], y: act))
                }
                let seriesForExpenses = TKChartLineSeries(items: ActulaData)
                seriesForExpenses.title = arr[j]
                chart.addSeries(seriesForExpenses)
                chart.backgroundColor = UIColor(red: 70/255, green: 130/255, blue: 180/255, alpha: 1.0)


                }
            }
                chart.legend.hidden = false
            let gridStyle = chart.gridStyle
            gridStyle.horizontalLineStroke = TKStroke(color: UIColor(white: 215.0 / 255.0, alpha: 1.0))
            gridStyle.horizontalLineAlternateStroke = TKStroke(color: UIColor(white: 215.0 / 255.0, alpha: 1.0))
            gridStyle.horizontalFill = TKSolidFill(color: UIColor(white: 228.0 / 255.0, alpha: 0.7))
            gridStyle.horizontalAlternateFill = TKSolidFill(color: UIColor.whiteColor())
            gridStyle.horizontalLinesHidden = false

            gridStyle.verticalLineStroke = TKStroke(color: UIColor(white: 215.0 / 255.0, alpha: 1.0))
            gridStyle.verticalLineAlternateStroke = TKStroke(color: UIColor(white: 215.0 / 255.0, alpha: 1.0))
            gridStyle.verticalLinesHidden = true
            gridStyle.verticalFill = TKSolidFill(color: UIColor(red: 0/255, green: 128/255, blue: 128/255, alpha: 1.0))
            gridStyle.verticalAlternateFill = TKSolidFill(color: UIColor(red: 173/255, green: 216/255, blue: 230/255, alpha: 1.0))


           // chart.reloadData()
                Cell4!.addSubview(chart)
            chart.xAxis?.style.labelStyle.font = UIFont.systemFontOfSize(4)
            chart.xAxis?.style.labelStyle.textColor = UIColor.redColor()


        }

[Jack]

Hi Megharaj,

I forgot to mention that you have to call the update method of TKChart in this case. Changing axis properties doesn't update TKChart automatically and you should call this method explicitly. Here is how I modified your code:

self.view.addSubview(chart);

chart.xAxis?.style.labelStyle.font = UIFont.systemFontOfSize(4)
chart.xAxis?.style.labelStyle.textColor = UIColor.redColor()

chart .update()

I hope it helps.

Regards,
Jack
Telerik

[Megharaj]

only legends are occupying the space the the pie chart gets shrinked and the values inside are not visible.

is there any way we can avoid this?

either changing the legend font or placing legends at botton one beside other?

 

screen shots attached

[Megharaj]

Hi i used telerik for swift to get the line chart.

i am facing following beutification issues.

 1. y axis line i am not able to see(missing), it is showing only the values on the y-axis?

2. How the increase/decrease the thickness of the lines of line chart ?

3. How to increase / decrease the horizontal lines in the chart?

 

 

Thanks in advance

[Megharaj]

attaching the screen shots

[Megharaj]

How to get the mixed charts in Swifts using telerik charts.

 

Please share the link to create a mixed chart(line and column charts).

similar to attachment

[Adrian]

Hi, Megharaj,

1. To avoid shrinking of the pie in the case where you legend occupies more space you should set a preferred width for the legend container. This can be achieved by setting TKChartLegendConainer's preferredSize property. Please consider the code snippet below:

_chart.legend.container.preferredSize = CGSizeMake(100, 200);

2. To show the y axis line in TKChart you should set the hidden property of TKChartAxisStyle to NO like in the following code snippet:

_chart.yAxis.style.lineHidden = NO;

Please note that this property should be set after you add a series to the chart or you explicitly set the yAxis property. Otherwise the y axis would not exist at this moment.
You can increase or decrease the thickness of the line by setting appropriate stroke to the series:

series.style.stroke = [TKStroke strokeWithColor:[UIColor redColor] width:3.0];

To make change the thickness of the horizontal grid lines you should set the stroke width of the horizontalStroke and horizontalAlternateStroke properties of TKChartGridStyle:

_chart.gridStyle.horizontalLineStroke.width = 3;
_chart.gridStyle.horizontalLineAlternateStroke.width = 3;

3. To create a chart with several series like in the screenshot you should simply create the series with the corresponding data and add it to the chart. Please consider the code snippet:

TKChartLineSeries *lineSeries = [[TKChartLineSeries alloc] initWithItems:lineData];
TKChartColumnSeries *columnSeries = [[TKChartColumnSeries alloc] initWithItems:columnData];
TKChartColumnSeries *secondColumndSeries = [[TKChartColumnSeries alloc] initWithItems:secondColumnData];

[_chart addSeries:columnSeries];
[_chart addSeries:secondColumndSeries];
[_chart addSeries:lineSeries];

I hope this helps. Should you have further questions do not hesitate to contact us.

Regards,
Adrian
Telerik

[Megharaj]

Thanks Adrian,

 

There is a gap in understanding the below question.

To make change the thickness of the horizontal grid lines you should set the stroke width of the horizontalStroke and horizontalAlternateStroke properties of TKChartGridStyle:
_chart.gridStyle.horizontalLineStroke.width = 3;
_chart.gridStyle.horizontalLineAlternateStroke.width = 3;

The actual question was, how can i change the width of trend chart lines in red and blue color (see screen shot attached)

[Megharaj]

how to display the values on each column / bars, and how to set the font of the Values we set in Column , line

and bar charts of telerik

[Adrian]

Hello, Megharaj,

1. The width of the line in TKChartLineSeries can be changed by setting a TKStroke with the desired width. You can find a code snippet that shows how to do this in the second point of my previous response.

2. If you need to show point labels in a series in TKChart you should set the textHidden property of TKChartPointLabelStyle to NO like in the code snippet below:

series.style.pointLabelStyle.textHidden = NO;

The font can be set by using the font property of the same class:

series.style.pointLabelStyle.font = [UIFont systemFontOfSize:15];

You can read more about point label customization in TKChart in our documentation.

Could you please open a separate thread for questions that are not related to each other. This way we will be able to respond faster. Thank you for your cooperation.

I hope this helps. If you need further assistance do not hesitate to contact us.

Regards,
Adrian
Telerik

[Megharaj]

Please have a look at the attached image. i need to do following changes. 

 1. The values which we are showing on each bar will be shown half on the bar and half outside the bar.

    i was planning to show 49 but only 4 is visible bcoz other digit ("9") is showing outside the bar is not visible. 

please suggest a way to show the value of the bar outside the bar

 

2.

 

[Megharaj]

please have a look at the attached chart image

2. the x axis values are showing in decimal points like 9.8, 19.6,29.4 ..... like that

how to avoid showing the decimal values for x and y axis line items

[Megharaj]

Please find the attached images and answer my doubts 

1.how to add the heading(Titles) for the chart.

2.how to set the font size of the legends 

[Adrian]

Hello, Megharaj,

1. To make the point labels render above the bars you should use the labelOffset property of TKChartPointLabelStyle.

barSeries.style.pointLabelStyle.labelOffset = UIOffsetMake(15, 0);

You can also read this in our documentation.
When the bar's value reaches the end of the x axis and there is not enough space for the point label it will be automatically rendered below the bar.

2. To make the x axis show decimal values instead of floating point values you should set its majorTickInterval property:

xAxis.majorTickInterval = @5;

You can also find an example in our documentation.

3. To set title to TKChart you should use its title property. Please refer to our documentation, where you could find a code snippet that shows how to achieve this.

4. To change to font size of an item in the legend you should adopt TKChartDelegate protocol and implement its chart:updateLegendItem:forSeries:atIndex: method:

- (void)chart:(TKChart *)chart updateLegendItem:(TKChartLegendItem *)item forSeries:(TKChartSeries *)series atIndex:(NSUInteger)index
{
    item.style.labelStyle.font = [UIFont systemFontOfSize:22];
}

I hope this helps.

Regards,
Adrian
Telerik

[Megharaj]

how do i pass array of strings to legends of stack chart?

In the attached image u can notice . for legends it is taking series 1, series 2 and series 3 strings by default.

[Megharaj]

yAxis.majorTickInterval = 25 or chart.yAxis.majorTickInterval = 25

 i tried using the same line from your post,  but there is a error message the system is showing as there is no member MajorTickInterval"

[Megharaj]

please find the attached image of the chart.

 

y axis title is displaying in horizontal fashion and it will push the chart to the right if the strings become bigger.

is there a way we can disply the y axis title in vertical fashion

[Adrian]

Hello, Megharaj,

1. TKChart uses the titles of its series when creating the legend. If you want to use different name in the legend you should change the series title:

series.title = @"My Series";

2. majorTickInterval is available in all axes, however in some of the it is read only. TKChartAxis is the base class for all axes in TKChart and it does not have such property. Can you confirm that you are trying to use this property with one of its subclasses?

3. To display the title of the axis vertically you should set the rotationAngle property of TKChartAxisTitleStyle to 90 degrees which is π / 2 radians:

_chart.yAxis.style.titleStyle.rotationAngle = -M_PI_2;

Posting different questions in the same thread could slow down our response time. Could you, please open a separate ticket for each different question. This way we will be able to optimize our support process and you will get response quicker. Thank you for your understanding.

Regards,
Adrian
Telerik

[Megharaj]

Any way to put the data labels on the pie chart outside the pie (maybe with leader lines)?  The smaller sections of pie make the data labels overlap and make them very hard to read.

 

Similar to the image attached.

[Megharaj]

Please share the codes to show Leader lines to show the data for pie charts instead of legends..., for swift.

 

Awaiting for your response

[Adrian]

Hello, Megharaj,

Posting different questions in the same thread could slow down our response time. Could you, please open a separate ticket for each different question. This way we will be able to optimize our support process and you will get response quicker.

You can draw the point labels of the pie series outside the slices by setting the labelDisplayMode of TKChartPieSeries to TKChartPieSeriesLabelDisplayModeOutside and the setting appropriate label offset:

series.labelDisplayMode = TKChartPieSeriesLabelDisplayMode.Outside
series.style.pointLabelStyle.labelOffset = UIOffsetMake(10, 0)

I hope this helps.

Regards,
Adrian
Telerik

[Bhushan]

How can i set the gap between legend of pai chart in swift 2

[Adrian]

Hello, Bhushan,

Thank you for writing.

To change the gap between legend items in TKChart you should use the itemSpacing property of the legend's stack layout. Consider the code snippet below:

pieChart.legend.container.stack.itemSpacing = 15

I hope this helps.

Regards,
Adrian
Telerik

[Megharaj]

Please find the attached images and let me know 

Can i assign my own colors to the trend / mixed charts items in the chart.

 also font

[Adrian]

Hello, Megharaj,

Thank you for writing.

Please open separate threads for your requests. This would make it easier for us to track it and to respond faster. Yes, you can change the default colors for your series. This is described in the Custom Drawing article in our documentation. There you will find code snippets that show how to achieve this.
I assume that you need to change the font of the point labels. You can find an example in this article in our documentation.

I hope this helps.

Regards,
Adrian
Telerik