SwiftChart with secondary Y Axis

Question

Created Dec ’23

Replies 1

Boosts 0

Participants 2

I created a SwiftChart as below and I would like to have two YAxis, one for amount and the second for count. So, the amount YAxis is a different scale then the count YAxis. Does anybody have an example of this or shed some light on coding two different YAxis?

Thanks

                                ForEach(seriesArt) { series in
                                    ForEach(series.chartSeries.chartEntry) {
                                        BarMark(
                                            x: .value("Tier", $0.tier),
                                            y: .value("Price", $0.keyValue)
                                        )
                                    }
                                    .foregroundStyle(by: .value("Count", series.chartCategory))
                                    .position(by: .value("Price", series.chartCategory))
                                }                     
                            }
                            .frame(width: 400, height: 200)
                            .chartXAxis   {
                                AxisMarks(position: .bottom, values: .automatic) {
                                    AxisValueLabel()
                                        .foregroundStyle(Color.white)
                                }
                            }
                            .chartYAxis {
                                AxisMarks(position: .leading, values: .automatic) { value in
                                    AxisGridLine(centered: true, stroke: StrokeStyle(lineWidth: 1))
                                    AxisValueLabel() {
                                        if let intValue = value.as(Int.self) {
                                            Text("\(intValue)")
                                                .font(.system(size: 10))
                                                .foregroundColor(.white)
                                        }
                                    }
                                }
                                .chartYAixs - for count sum by tier which needs to be a different scale from the amount YAxis
                                }
                                
                            }
                        }

Boost

Answer 1

simonfromhelix OP

Apr ’24

You can do something like this:

            AxisMarks(position: .leading, values: Array(stride(from: yMin(), through: yMax(), by: 5))){
                            axis in
                AxisTick(stroke: .init(lineWidth: 2.5)).foregroundStyle(.pink)
                    AxisGridLine()
                    AxisValueLabel("\(Int((Double(axis.index)*5) + yMin()))", centered: false)
                        }
            AxisMarks(position: .trailing, values: Array(stride(from: yMin(), through: yMin()+30, by: 5))){
                axis in
                AxisTick(stroke: .init(lineWidth: 2.5)).foregroundStyle(.indigo)
                AxisGridLine()
                AxisValueLabel("\(Int(5*Double(axis.index))+10)", centered: false)
                    
            }
        }

But then you'll need to normalise the values for the second axis hence all the hack code in my AxisValueLabel content.

I don't believe there's a more straight forward solution to your problem currently.

0