Bar Chart Not Stacking

I have been trying to adapt this tutorial, How to Use Chart.js with Django, to my AWS billing reports. I want to tweak this graph from the tutorial:

I want to "stack" the costs from the various AWS services for each month, but when I tried to stack the cost I get this chart:

Here is the pertinent code I have written:

monthly_cost/views.py:

from django.shortcuts import renderfrom django.db.models import Sumfrom rest_framework import viewsetsfrom django.http import JsonResponsefrom .models import MonthlyCostReportfrom .serializers import MonthlyCostReportSerializerdef home(request):    return render(request, 'home.html')def product_cost_chart(request):    colors = ['#DFFF00', '#FFBF00', '#FF7F50', '#DE3163', '#9FE2BF', '#40E0D0', '#6495ED', '#CCCCFF', '#9CC2BF','#40E011', '#641111', '#CCCC00']    labels = [label.get('bill_billing_period_start_date').strftime('%Y-%m-%d') for label in              MonthlyCostReport.objects.values('bill_billing_period_start_date').order_by('bill_billing_period_start_date').distinct()]    datasets = []    for i, product_cost_pair in \            enumerate(MonthlyCostReport.objects.filter(bill_billing_period_start_date=labels[0]).values('line_item_product_code').annotate(product_cost=Sum('line_item_blended_cost')).order_by('-product_cost')):        dataset = {'label': product_cost_pair.get('line_item_product_code'),'backgroundColor': colors[i % len(colors)],'data': [pc.get('product_cost') for pc in MonthlyCostReport.objects \                .filter(line_item_product_code=product_cost_pair.get('line_item_product_code')) \                .values('line_item_product_code', 'bill_billing_period_start_date') \                .annotate(product_cost=Sum('line_item_unblended_cost')).order_by('bill_billing_period_start_date')]        }        datasets.append(dataset)    return JsonResponse(data={'labels': labels,'datasets': datasets,    })

templates/home.html

{% block content %}<div id="container" style="width: 75%;"><canvas id="product-cost-chart" data-url="{% url 'product-cost-chart' %}"></canvas></div><script src="https://code.jquery.com/jquery-3.4.1.min.js"></script><script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script><script>    $(function () {      var $productCostChart = $("#product-cost-chart");      $.ajax({        url: $productCostChart.data("url"),        success: function (data) {          console.log(data);          var ctx = $productCostChart[0].getContext("2d");          new Chart(ctx, {            type: 'bar',            data: { labels: data.labels, datasets: data.datasets, },            options: {                plugins: { title: { display: true, text: 'Stacked Bar chart for pollution status' }, },                scales: { x: { stacked: true, }, y: { stacked: true } }            }          });        }      });    });</script>{% endblock %}

My guess is that there is something wrong with my "options" section.

Update

Thanks @kikon for the suggestion. I am now using this line:

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

and the chart now looks like this: