> For the complete documentation index, see [llms.txt](https://betty-dev.gitbook.io/cutting-edge-swiftui-apps/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://betty-dev.gitbook.io/cutting-edge-swiftui-apps/start-with-charts/bar-mark.md).

# Bar Mark

Swift Charts calls visual elements "marks"

{% tabs %}
{% tab title="Code" %}

<pre class="language-swift" data-overflow="wrap" data-line-numbers><code class="lang-swift"><strong>// We add a tabBar
</strong><strong>// then we build a `BarMark` with 2 elements
</strong><strong>
</strong><strong>import Charts
</strong>import SwiftUI

struct ContentView: View {
    @State private var selection = 2
    
    var body: some View {
        TabView(selection: $selection) {
            WinesTab()
                .tabItem {
                    Label("Wines", systemImage: "chart.bar.doc.horizontal")
                }
                .tag(1)
        }
    }
}

struct WinesTab: View {
    var body: some View {
        Chart {
            BarMark (
                x: .value("Name", "Margaux"),
                y: .value("Sales", 900)
            )
            BarMark(
                x: .value("Name", "Médoc"),
                y: .value("Sales", 460)
            )
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

</code></pre>

{% endtab %}
{% endtabs %}