Skip to content

Styling Chart

Roman Baitaliuk edited this page Jul 30, 2020 · 1 revision

Background colour

You can set background colour by using default SwiftUI modifier

.foregroundColor(.white)

Label's Font

You can set labels font for both axes

self.config.labelsCTFont = CTFontCreateWithName(("SFProText-Regular" as CFString), 10, nil)

Note: you need to use CTFont because Font doesn't support attributed string size.

Animation

You can apply nice animation for your chart by using default SwiftUI modifier

BarChartView(config: self.config)
    .onAppear() {
        self.config.data.entries = self.createEntries()
    }
    .animation(.easeInOut)
    .frame(height: 300)

Reactive data changes

You can update your chart reactively by modifying config property

BarChartView(config: self.config)
    .onTapGesture {
        self.config.data.entries = self.createEntries()
    }
    .frame(height: 300)

Drop shadow

If you want to achieve similar drop shadow effect as in the example project. Add shadow modifier in RoundedRectangle and place it with BarChartView to the ZStack.

ZStack {
    RoundedRectangle(cornerRadius: 5)
        .foregroundColor(.white)
        .padding(5)
        .shadow(color: .black, radius: 5)
    BarChartView(config: self.config)
        .onAppear() {
            self.config.data.entries = newEntries
        }
        .padding(15)
}.frame(height: 300)
Clone this wiki locally