<svg class="line-chart"></svg>
    <script src="https://cdn.jsdelivr.net/npm/chart.xkcd@1.1/dist/chart.xkcd.min.js"></script>
    <script>
    const svg = document.querySelector('.line-chart')

    const lineChart = new chartXkcd.Line(svg, {
        title: '日本の人口の推移', // optional
        xLabel: '年', // optional
        yLabel: '人工', // optional
        data: {
        labels: ['1980', '1985', '1990', '1995', '2000', '2005', '2010', '2015'],
        datasets: [{
            label: 'Total',
            data: [117060396, 121048923, 123611167, 125570246, 126925843, 127767994, 128057352, 127094745],
        }, {
            label: 'Men',
            data: [57593769, 59497316, 60696724, 61574398, 62110764, 62348977, 62327737, 61841738],
        }, {
            label: 'Women',
            data: [59466627, 61551607, 62914443, 63995848, 64815079, 65419017, 65729615, 65253007],
        }],
        },
        options: { // optional
        yTickCount: 5,
        legendPosition: chartXkcd.config.positionType.upLeft
        }
    });
    </script>