Is there some number of data points that are too much for a line chart? I'm loading 609 heart rates here, the first chart is using iOS charts and the 2nd is using SwiftUI Charts. It looks like the spike in the middle (a workout) should be tighter together). Anything I can do to fix this? 🤔

@willdale have you considered adding a trend line or moving average line? I've done this in the past in the iOS Charts lib manually by adding another line with data points that average some number of total points on the chart. For example if I had 100 data points on line 1, line 2 would be constructed using 10 data points (0-10 average = point 1, 11-21 = point 2 etc.).

If you were to incorporate this in the library then maybe add a number to pass in for granularity, i.e. adding a trend line like my example above would pass in maybe the number 10, as in every 10 data points and more granularity might be 5, so that the trend line represented the average of every 5 data points. I think this would be a nice feature to add if not too difficult to incorporate, both for line charts but bar charts and ranged bar charts as well. Thanks for considering!

Sorry, Will. Reopening. Updated to 2.6.1

Using, xAxisLabelsFrom : .chartData(rotation: .degrees(90)), still forces y axis off screen. Using, xAxisLabelsFrom :.chartData(), causes labels to disappear. See two images below. Let me know how I can be of help.

The label text truncates, makes it a little harder to read at a glance as users would have to tap each bar to see the full text. Would be great to have an option to display X-axis labels rotated at n-degrees and showing full text (no truncating)

I noticed in your demo project for a ranged bar chart, you hard code the xAxisLabels xAxisLabels: ["00:00", "12:00", "00:00"] but I would like to load them dynamically from my data points as in xAxisLabelsFrom : .dataPoint(rotation: .degrees(0)) but they aren't showing up. Am I doing something wrong or is this not possible yet? Here is a gist of my code, apologies for the cruft, work in progress...

https://gist.github.com/gesabo/9dc3758cd167544c953953e70a31b4b6

I am experiencing the behavior that y axis labels are starting to be pushed outside the view as I increase the number of data points. 30 datapoints are fine but as I increase beyond 30, the labels begin to be pushed out. Have I hit a limit?

I couldn't find a way to do this yet but it would be nice if you were able to customize the Dot color on a Line Chart in that way that had access to the data so that e.g. on a yAxis of 0-10 3 was red, 5 was yellow, 8 was green etc.

Hi,

first of all: Great Library! It's by far the most flexible out there in pure SwiftUI!

I ran into one issue with the bar chart, that is hopefully easy to fix although I didn't find the right place, yet.

If you have many data points the bars extend the space of the diagram. You can transform the bars as such by giving it a bar width <1 but that leads to huge spaces between the bars (of course). Is there a way to make the entire bars "thinner"?

Examples

Not so many bars

Kind regards!

Environment: SwiftUI via Xcode 12.4

I tried to redisplay the LineChart graph with new data; but additional renderings didn't happen.

One band-aid approach is to launch another LineChart graph in place of the original for the new data. This works; but is totally inefficient for multiple sets of data; and I still can't re-render already-rendered LineCharts(). Which means I have to have a LineChart() for EACH set of chartData.

The data is loaded from a class object and imported via @ObservedObject var dataSource = DataStuff()'s Published var.

Here's the code snippet with two different data sources:

...
 VStack {
                if dataSource.chartData != nil {
                    if graphToggle {
                    LineChart()
                        .touchOverlay(specifier: "%.2f")
                        .yAxisGrid()
                        .xAxisLabels()
                        .yAxisLabels()
                        .headerBox()
                        .legends()
                        .environmentObject(dataSource.chartData!)
                        .frame(minWidth: 300, maxWidth: 900, minHeight: 300, idealHeight: 400, maxHeight: 500, alignment: .center)
                        .padding(.all, 24)
                        .padding(.top, 12)
                    } else {
                        LineChart()
                            .touchOverlay(specifier: "%.2f")
                            .yAxisGrid()
                            .xAxisLabels()
                            .yAxisLabels()
                            .headerBox()
                            .legends()
                            .environmentObject(dataSource.chartData!)
                            .frame(minWidth: 300, maxWidth: 900, minHeight: 300, idealHeight: 400, maxHeight: 500, alignment: .center)
                            .padding(.all, 24)
                            .padding(.top, 12)
                    }
                    Spacer()
                }
                Spacer()
                ...

Do you know how I can reuse this code with fresh data within SwiftUI?

P.S. I tried to create a replacement instance of LineChart() for the new graph; doesn't work:

Button {
                   lineChart = nil
                   lineChart = LineChart()
                   dataSource.loadChartData1()
}

https://user-images.githubusercontent.com/10380669/141681990-d107a625-413c-42b3-9d06-8b23b4e5e73f.mov

Hi Will, I could use some suggestions on this one. Since upgrading devices to ios15, I see an issue with animations redrawing themselves on some charts. There is no animation explicitly provided for the view. Interestingly, I don't see the behavior in the simulator. If I try to turn off the animation using ios15 syntax .animation(nil, value: 0) - there is no impact. If I use the deprecated syntax: .animation(nil). The animation is disabled and doesn't redraw. Any suggestions on where I might go to debug/change this?

When I add a line chart with the touchoverlay enabled into a scrollview, I find that I can only scroll when I start the scroll gesture outside of the chart. Is this expected behavior?

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 there

Thanks for this awesome SDK. I really like it. ❤️ I would like to hear, if there is some way of adding panning-support to a graph? Any plans for it? Any ideas how one would go about it?

Again thanks for the great work 🙌

Using the contain option for the .accessibilityElement(children: ) modifier. with an accessibility label. That way, the first time that the focus moves to one of the elements in the chart, the title of the chart will be announced preceding the accessibility label and value for the bar. Update the bars so it announces the title for the group of the data point instead of the title of the chart every time.

This way, it seems to be a bit less redundant and it provides instead important information, to what legend item corresponds each one of the bars.

Before:

https://user-images.githubusercontent.com/2143610/188285605-f8741f77-77e8-49b0-ad39-76da27dec4fa.MP4

After:

https://user-images.githubusercontent.com/2143610/188285665-944635b8-27b2-4691-b6d6-6614a37e9df1.MP4

Hi, I would like to code a Linechart (one line). In my project, the Y and X data are each an array of double. Regarding the version 1 of SwiftUICharts, it worked find for me. But with the version 2, I don't know how to code Chardata when X & Y data are arrays. Thanks a lot for your help. Jean-Francois