Investment Chart using JavaScript and HTML for Elementor

				
					<!-- Include Chart.js from CDN -->
<script data-minify="1" src="https://mojibur.com/wp-content/cache/min/1/npm/chart.js?ver=1731167046" data-rocket-defer defer></script>

<script>
let chart;

function initializeChart() {
    const ctx = document.getElementById('investmentChart').getContext('2d');
    chart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: [],
            datasets: [
                {
                    label: 'Savings account',
                    data: [],
                    borderColor: 'rgb(255, 99, 132)',
                    backgroundColor: 'rgba(255, 99, 132, 0.1)',
                    fill: true,
                    tension: 0.4
                },
                {
                    label: 'Brokerage account',
                    data: [],
                    borderColor: 'rgb(255, 205, 86)',
                    backgroundColor: 'rgba(255, 205, 86, 0.1)',
                    fill: true,
                    tension: 0.4
                },
                {
                    label: 'Invest4Kids concept',
                    data: [],
                    borderColor: 'rgb(75, 192, 192)',
                    backgroundColor: 'rgba(75, 192, 192, 0.1)',
                    fill: true,
                    tension: 0.4
                }
            ]
        },
        options: {
            responsive: true,
            interaction: {
                intersect: false,
                mode: 'index'
            },
            plugins: {
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            let label = context.dataset.label || '';
                            if (label) {
                                label += ': ';
                            }
                            if (context.parsed.y !== null) {
                                label += new Intl.NumberFormat('de-DE', {
                                    style: 'currency',
                                    currency: 'EUR'
                                }).format(context.parsed.y);
                            }
                            return label;
                        }
                    }
                }
            },
            scales: {
                x: {
                    title: {
                        display: true,
                        text: 'Periods'
                    }
                },
                y: {
                    title: {
                        display: true,
                        text: 'Value in EUR'
                    },
                    ticks: {
                        callback: function(value) {
                            return new Intl.NumberFormat('de-DE', {
                                style: 'currency',
                                currency: 'EUR',
                                maximumFractionDigits: 0
                            }).format(value);
                        }
                    }
                }
            }
        }
    });
}

function updateChartData(newData) {
    chart.data.labels = newData.labels;
    chart.data.datasets[0].data = newData.savings;
    chart.data.datasets[1].data = newData.brokerage;
    chart.data.datasets[2].data = newData.invest4Kids;
    chart.update();
}

// Initialize the chart
initializeChart();

// Example of how to update the chart data
function exampleUpdateChart() {
    const newData = {
        labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12',13],
        savings: [3000, 6090, 9270, 12542, 15905, 19362, 22912, 26557, 30297, 34132, 38064, 42092,39952],
        brokerage: [3000, 6195, 9590, 13189, 16996, 21017, 25257, 29722, 34418, 39351, 44527, 49952,89952],
        invest4Kids: [3000, 6300, 9909, 13839, 18105, 22722, 27706, 33073, 38841, 45028, 51652, 58733,79952]
    };
    updateChartData(newData);
}

// Call the example update function after a short delay to show the initial empty chart first
setTimeout(exampleUpdateChart, 1000);
</script>