Hi experts :)
I have a barmark chart with 6 bars. It works fine but I want the first 3 bars to be red and the second 3 bars to be green.
Any idea how I do this?
struct Item: Identifiable {
let id = UUID()
let month: String
let visitValue: Int
}
var myItems = [Item]()
let items: [Item] = [
// Highest perfoming Months
Item(month: highestLowestMonths.mthHighestName[0],
visitValue: Int(highestLowestMonths.mthHighestRevenue[0])),
Item(month: highestLowestMonths.mthHighestName[1],
visitValue: Int(highestLowestMonths.mthHighestRevenue[1])),
Item(month: highestLowestMonths.mthHighestName[2],
visitValue: Int(highestLowestMonths.mthHighestRevenue[2])),
// Lowest perfoming Months
Item(month: highestLowestMonths.mthLowestName[0],
visitValue: Int(highestLowestMonths.mthLowestRevenue[0])),
Item(month: highestLowestMonths.mthLowestName[1],
visitValue: Int(highestLowestMonths.mthLowestRevenue[1])),
Item(month: highestLowestMonths.mthLowestName[2],
visitValue: Int(highestLowestMonths.mthLowestRevenue[2])),
]
var body: some View {
Chart {
// High and low monthly performers chart
ForEach(items) { items in
BarMark(
x: .value("Month", items.month),
y: .value("sales Revenue", items.visitValue)
)
.foregroundStyle(.green.opacity(0.8))
RuleMark(
y: .value("xxx", contactAnalyticsDataMonthlyAverages.eaAverageVisitValue)
)
.foregroundStyle(.gray)
.lineStyle(StrokeStyle(lineWidth: 2))
.annotation(position: .top, alignment: .leading)
{
Text("FIXTHIS \(contactAnalyticsDataMonthlyAverages.eaAverageVisitValue, format: .number)")
.font(.system(size: 12, weight: .semibold, design: .rounded))
.foregroundStyle(.blue)
}
}
}
.chartForegroundStyleScale([
"zzz": Color(.green)
])
.chartLegend(position: .top, alignment: .bottomTrailing)
.chartYAxis(.hidden)
// Chart has been tapped. display large version.
.onTapGesture {
print("mob: High and low monthly performers chart tapped")
showLargeChart = true
}
.sheet(isPresented: $showLargeChart) {
summaryChartLarge()
}
}
}