[Bug]: Subtitle is not drawn

[athanhat]

Would you like to work on a fix?

• Check this if you would like to implement a PR, we are more than happy to help you go through the process.

Current and expected behavior

In the following Svelte component code the legend of an horizontal barchart is displayed with the registered Title but the registered SubTitle does not appear on the graph

<script lang="ts">
    // @ts-nocheck
    import { Bar } from "svelte-chartjs";
    import {
        Chart,
        Title,
        SubTitle,
        Tooltip,
        Legend,
        BarElement,
        CategoryScale,
        LinearScale,
    } from "chart.js";

    const data = {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [
            {
                label: "% of Votes",
                data: [12, 19, 3, 5, 2, 3],
                backgroundColor: [
                    "rgba(255, 134,159,0.4)",
                    "rgba(98,  182, 239,0.4)",
                    "rgba(255, 218, 128,0.4)",
                    "rgba(113, 205, 205,0.4)",
                    "rgba(170, 128, 252,0.4)",
                    "rgba(255, 177, 101,0.4)",
                ],
                borderWidth: 4,
                borderColor: [
                    "rgba(255, 134, 159, 1)",
                    "rgba(98,  182, 239, 1)",
                    "rgba(255, 218, 128, 1)",
                    "rgba(113, 205, 205, 1)",
                    "rgba(170, 128, 252, 1)",
                    "rgba(255, 177, 101, 1)",
                ],
            },
        ],
    };

    const options = {
        responsive: true,
        maintainAspectRatio: false,

        indexAxis: "y",

        scales: {
            y: {
                grid: {
                    display: false,
                },
                position: "right",
            },
        },

        plugins: {
            legend: {
                display: true,
                title: {
                    display: true,
                    text: "This is the title",
                },
                subtitle: {
                    display: true,
                    text: "This is the subtitle",                    
                },
            },
        },
    };

    Chart.register(
        Title,
        SubTitle,
        Tooltip,
        Legend,
        BarElement,
        CategoryScale,
        LinearScale
    );
</script>

<article>
    <h3>chart.js horizontal barchart</h3>
    <div id="chart-container">
        <Bar {data} {options} />
    </div>
</article>

<style>
    #chart-container {
        width: 100%;
        height: 800px;
        min-height: 200px;
    }
</style>

Reproduction

https://www.chartjs.org/docs/latest/configuration/subtitle.html

chart.js version

4.3.0

svelte-chartjs version

3.1.2

Possible solution

No response

[niemyjski]

Can you please submit a pr for this.