title: Grouped Stacked Bar/Column Chart with Chartkick on Ruby on Rails
body: <p>I have two datasets containing data gathered automatically by AI and another data gathered manually by humans. I currently display these into two separate column charts using <a href="https://github.com/ankane/chartkick" rel="nofollow noreferrer">Chartkick for Rails</a>:</p>
  
  <p><a href="https://i.stack.imgur.com/9E5Il.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9E5Il.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/NFTWB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NFTWB.png" alt="enter image description here"></a></p>
  
  <p>As shown above, the AI data is displayed as a stacked column chart that shows the breakdown of the confirmed, rejected, and unverified data because we still do confirmation checks to see the accuracy of our AI while the Human Operated Data is displayed as is, hence, no need to use a stacked column chart.</p>
  
  <p>Now, what I want to achieve is to display the AI and Human Operated Data side by side (grouped), while maintaining the stacked property of the AI Data. So it should look like this:</p>
  
  <p><a href="https://i.stack.imgur.com/uqATw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uqATw.png" alt="enter image description here"></a></p>
  
  <p>The code that I currently have for the two separate charts are:</p>
  
  <p><code>controller</code></p>
  
  <pre><code># Data for Stacked Column Chart
  @ai_operated_data = [
    {
       name: "Confirmed",
       data: PotentialViolator.where(confirmation_status: 1).group_by_week(:capture_time).count
    },
    {
       name: "Rejected",
       data: PotentialViolator.where(confirmation_status: 0).group_by_week(:capture_time).count
    },
    {
       name: "Unverified",
       data: PotentialViolator.where(confirmation_status: -1).group_by_week(:capture_time).count
    }
  ]
  
  # Data for Single Column Chart
  @human_operated_data = [
    {
       name: "Human Operated Data",
       data: ManuallyCaughtViolator.group_by_week(:capture_time).count
    }
  ]
  </code></pre>
  
  <p><code>view</code></p>
  
  <pre><code>&lt;div class="ui container"&gt;
      &lt;h1&gt;Performance Analytics&lt;/h1&gt;
      &lt;div class="ui divider"&gt;&lt;/div&gt;
        &lt;%= column_chart @ai_operated_data, stacked: true %&gt;
        &lt;%= column_chart @human_operated_data %&gt;
  &lt;/div&gt;
  </code></pre>