I’m trying to implement chart in swiftui. It works fine, but the values are not located from the very beginning of the graph, forming voids (marked in purple). How to get rid of them and stretch the line and areamark to the full width?
<code>Chart() {
ForEach(0..<dateStrings.count, id: .self) { index in
let date = parseDate(dateStrings[index]) ?? Date()
let value = values[index]
AreaMark(
x: .value("Date", formatDate(date)),
yStart: .value("Min",rangeStart[index]),
yEnd: .value("Max", rangeEnd[index])
)
.interpolationMethod(.catmullRom)
.foregroundStyle(.green.gradient.opacity(0.25))
LineMark(
x: .value("Date", formatDate(date)),
y: .value("Count", value)
)
.interpolationMethod(.catmullRom)
.symbol {
Circle()
.fill(Color.green)
.frame(width: 12, height: 12)
.offset(y: 0)
}
}
}
.chartYAxis {
AxisMarks()
}
.chartXAxis {
AxisMarks(values: .automatic) { value in
AxisGridLine()
AxisTick()
AxisValueLabel() {
if let date = value.as(String.self) {
Text(date)
.font(.system(size: 7)) // Adjust the font size here
}
}
}
}
</code>
<code>Chart() {
ForEach(0..<dateStrings.count, id: .self) { index in
let date = parseDate(dateStrings[index]) ?? Date()
let value = values[index]
AreaMark(
x: .value("Date", formatDate(date)),
yStart: .value("Min",rangeStart[index]),
yEnd: .value("Max", rangeEnd[index])
)
.interpolationMethod(.catmullRom)
.foregroundStyle(.green.gradient.opacity(0.25))
LineMark(
x: .value("Date", formatDate(date)),
y: .value("Count", value)
)
.interpolationMethod(.catmullRom)
.symbol {
Circle()
.fill(Color.green)
.frame(width: 12, height: 12)
.offset(y: 0)
}
}
}
.chartYAxis {
AxisMarks()
}
.chartXAxis {
AxisMarks(values: .automatic) { value in
AxisGridLine()
AxisTick()
AxisValueLabel() {
if let date = value.as(String.self) {
Text(date)
.font(.system(size: 7)) // Adjust the font size here
}
}
}
}
</code>
Chart() {
ForEach(0..<dateStrings.count, id: .self) { index in
let date = parseDate(dateStrings[index]) ?? Date()
let value = values[index]
AreaMark(
x: .value("Date", formatDate(date)),
yStart: .value("Min",rangeStart[index]),
yEnd: .value("Max", rangeEnd[index])
)
.interpolationMethod(.catmullRom)
.foregroundStyle(.green.gradient.opacity(0.25))
LineMark(
x: .value("Date", formatDate(date)),
y: .value("Count", value)
)
.interpolationMethod(.catmullRom)
.symbol {
Circle()
.fill(Color.green)
.frame(width: 12, height: 12)
.offset(y: 0)
}
}
}
.chartYAxis {
AxisMarks()
}
.chartXAxis {
AxisMarks(values: .automatic) { value in
AxisGridLine()
AxisTick()
AxisValueLabel() {
if let date = value.as(String.self) {
Text(date)
.font(.system(size: 7)) // Adjust the font size here
}
}
}
}
And initialization:
<code>BsLineChart(
dateStrings: [
"2024-01-03T19:41:01.000Z",
"2024-01-04T19:41:01.000Z",
"2024-01-05T19:41:01.000Z",
"2024-01-06T19:41:01.000Z",
"2024-01-07T19:41:01.000Z",
"2024-01-08T19:41:01.000Z",
"2024-01-09T19:41:01.000Z",
"2024-01-10T19:41:01.000Z"
],
values: [10, 20, 15, 7, 30, 24, 20, 17],
rangeStart: [3, 0, 15, 7, 30, 21, 20, 15],
rangeEnd: [14, 10, 19, 24, 37, 28, 29, 19]
)
</code>
<code>BsLineChart(
dateStrings: [
"2024-01-03T19:41:01.000Z",
"2024-01-04T19:41:01.000Z",
"2024-01-05T19:41:01.000Z",
"2024-01-06T19:41:01.000Z",
"2024-01-07T19:41:01.000Z",
"2024-01-08T19:41:01.000Z",
"2024-01-09T19:41:01.000Z",
"2024-01-10T19:41:01.000Z"
],
values: [10, 20, 15, 7, 30, 24, 20, 17],
rangeStart: [3, 0, 15, 7, 30, 21, 20, 15],
rangeEnd: [14, 10, 19, 24, 37, 28, 29, 19]
)
</code>
BsLineChart(
dateStrings: [
"2024-01-03T19:41:01.000Z",
"2024-01-04T19:41:01.000Z",
"2024-01-05T19:41:01.000Z",
"2024-01-06T19:41:01.000Z",
"2024-01-07T19:41:01.000Z",
"2024-01-08T19:41:01.000Z",
"2024-01-09T19:41:01.000Z",
"2024-01-10T19:41:01.000Z"
],
values: [10, 20, 15, 7, 30, 24, 20, 17],
rangeStart: [3, 0, 15, 7, 30, 21, 20, 15],
rangeEnd: [14, 10, 19, 24, 37, 28, 29, 19]
)