JSFiddle - React, Tailwind, and code Playground

by jarosciak

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chart Example</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <canvas id="chart"></canvas>
    <script>
        const canvas = document.getElementById('chart');
        canvas.width = window.innerWidth * 0.9;
        canvas.height = window.innerHeight * 0.9;

        const ctx = canvas.getContext('2d');

        const numDays = 10000;

        function generateChartData() {
            const data = [];
            let value = numDays;
            for (let day = 1; day <= numDays; day++) {
                value -= value * 0.002;
                const percentage = ((numDays - value) / numDays * 100).toFixed(2);
                data.push({ x: day, y: value.toFixed(8), p: percentage });
            }
            return data;
        }

        const chart = new Chart(ctx, {
            type: 'line',
            data: {
                datasets: [{
                    label: 'DXN',
                    data: generateChartData(),
                    borderColor: 'rgba(75, 192, 192, 1)',
                    borderWidth: 1,
                    pointRadius: 0,
                    pointHitRadius: 5,
                }],
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    x: {
                        type: 'linear',
                        title: {
                            display: true,
                            text: 'Day',
                        },
                        grid: {
                            borderDash: [2],
                            drawBorder: false,
                        },
                    },
                    y: {
                        title: {
                            display: true,
                            text: 'DXN',
      ...