Data from JSON is not display in my bar chart ? (Lightning component using chart.js)

Question

Here what I am trying to achieve using chart.js in lightning component,

Data comes properly from JSON but Not display like below image

Here is my apex class method,

@auraEnabled
public static Map<string, List<Decimal>> getChartMap(){

    String response = '{"totalMoneyIn":3425117.9600,"totalMoneyOut":805430.1400,"totalNetAmount":2619687.8200,"totalFee":363082.9400,"startDate":"2019-07-27","endDate":"2019-10-25","groupBy":"WEEKLY","moneyFlows":[{"date":"2019-08-03","moneyIn":693249.1400,"moneyOut":530451.5800,"managementFee":0,"netAmount":162797.5600},{"date":"2019-08-10","moneyIn":105952.5400,"moneyOut":16399.7300,"managementFee":0,"netAmount":89552.8100},{"date":"2019-08-17","moneyIn":58092.8800,"moneyOut":20000.0000,"managementFee":0,"netAmount":38092.8800},{"date":"2019-08-24","moneyIn":53848.3600,"moneyOut":0,"managementFee":0,"netAmount":53848.3600},{"date":"2019-08-31","moneyIn":18720.2900,"moneyOut":33800.0000,"managementFee":0,"netAmount":-15079.7100},{"date":"2019-09-07","moneyIn":30292.4400,"moneyOut":17650.0000,"managementFee":0,"netAmount":12642.4400},{"date":"2019-09-14","moneyIn":242721.2200,"moneyOut":0,"managementFee":0,"netAmount":242721.2200},{"date":"2019-09-21","moneyIn":369297.0000,"moneyOut":26000.0000,"managementFee":0,"netAmount":343297.0000},{"date":"2019-09-28","moneyIn":56065.8900,"moneyOut":23433.1700,"managementFee":0,"netAmount":32632.7200},{"date":"2019-10-05","moneyIn":36258.8900,"moneyOut":38990.0000,"managementFee":0,"netAmount":-2731.1100},{"date":"2019-10-12","moneyIn":127592.5700,"moneyOut":51305.0000,"managementFee":363082.9400,"netAmount":76287.5700},{"date":"2019-10-19","moneyIn":194729.0000,"moneyOut":41000.0000,"managementFee":0,"netAmount":153729.0000},{"date":"2019-10-26","moneyIn":1438297.7400,"moneyOut":6400.6600,"managementFee":0,"netAmount":1431897.0800}]}';

    List<Decimal> listMoneyIn = new List<Decimal>();
    List<Decimal> listMoneyOut = new List<Decimal>();
    List<Decimal> listMgmtFees = new List<Decimal>();
    Map<string, List<Decimal>> tempMP = new Map<string, List<Decimal>>();
    Map<String, Object> m = (Map<String, Object>)JSON.deserializeUntyped(response);
    List<Object> moneyFlows = (List<Object>)m.get('moneyFlows');


    for(Integer i = 0; i<moneyFlows.size(); i++){
        Map<String, Object> mapMoneyFlows = (Map<String, Object>)moneyFlows[i];
        Decimal MoneyIn = (decimal)mapMoneyFlows.get('moneyIn');
        Decimal MoneyOut = (decimal)mapMoneyFlows.get('moneyOut');
        Decimal MgmtFees = (decimal)mapMoneyFlows.get('managementFee');
        listMoneyIn.add(MoneyIn);
        listMoneyOut.add(MoneyOut);
        listMgmtFees.add(MgmtFees);
    }

    tempMP.put('Money In', listMoneyIn);
    tempMP.put('Money Out', listMoneyOut);
    tempMP.put('Management Fees', listMgmtFees);

    return tempMP;
}

Here is my Lightning component,

<aura:attribute name="startDate" type="String"/>
<aura:attribute name="endDate" type="String"/>
<aura:attribute name="totalMoneyIn" type="Integer"/>
<aura:attribute name="totalMoneyOut" type="Integer"/>
<aura:attribute name="totalMgmtFees" type="Integer"/>
<aura:attribute name="past90Days" type="String[]" default="Past 90 Days"/>

<ltng:require scripts="{!$Resource.Chart}" afterScriptsLoaded="{!c.ctr}"/>

<div>
    <table>
        <tr>
            <td>
                <div class="slds-text-heading_large">
                    Money In/Out Past 90 Days 
                    <div class="slds-text-heading_medium">
                        {!v.startDate} - {!v.endDate}
                    </div>
                </div>
            </td>
            <td>
                <div class="slds-text-heading_large">
                    <lightning:select name="select" label="">
                        <aura:iteration items="{!v.past90Days}" var="days">
                            <option text="{!days}"></option>
                        </aura:iteration>
                    </lightning:select>
                    <div class="slds-text-heading_medium">
                    </div>
                </div>
            </td>
        </tr>
    </table>
</div>
<div></div>
<div class="slds-text-heading_medium slds-border_bottom">

    Total In:   <strong>${!v.totalMoneyIn}</strong>

    Total Out:   <strong>${!v.totalMoneyOut}</strong>

    Total Fees:  <strong>${!v.totalMgmtFees}</strong>

</div>

<div class="slds-col slds-size--1-of-1 slds-small-size--1-of-2 slds-medium-size--3-of-4">
    <canvas aura:id="barChart" id="barChart" />
</div>

Here is my Lightning helper class,

({
createGraph : function(cmp, temp) {

    var dataMap = {"chartLabels": Object.keys(temp),
                   "chartData": Object.values(temp)
                   };
    console.log(dataMap);

    var el = cmp.find('barChart').getElement();
    var ctx = el.getContext('2d');

    new Chart(ctx, {
        type: 'bar',
        data: {
            labels: dataMap.chartLabels,
            datasets: [
                {
                    label: "Money In",
                    backgroundColor: "rgb(0,128,255)",
                    data: dataMap.chartData
                },
                {
                    label: "Money Out",
                    backgroundColor: "rgb(0,0,102)",
                    data: dataMap.chartData
                },
                {
                    label: "Management Fees",
                    backgroundColor: "rgb(255,235,0)",
                    data: dataMap.chartData
                }
            ]
        },
        options:{
            responsive:true,
            legend:{
                display:true,
                position:'bottom'              
            }
        }
    });
}
})

Here is my output :