Post not yet marked as solved
Hi,
I use a barmark/linemark SwiftUI chart in my app and when i want to change the fontsize and color of the AxisValueLabel for the x-axis then it does not seem to work properly.
When i set the following:
AxisValueLabel()
.foregroundStyle(.red)
or
AxisValueLabel()
.font(.system(size: 30))
it doesn't show up.
Kind regards,
Tom
Post not yet marked as solved
Is there a way to have a point mark only come out as a very small circle? I want PointMarks that are basically just 1 point large black dots.
Post not yet marked as solved
I found that can customise the range of the x and y axes. But my problem is that for line marks some data might just be outside the axes range. If I add .clipped to the chart that would limit it, but then it also clips off some of the axis marks.
No Clipping:
With Clipping: you see the green line go over the AxisValueLabel area and the topmost label is clipped off.
One way I can imagine addressing this without enabling clipping is to create an interpolated value for values that are just outside the chart range so that the line ends exactly at the min/max.
I want to draw a chart where I have two line marks (one for each child each) and behind it area marks for percentiles. If I don't add any foregroundStyle then the line marks get connected.
struct GrowthChart: View
{
@ChartContentBuilder
func oneSlice(row: PercentileRow, slice: Slice) -> some ChartContent
{
AreaMark(
x: .value("Day", row.month),
yStart: .value("Max", row.dictionary[slice.startKey]!),
yEnd: .value("Min", row.dictionary[slice.endKey]!)
)
.foregroundStyle(by: .value("Percentile", slice.number))
}
let percentileColors: [Color] = [
.blue.opacity(0.1),
.blue.opacity(0.2),
.blue.opacity(0.3),
.blue.opacity(0.4),
.blue.opacity(0.5),
.blue.opacity(0.4),
.blue.opacity(0.3),
.blue.opacity(0.2),
.blue.opacity(0.1)
]
var body: some View
{
VStack {
Chart {
ForEach(percentiles.rows) { row in
ForEach(slices) { slice in
oneSlice(row: row, slice: slice)
}
}
ForEach(children) { child in
ForEach(child.data) { dataPoint in
LineMark(
x: .value("Month", dataPoint.month),
y: .value("Height", dataPoint.height)
)
.foregroundStyle(by: .value("Name", child.name))
}
}
}
.chartForegroundStyleScale(
range: Gradient (colors: percentileColors)
)
.aspectRatio(contentMode: .fit)
.padding()
Spacer()
}.padding()
}
}
I don't understand how to group the individual marks. Apparently you have to add a foregroundStyle to each with a .by specifying a category. I found this chartForegroundStyleScale in an example on the internet, but I can only get it to show this gradient. But how do I specify different colors for the LineMarks?
Post not yet marked as solved
Hi!
I want to use the new SwiftUI Charts (iOS 16) in my app and it seems that the orientation does not work. I want to make the AxisLabels vertical oder verticalReversed or give it a certain angle but all three methods don't seem to work.
AxisMarks() { _ in
AxisValueLabel(orientation: .angle(Angle.degrees(45.0)))
}
}
Am i doing something wrong or is it a bug in the beta framework?
Kind regards,
Tom
Working through the new Swift Chart framework and I am noticing LineMark does not seem to want to respect .foregroundStyle(.pink) (or any respective color) for more than one line.
Apple's own Chart page lists an example that, when copied into Xcode 14 (beta 1) it does not render in preview as it does in their screenshot
Data used:
struct ProfitOverTime {
var week: Int
var profit: Double
}
let departmentAProfile: [ProfitOverTime] = [
.init(week: 1, profit: 21.5),
.init(week: 2, profit: 19.2),
.init(week: 3, profit: 18.4),
.init(week: 4, profit: 21.0),
.init(week: 5, profit: 19.7),
.init(week: 6, profit: 14.7),
.init(week: 7, profit: 22.1),
.init(week: 8, profit: 18.0)
]
let departmentBProfile: [ProfitOverTime] = [
.init(week: 1, profit: 5.7),
.init(week: 2, profit: 12.0),
.init(week: 3, profit: 11.9),
.init(week: 4, profit: 18.0),
.init(week: 5, profit: 15.9),
.init(week: 6, profit: 16.7),
.init(week: 7, profit: 12.1),
.init(week: 8, profit: 19.0)
]
Content View:
struct ContentView: View {
var body: some View {
Chart {
ForEach(departmentAProfile, id: \.week) {
LineMark(
x: .value("Week", $0.week),
y: .value("Profit A", $0.profit)
).foregroundStyle(.green)
}
ForEach(departmentBProfile, id: \.week) {
LineMark(
x: .value("Week", $0.week),
y: .value("Profit B", $0.profit)
)
.foregroundStyle(.green)
}
RuleMark(
y: .value("Threshold", 20.0)
)
.foregroundStyle(.teal)
}
}
}
Produces
Post not yet marked as solved
A lot of time when you plot a chart (say a bar chart here) for business you wants to emphasize the small variation between data, say daily you have roughly 5 millions messages sent but you need to visualize the 3k variations common each days. To utilize the landscape it's best for one to visualize not from zero but zooming in between 4.9m ~ 5.2m range instead of showing a slightly wiggling line.
While we could likely (I haven't get to it) to customize our chart to do that it'd be a good and handy option for the standard charts and Swift Chart would auto-adjust the range.
On top of it, being able to add standard axis break symbols would be a great help to keep it visualized and keep the chart honest.
lindijones.
