How to cut highlight in iOS Charts only up to the data point?

Question

How can I customize the highlighter in Line Charts? I want to cut the highlight to be drawn only up to the data point. I also want to customize the label on the x-axis where it's highlighted. Below is a reference picture on what I'm trying to achieve.

This is what I've done so far. What I've achieved so far

Below is the code for my Line Chart View Setup

let lineChartView: LineChartView = {
    let chart = LineChartView(frame: .zero)
    chart.chartDescription = nil
    chart.dragEnabled = true
    chart.scaleYEnabled = false
    chart.scaleXEnabled = true
    chart.pinchZoomEnabled = false
    chart.drawGridBackgroundEnabled = true
    chart.gridBackgroundColor = .clear
    chart.legend.enabled = false
    chart.zoom(scaleX: 2, scaleY: 1, x: 0, y: 0)
    chart.setViewPortOffsets(left: 30, top: 30, right: 30, bottom: 30)

    chart.rightAxis.enabled = false

    let yAxis = chart.leftAxis
    yAxis.enabled = true
    yAxis.drawAxisLineEnabled = false
    yAxis.drawLabelsEnabled = false
    yAxis.gridColor = UIColor(rgba: "#414042")
    yAxis.gridLineWidth = 1
    yAxis.axisMaximum = 6000

    chart.xAxis.enabled = true
    chart.xAxis.drawGridLinesEnabled = false
    chart.xAxis.drawLabelsEnabled = true
    chart.xAxis.drawAxisLineEnabled = true
    chart.xAxis.axisLineColor = .darkGray
    chart.xAxis.axisLineWidth = 1
    chart.xAxis.valueFormatter = IndexAxisValueFormatter(values: ["Jan", "Feb", "Mar", "April", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"])
    chart.xAxis.labelPosition = .bottom
    chart.xAxis.labelTextColor = .darkGray
    chart.xAxis.labelFont = UIFont.sourceSansProLight(withSize: 15.5)
    chart.xAxis.granularityEnabled = true
    chart.xAxis.granularity = 1

    chart.highlightPerTapEnabled = false

    chart.backgroundColor = .clear

    return chart
}()

And this is the code for adding random data points in the chart and the highlight.

var values: [ChartDataEntry] = []
var highlight: Highlight? = nil

for index in 0..<12 {
    let randomValue = Double(arc4random_uniform(5000))
    values.append(ChartDataEntry(x: Double(index), y: randomValue))

    if index == 4 {
        highlight = Highlight(x: Double(index), y: randomValue, dataSetIndex: 0)
    }
}

let dataSet = LineChartDataSet(values: values, label: "")
dataSet.highlightEnabled = true
dataSet.drawHorizontalHighlightIndicatorEnabled = false
dataSet.highlightColor = UIColor(rgba: "#1899FF")
dataSet.highlightLineWidth = 1
dataSet.mode = .horizontalBezier
dataSet.circleColors = Array(repeating: UIColor(rgba: "#1899FF"), count: 12)
dataSet.fillColor = UIColor(rgba: "#1899FF")
dataSet.drawCircleHoleEnabled = false
dataSet.drawFilledEnabled = true
dataSet.lineWidth = 0.0
dataSet.drawValuesEnabled = true
dataSet.axisDependency = .left
dataSet.valueFormatter = self

let data = LineChartData(dataSet: dataSet)
data.setDrawValues(true)
data.setValueFont(UIFont.sourceSansProLight(withSize: 15.5))
data.setValueTextColor(UIColor(rgba: "#1899FF"))

lineChartView.data = data
lineChartView.highlightValue(highlight)

The question is to broad. Why have you not posted the code you already have? What have you tried? — Bjørn, Jul 05 '17 at 08:13
oh, I thought I got my question right. I'll add a reference screenshot on what I've already done and some code. But basically, I just need to make the x-axis label Bold and with a different color if it's part of the highlighted point and I have to cut the highlight line only up to the data point. — taki, Jul 06 '17 at 02:55
in the _drawHighlightLines_ function in whichever chart you're using LineScatterCandleRadarRenderer.swift for me), change the line `context.move(to: CGPoint(x: point.x, y: viewPortHandler.contentTop))` to `context.move(to: CGPoint(x: point.x, y: viewPortHandler.contentTop + point.y - offsetOfMarkerToHighlightLine))` — Adam, May 11 '18 at 19:19

CodeChanger · Answer 1 · 2017-07-06T05:29:48.370

For Highlight Area of data point you can use below property and achieve this

All property can use through dataSet so for that you can create LineChartDataSet like below and use different property as per your requirement.

//DataSet
LineChartDataSet *set = [[LineChartDataSet alloc] initWithValues:values label:@"closed"];
set.lineWidth = 2;

Set ChartFill property with your fill color :

 set.fill = [ChartFill fillWithColor:<Your Legend Color>];
 [set setColor:<Your Legend Color>];
 [set setCircleColor:<Your Legend Color>];
 [set setCircleHoleColor:<Your Legend Color>];

You need to enable drawfill :

set.drawFilledEnabled = YES;

You can Enable circle with this property :

[set setDrawCirclesEnabled:YES];

You can enable highlight Indicator which dat point is selected will highlight with Vertical Line :

[set setDrawHighlightIndicators:YES];

You can set Circle radius as per your requirement :

[set setCircleRadius:5.0f];
[set setCircleHoleRadius:4.0f];

You can specify line with of highlighted data point also :

[set setHighlightLineWidth:1.0];
[set setHighlightColor:kAppLegend3GraphColorForCAP];

Edit:

for changing font color & type you need to change xAxis color and font as mention below

lineChartView.xAxis.labelFont = UIFont.systemFont(ofSize: 20.0, weight: UIFontWeightRegular)
lineChartView.xAxis.labelTextColor = .orange

For Line limit to data point value I think we can not limit this in current version.

Hope this will help you to achieve your requirement.

Sorry, updated my question. I just needed to customize the hightlight line and change the font style of the x-axis label if it's x value is highlighted — taki, Jul 06 '17 at 03:30
ok so for xAxis color you can make it bold and and custom font and color but for limit datapoint line I think its not possible. — CodeChanger, Jul 06 '17 at 05:30
I think thats not possible in current library but still you can search or try your self hope you will get nay success on this point. — CodeChanger, Jul 07 '17 at 06:58

How to cut highlight in iOS Charts only up to the data point?

1 Answers1