# Cartesian Charts: Part 3

## Mixed Charts

You can mix charts by using `mixed_charts` or `combo_charts` methods. For example, given that:

```ruby
@total_properties = Property.group_by_week(:created_at).count
```

and

```erb
<% total_series = {
  name: "Total", data: @total_properties
} %>
```

you can do this:

```erb
<%= combo_charts({**options, theme: 'palette4', stacked: false, data_labels: false}) do %>
  <% line_chart(total_series) %>
  <% area_chart(series.last) %>
  <% column_chart(series.first) %>
<% end %>
```

![Example Mixed Charts](https://525227355-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7Oc9R3alHYvIhzZyV9Tu%2Fuploads%2Fgit-blob-dc87c1b0fbe1882e2ebfccfa028b95b8f936ec0a%2Fmixed_charts.gif?alt=media)

## Syncing Charts

You can synchronize charts by using `syncing_charts` or `synchronized_charts` methods. For example:

```erb
<%= syncing_charts(chart: {toolbar: false}, height: 250, style: 'display: inline-block; width: 32%;') do %>
  <% mixed_charts(theme: 'palette4', data_labels: false) do %>
    <% line_chart({name: "Total", data: @total_properties}) %>
    <% area_chart({name: "Active", data: @active_properties}) %>
  <% end %>
  <% area_chart({name: "Active", data: @active_properties}, theme: 'palette6') %>
  <% line_chart({name: "Inactive", data: @active_properties}, theme: 'palette8') %>
<% end %>
```

![Example Syncing Charts](https://525227355-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7Oc9R3alHYvIhzZyV9Tu%2Fuploads%2Fgit-blob-56639a9d7ed47ea876591b3d42c37e39c68d787b%2Fsyncing_charts.gif?alt=media)

## Brush Chart

```erb
<%= area_chart(total_series, {
  **options, chart_id: 'the-chart', xtitle: nil, theme: 'palette2'
}) %>
<%= mixed_charts(brush_target: 'the-chart', theme: 'palette7') do %>
  <% column_chart(series.first) %>
  <% line_chart(series.last) %>
<% end %>
```

![Example Brush Chart](https://525227355-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7Oc9R3alHYvIhzZyV9Tu%2Fuploads%2Fgit-blob-51ae9593f8164ed8785264a11490f586139fc892%2Fbrush_chart.gif?alt=media)

## Annotations

All cartesian charts can have annotations, for example:

```erb
<%= area_chart(series, {**options, theme: 'palette9'}) do %>
  <% x_annotation(value: ('2019-01-06'..'2019-02-24'), text: "Busy Time", color: 'green') %>
  <% y_annotation(value: 29, text: "Max Properties", color: 'blue') %>
  <% point_annotation(value: ['2018-10-07', 24], text: "First Peak", color: 'magenta') %>
<% end %>
```

![Example Area Chart with Annotations](https://525227355-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7Oc9R3alHYvIhzZyV9Tu%2Fuploads%2Fgit-blob-36ec94f89e8bd79635a12646d865b71beeb9d098%2Fchart_with_annotations.gif?alt=media)

## Multiple Y-Axes

There's no fancy shortcut for multiple Y axes yet, but it is allowed. Here is an example for that.

```erb
<% series = [
    {
      name: 'Income',
      type: 'column',
      data: [1.4, 2, 2.5, 1.5, 2.5, 2.8, 3.8, 4.6]
    },
    {
      name: 'Cashflow',
      type: 'column',
      data: [1.1, 3, 3.1, 4, 4.1, 4.9, 6.5, 8.5]
    },
    {
      name: 'Revenue',
      data: [20, 29, 37, 36, 44, 45, 50, 58]
    }
  ]

  xaxis = {
    title: {text: 'Year'},
    categories: [2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016]
  }

  yaxis = [
    {title: {text: "Income"}},
    {
      title: {text: "Operating Cashflow"},
      opposite: true,
      seriesName: 'Cashflow'
    },
    {
      title: {text: "Revenue"},
      opposite: true,
      seriesName: 'Revenue'
    }
  ]
%>
<%= line_chart(series, xaxis: xaxis, yaxis: yaxis) %>
```

![Example Chart with multiple Y-Axes](https://525227355-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7Oc9R3alHYvIhzZyV9Tu%2Fuploads%2Fgit-blob-713053d768bc73c2c0aa1d641859232786443550%2Fchart_with_multiple_y-axes.gif?alt=media)