Open mehroozkhan opened 1 year ago
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.
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:
and the dataset:
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.