JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <div>
        <canvas id="Line_Chart"></canvas>
    </div>

    <br><hr><br>

    <div>
        <canvas id="Bar_Chart"></canvas>
    </div>

    <br><hr><br>

    <div>
        <canvas id="Pie_Chart"></canvas>
    </div>

CSS

div{
    margin: 0 auto;
    width: 100%;

    border: 5px solid black;
}

hr{
    width: 80%;
}

JavaScript

var Line_Chart = document.querySelector('#Line_Chart');
var Bar_Chart = document.querySelector('#Bar_Chart');
var Pie_Chart = document.querySelector('#Pie_Chart');

//-----------------------------------------------------------------------------

new Chart(Line_Chart, {

    type: 'line',

    data:{
        labels: ['15-19歲', '20-24歲', '25-29歲', '30-34歲', '35-39歲' ,'40-44歲' ,'45-49歲',],
        datasets: [
        {
            label: '110年人數',
            data: [3, 18, 47, 74, 43, 9, 1],
            backgroundColor: ['rgb(255 ,255 ,255)'],
            borderColor: '#FF95CA',
            borderWidth: 5,
            //fill:true,      //下方填滿
            //cubicInterpolationMode:'monotone',   //弧度
            radius:5,
            hitRadius:20,        //移入距離
        },
        {
            label: '87年人數',
            data: [14, 66, 116, 73, 21, 3, 0],
            backgroundColor: ['rgb(255 ,255 ,255)'],
            borderColor: '#84C1FF',
            borderWidth: 5,
            //fill:true,      //下方填滿
            //cubicInterpolationMode:'monotone',   //弧度
            radius:5,
            hitRadius:20,        //移入距離
        }
        ],
    },

    options: {

        scales: {
            y: { // defining min and max so hiding the dataset does not change scale range
              min: 0,
              max: 120,
            }
        },

        plugins: {

            title: {
                display: true,
                text: '育齡婦女生育率',
                font: {
                    size: 50,
                    family: 'DFKai-sb'
                },
            },

            legend: {
                labels: {
                    // This more specific font property overrides the global property
                    font: {
                        size: 20,
                        family: 'DFKai-sb',
                    }
                }
            },

        }

   ...