Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to display the value of a chart item when it is pressed #31

Open
acumen1005 opened this issue Apr 15, 2024 · 1 comment
Open

How to display the value of a chart item when it is pressed #31

acumen1005 opened this issue Apr 15, 2024 · 1 comment

Comments

@acumen1005
Copy link

image

i want to display the value of yellow item on the chart the it is pressed。

@MrKrasnov
Copy link

Example:

import SwiftUI
import Charts

struct ContentView: View {
    let data: [Double] = [0.1, 0.3, 0.2, 0.5, 0.4, 0.9, 0.1]
    @State private var hintPosition: CGPoint? = nil
    @State private var hintValue: String? = nil

    var body: some View {
        GeometryReader { geometry in
            ZStack {
                Chart(data: data)
                    .chartStyle(
                        LineChartStyle(.quadCurve, lineColor: .blue, lineWidth: 5)
                    )
                    .frame(height: 300)
                    .gesture(
                        DragGesture(minimumDistance: 0)
                            .onChanged { value in

                                hintPosition = value.location
                                let index = Int((value.location.x / geometry.size.width) * CGFloat(data.count))
                                if index >= 0 && index < data.count {
                                    hintValue = String(format: "Value: %.2f", data[index])
                                } else {
                                    hintValue = nil
                                }
                            }
                            .onEnded { _ in
                                hintPosition = nil
                                hintValue = nil
                            }
                    )

                // Hint
                if let hintPosition = hintPosition, let hintValue = hintValue {
                    VStack {
                        Text(hintValue)
                            .padding(5)
                            .background(Color.white.opacity(0.8))
                            .cornerRadius(8)
                            .shadow(radius: 3)
                            .position(x: hintPosition.x, y: hintPosition.y - 20)
                    }
                }
            }
            .frame(height: 300)
            .padding()
        }
    }
}

I added properties:
@State private var hintPosition: CGPoint? = nil
@State private var hintValue: String? = nil

Used the functionality of GeometryReader and ZStack. Inner Chart i set .gesture

.gesture(
    DragGesture(minimumDistance: 0)
        .onChanged { value in

            hintPosition = value.location
            let index = Int((value.location.x / geometry.size.width) * CGFloat(data.count))
            if index >= 0 && index < data.count {
                hintValue = String(format: "Value: %.2f", data[index])
            } else {
                hintValue = nil
            }
        }
        .onEnded { _ in
            hintPosition = nil
            hintValue = nil
        }
)

To display Hint I used the following

if let hintPosition = hintPosition, let hintValue = hintValue {
    VStack {
        Text(hintValue)
            .padding(5)
            .background(Color.white.opacity(0.8))
            .cornerRadius(8)
            .shadow(radius: 3)
            .position(x: hintPosition.x, y: hintPosition.y - 20)
    }
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants