Pie Chart is not fitting with in Canvas

Expected behavior

The pie chart should fit in the canvas. The pie chart should display the legend at the bottom, it display it at the top The pie chart is not showing the title , when I provided it n the configurations.

How should I display values on the pie chart without having to hover over it.

Current behavior

The pie chart exceeds the canvas The legend is on top when I specified it ot be in the bottom. The title is not appearing

Reproducible sample

I dont have one

Optional extra steps/info to reproduce

This is my code in components.ts

let chartCanvas = document.getElementById('chart-sector') as HTMLCanvasElement;
        let chartData = {
            labels: Array.from(this.sector_data.keys()),
            datasets: [{
                label: 'Reports By Sector',
                data: Array.from(this.sector_data.values()),
                backgroundColor: this.generateRandomColors(_.size(this.sector_data)),
                options: {
                    responsive: false,
                    plugins: {
                        legend: {
                            position: 'bottom',
                        },
                        title: {
                            display: true,
                            text: 'Reports By Sector'
                        }
                    }
                },
            }],
        };

        this.sectorChart = new Chart(chartCanvas.getContext("2d"), {
            type: 'pie',
            data: chartData
        });

This is the code on the html

<div class=" col-md-4">
            <div class=" card">
                <div class=" card-body">
                    <div class=" col-auto">
                        <div class=" chart row">
                            <canvas class=" chart-canvas" id="chart-sector"></canvas>

                        </div>
                    </div>

                </div>
            </div>
        </div>

This is how I imported Chartjs

import { Chart, registerables  } from "chart.js";
Chart.register(...registerables);

This is how my chart appears

Possible solution

No response

Context

No response

chart.js version

v3.9.1

Browser name and version

Chrome 104.0.5112.81 and microsoft edge 104.0.1293.47

Link to your project

No response

[OKELLOMARVIN]

@stockiNail , what was making my other graphs dissapear was something else, so your solution has worked! Thanks

[OKELLOMARVIN]

Got the solution to my probem

 The expected type comes from property 'options' which is declared here on type 'ChartConfiguration<"pie", unknown[], unknown> | ChartConfigurationCustomTypesPerDataset<"pie", unknown[], unknown>'

here: https://stackoverflow.com/questions/67058279/chart-js-types-of-property-type-are-incompatible-type-string-is-not-assigna

let chartCanvas = document.getElementById('chart-sector') as HTMLCanvasElement;
        let chartData = {
            labels: Array.from(this.sector_data.keys()),
            datasets: [{
                label: 'Reports By Sector',
                data: Array.from(this.sector_data.values()),
                backgroundColor: this.generateRandomColors(_.size(this.sector_data)),
            }],
        };
        let chartOptions = {
            responsive: false,
            plugins: {
                legend: {
                    position: 'bottom',
                },
                title: {
                    display: true,
                    text: 'Reports By Sector'
                }
            }
        };

        this.sectorChart = new Chart(chartCanvas.getContext("2d"), {
            type: 'pie',
            data: chartData,
            options: chartOptions
        } as any);

I added as any at the end of th chart creation because TypeScript compiler is complaining because the chart type property is a specific type rather than a string