In this post, I’ll show you how to add an interactive investment chart to your Elementor pages using simple JavaScript and HTML. The code snippet below lets you visualize returns, compare values over time, and easily customize the chart to match your website’s style—without needing a complex plugin.
Live example
Investment Chart HTML
<div style="width: 100%; max-width: 1200px; margin: 0 auto; font-family: Arial, sans-serif;">
<h2 style="text-align: center; color: #1a365d; margin-bottom: 2rem;">
Calculation Example: Child Benefit with a 250€ Savings Rate
</h2>
<canvas id="investmentChart"></canvas>
</div>
Investment Chart JavaScript
<!-- Include Chart.js from CDN -->
<script data-minify="1" src="https://mojibur.com/wp-content/cache/min/1/npm/chart.js?ver=1762621831" 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>
