title: ApexCharts barchart grouping the series of dataset per year on VueJS?
body: <p>I am mapping a dataset that is from an API request, and with the following data I have grouped it by <strong>year</strong>. Under the specific year, it has object values with <strong>total enrollees</strong>, <strong>academic year</strong>, and <strong>academic semester</strong>. Finally, it would somehow look like this sample bar graph below:
  <br/><br/><br/>
  <a href="https://i.stack.imgur.com/Zt9Ej.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Zt9Ej.png" alt="sample group by year bar graph" /></a></p>
  <p>I have already looked at the documentation <a href="https://apexcharts.com/javascript-chart-demos/column-charts/distributed/" rel="nofollow noreferrer">ApexChart Distributed Columns</a>, and have some issues on how to implement it the same as the required bar graph on top.</p>