ChartJS Group by Data Series

Question

I have the following table:

Unit     oDev     oTotal
------------------------------
4101     F1       2
4101     F4       1
4101     F6       4
4102     F2       1
4102     F1       7

From the table above, I just create 3 data sources as an array from each field.
Then I tried to create a chart based on it with the following script:

<script type="text/javascript">
  var dataunit = @Html.Raw(Json.Serialize(ViewBag.lUnitId));
  var datanumber = @Html.Raw(Json.Serialize(ViewBag.lDev));
  var datares = @Html.Raw(Json.Serialize(ViewBag.lTotal));
  
  var ctx = document.getElementById('dvChart');
  var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: datanumber,
        datasets: [{
            label: '1401',
            fill: true,
            backgroundColor: 'rgba(255, 50, 50, 0.8)',
            borderColor: 'rgba(255, 50, 50, 1)',
            borderWidth: 1,
            data: datanumber
        }
        ,
        {
            //label: 'JKT',
            fill: true,
            backgroundColor: 'rgba(43, 107, 217, 0.8)',
            borderColor: 'rgba(43, 107, 217, 1)',
            borderWidth: 1,
            data: datares
        }
        ]
    },
    borderWidth: 1,
    options: {
        legend: {
            display: true
        },
        scales: {
            xAxes: [{
                stacked: false,
                barPercentage: 0.8,
                gridLines: {
                    offsetGridLines: true
                }
            }],
            yAxes: [{
                stacked: false,
                ticks: {
                    beginAtZero: true,
                    //stepSize: 2,
                    min: 0
                }
            }]
        }
    }
});

The result is not what I expected. I want to make the bar is grouped by Unit and each bar has a label from oDev column. How can I do that?

Does anyone know how to do that?
Really appreciated.

Thank you.