Labels Positioning Issue

[mehroozkhan]

Hi, is there any way i can achieve this output?

I have made it almost work but confused about the labels position above point markers.

Code:

fileprivate struct TemperatureChart: View {
    var chartData : LineChartData
    var body: some View {
        FilledLineChart(chartData: chartData)
            .filledTopLine(chartData: chartData,
                           lineColour: ColourStyle(colour: Color(hex: "8D608E")),
                           strokeStyle: StrokeStyle(lineWidth: 3))
            .pointMarkers(chartData: chartData)
            .xAxisLabels(chartData: chartData)
        
            .modifier(CustomXAxisPOI(data: chartData, markerName: "24°", markerValue: 0))
            .modifier(CustomXAxisPOI(data: chartData, markerName: "22°", markerValue: 1))
            .modifier(CustomXAxisPOI(data: chartData, markerName: "26°", markerValue: 2))
            .modifier(CustomXAxisPOI(data: chartData, markerName: "25°", markerValue: 3))
            .modifier(CustomXAxisPOI(data: chartData, markerName: "27°", markerValue: 4))
            .modifier(CustomXAxisPOI(data: chartData, markerName: "28°", markerValue: 5))
    }
}

struct CustomXAxisPOI: ViewModifier {
    var data: LineChartData
    var markerName: String
    var markerValue: Int
    
    func body(content: Content) -> some View {
        content
            .xAxisPOI(chartData: data,
                      markerName: markerName,
                      markerValue: markerValue,
                      dataPointCount: 6,
                      lineColour: .clear,
                      labelPosition: .center(specifier: "%.2f"),
                      labelFont: .system(size: 18),
                      labelColour: Color(hex: "8D608E"),
                      labelBackground: .clear,
                      padding: 5)
    }
}

and the dataset:

func getTestData() -> LineChartData {
        let data = LineDataSet(dataPoints: [
            LineChartDataPoint(value: 24, xAxisLabel: "Mon", description: "Monday"),
            LineChartDataPoint(value: 22, xAxisLabel: "Tue", description: "Tuesday"),
            LineChartDataPoint(value: 26 , xAxisLabel: "Wed", description: "Wednesday"),
            LineChartDataPoint(value: 25 , xAxisLabel: "Thu", description: "Thursday"),
            LineChartDataPoint(value: 27 , xAxisLabel: "Fri", description: "Friday"),
            LineChartDataPoint(value: 28 , xAxisLabel: "Sat", description: "Saturday")
        ],
                               legendTitle: "Steps",
                               pointStyle: PointStyle(pointSize: 10,
                                                      borderColour: .white,
                                                      fillColour: Color(hex: "8D608E"), lineWidth: 2,
                                                      pointType: .filled,
                                                      pointShape: .circle),
                               style: LineStyle(lineColour: ColourStyle(colours:
                                                                            [Color(hex: "8D608E").opacity(0.30),
                                                                             Color(hex: "8D608E").opacity(0.00)],
                                                                        startPoint: .top,
                                                                        endPoint: .bottom),
                                                lineType: .curvedLine))
        
        let chartStyle = LineChartStyle(
            xAxisLabelPosition  : .bottom,
            xAxisLabelColour    : Color(hex: "8D608E"),
            yAxisLabelColour    : Color.white,
            globalAnimation     : .easeOut(duration: 1))
        
        return LineChartData(dataSets: data, chartStyle: chartStyle)
    }

My main concern is to place the labels above the respective point markers. Tried different DisplayValue values but did not succeeded.

and also can i remove the border line above xAxis Labels?

Any help would be much appreciated. Thanks.