Based on this (https://success.salesforce.com/answers?id=9063A000000pzg0QAA) I have created a chart LWC but I have to always resize my window for the chart to display it correctly. What am I doing wrong? TIA.

Here is the Apex Class 

public with sharing class TestData {
     @AuraEnabled(cacheable=true)
    public static Map<String,Integer> dataForChartSample() {
        
       Map<String,Integer> chartData= new Map<String,Integer>();
       for (integer i =0;i< 10; i++)
       {
           chartData.put(String.valueOf(i),Integer.valueof((math.random() * 10)));
       }
       system.debug(chartData);
       return chartData;
    }
}

Here is the component js 
 

import { LightningElement,wire,track } from "lwc";
import { ShowToastEvent } from "lightning/platformShowToastEvent";
import { loadScript } from "lightning/platformResourceLoader";
import ChartJS from "@salesforce/resourceUrl/ChartJS";
import dataForChart from "@salesforce/apex/TestData.dataForChartSample";


export default class ChartDemo extends LightningElement {
    @track mapData= [];
    cLabel=[];
    cData=[];

    @wire(dataForChart)
    wiredResult(result) { 
        if (result.data) {
            //mapData = [];
            var conts = result.data;
            for(var key in conts){
                this.cLabel.push(key);
                this.cData.push(conts[key]);
            }

        }
    }
    
    chartJSLoaded;
    chart;

    constructor() {
        super();
        this.chartJSLoaded = false;
    }

    renderedCallback() {
        if (!this.chartJSLoaded) {
            loadScript(this, ChartJS)
                .then(() => {
                    this.chartJSLoaded = true;
                    var labels1=this.cLabel;
                    var data1=this.cData;
                    console.log( "This is the Label");
                    console.log(labels1);
                    console.log( "This is the Data");
                    console.log(data1);
                    
                    this._buildChart2(labels1,data1);
                })
                .catch(error => {
                    this.dispatchEvent(
                        new ShowToastEvent({
                            title: "Error Loading Chart JS",
                            message: error.message,
                            variant: "error"
                        })
                    );
                });
        }
    }

    _buildChart2(labels1,data1) {
        let canvas = this.template.querySelector("canvas");
        let context = canvas.getContext("2d");

        this.chart = new window.Chart(context, {
            type: "bar",
            data: {
                labels: labels1,
                datasets: [
                    {
                        label: "# of activations",
                        data: data1,
                        borderWidth: 1
                    }
                ]
            },
            options: {
                scales: {
                    yAxes: [
                        {
                            ticks: {
                                beginAtZero: true
                            }
                        }
                    ]
                }
            }
        });
    }

    _buildChart() {
        let canvas = this.template.querySelector("canvas");
        let context = canvas.getContext("2d");

        this.chart = new window.Chart(context, {
            type: "bar",
            data: {
                labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
                datasets: [
                    {
                        label: "# of Votes",
                        data: [12, 19, 3, 5, 2, 3],
                        backgroundColor: [
                            "rgba(255, 99, 132, 0.2)",
                            "rgba(54, 162, 235, 0.2)",
                            "rgba(255, 206, 86, 0.2)",
                            "rgba(75, 192, 192, 0.2)",
                            "rgba(153, 102, 255, 0.2)",
                            "rgba(255, 159, 64, 0.2)"
                        ],
                        borderColor: [
                            "rgba(255, 99, 132, 1)",
                            "rgba(54, 162, 235, 1)",
                            "rgba(255, 206, 86, 1)",
                            "rgba(75, 192, 192, 1)",
                            "rgba(153, 102, 255, 1)",
                            "rgba(255, 159, 64, 1)"
                        ],
                        borderWidth: 1
                    }
                ]
            },
            options: {
                scales: {
                    yAxes: [
                        {
                            ticks: {
                                beginAtZero: true
                            }
                        }
                    ]
                }
            }
        });
    }
}

component html

<template>
    <div class="slds-theme_default">
        <canvas width="400" height="400" lwc:dom="manual"></canvas>
    </div>
</template>

compoment xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>46.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
      <target>lightning__RecordPage</target>
      <target>lightning__AppPage</target>
      <target>lightning__HomePage</target>
  </targets>
</LightningComponentBundle>