# Alongside Chartkick

Given:

```erb
<% series = [
  {name: 'Verified', data: @verified_users},
  {name: 'Unverified', data: @unverified_users}
] %>
<% options = {
  legend: 'bottom', title: 'Users Grouped By Week For The Last 1 Year',
  ytitle: 'Users', width: '100%', height: '300px'
} %>
```

## Chartkick (Chart.js) and ApexCharts

```erb
<div style="display: inline-block; width: 48%;">
  <%= area_chart(series, {**options, adapter: 'chartjs'}) %>
</div>
<div style="display: inline-block; width: 48%;">
  <%= apex_area_chart(series, options) %>
</div>
```

![Chartkick (Chart.js) And ApexCharts](https://525227355-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7Oc9R3alHYvIhzZyV9Tu%2Fuploads%2Fgit-blob-25cff08c4c97bafaf3c3aba1eb3f7cb0368a6b78%2Fchartkick-chartjs-and-apexcharts.gif?alt=media)

## Chartkick (Google Charts) and ApexCharts

```erb
<div style="display: inline-block; width: 48%;">
  <%= area_chart(series, {**options, adapter: 'google'}) %>
</div>

<div style="display: inline-block; width: 48%;">
  <%= apex_area_chart(series, options) %>
</div>
```

![Chartkick (Google Charts) And ApexCharts](https://525227355-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7Oc9R3alHYvIhzZyV9Tu%2Fuploads%2Fgit-blob-53b2abe900ed6caa22d0175bad9c0afdce4c9102%2Fchartkick-google-and-apexcharts.gif?alt=media)

## Chartkick (Highcharts) and ApexCharts

```erb
<div style="display: inline-block; width: 48%;">
  <%= area_chart(series, {**options, adapter: 'highcharts'}) %>
</div>

<div style="display: inline-block; width: 48%;">
  <%= apex_area_chart(series, options) %>
</div>
```

![Chartkick (Highcharts) And ApexCharts](https://525227355-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7Oc9R3alHYvIhzZyV9Tu%2Fuploads%2Fgit-blob-f1858ee2ff4b4ffc1f00b4dcd44a503ce015f897%2Fchartkick-highcharts-and-apexcharts.gif?alt=media)