Display the data in pie Chart - LWC

Question

Trying to display the data in Chart.

First trying with some hardcoded values to display the data in Pie/bar chart.

The view of the Chart is Fullscreen, trying to accomplish in small Place. Removed width and height in canvas tag still it's showing in full screen.

Checked in my inspect element, when i load the chart style="width: 1869px; height: 934px;" following style has been added.

HTML

 <div class="slds-box slds-theme_default custom-background">
            <!-- <canvas width="400" height="400" lwc:dom="manual"></canvas> -->
            <canvas lwc:dom="manual"></canvas>
        </div>

JS

chartJSLoaded;
  chart;

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

  renderedCallback() {
    // alert("rendered");
    if (!this.chartJSLoaded) {
      // alert("chartJSLoaded" + this.chartJSLoaded);
      loadScript(this, ChartJS)
        .then(() => {
          this.chartJSLoaded = true;

          this.buildChart();
        })
        .catch((error) => {
          this.dispatchEvent(
            new ShowToastEvent({
              title: "Error Loading Chart JS",
              message: error.message,
              variant: "error"
            })
          );          
        });
    }
  }

  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: {
        legend: {
          position: "top",
          padding: 10
        },
        scales: {
          xAxes: [
            {
              beginAtZero: true,
              ticks: {
                autoSkip: false
              }
            }
          ]
        },
        responsive: true
      }
    });
  }

Answer 1

Tried by adding another div on top of the div, Solved the issue.

<div class="slds-box slds-theme_default custom-background" style="position: relative; height:40vh; width:40vw"> 
      <div class="slds-box slds-theme_default custom-background">
            <canvas lwc:dom="manual"></canvas>
        </div>
</div>