> For the complete documentation index, see [llms.txt](https://a-styd.gitbook.io/apexcharts-ruby/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://a-styd.gitbook.io/apexcharts-ruby/usage/cartesian-charts/part1.md).

# Cartesian Charts: Part 1

**Line Chart**

```erb
<%= line_chart(series, options) %>
```

![Example Line Chart](/files/kkZqo6UK0MbdlhWmqdCK)

**Stepline Chart**

```erb
<%= line_chart(series, {**options, theme: 'palette7', curve: 'stepline'}) %>
```

![Example Stepline Chart](/files/3S9p8wXqaCIgbDT0w0Dw)

**Area Chart**

```erb
<%= area_chart(series, {**options, theme: 'palette5'}) %>
```

![Example Area Chart](/files/pDodmgk1j2DUwp6TDpRA)

**Column Chart**

```erb
<%= column_chart(series, {**options, theme: 'palette4'}) %>
```

![Example Column Chart](/files/0yCCMa1nzFufHLfjV6Ze)

**Bar Chart**

```erb
<%= bar_chart(series, {**options, xtitle: 'Properties', ytitle: 'Week', height: 800, theme: 'palette7'}) %>
```

![Example Bar Chart](/files/q2SaCF3ULzPVduMxlXyx)

**Range Bar Chart**

```erb
<% range_bar_series = [{
      name: "Series A",
      data: {
        'A' => [1, 5],
        'B' => [4, 6],
        'C' => [5, 8],
        'D' => [3, 11]
      }
    }, {
      name: "Series B",
      data: {
        'A' => [2, 6],
        'B' => [1, 3],
        'C' => [7, 8],
        'D' => [5, 9]
      }
  }]
%>

<%= range_bar_chart(range_bar_series, theme: 'palette3') %>
```

![Example Range Bar Chart](/files/jKUEEkkZUsrZwGyu6rIY)