import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend } from 'chart.js'; import { Line } from 'react-chartjs-2'; function HraHero() { ChartJS.register( CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend ); return ( <Line className='bg-white h-3/4 w-full' options={{ responsive: true, plugins: { legend: false }, scales: { x: { ticks: { color: 'orange' }, title: { display: true, text: 'Years of Growth', color: '#00aeef', font: { size: 14 } } }, y: { ticks: { callback: function (value, i) { if (i == 0) { return value + ' k'; } return value + ' Lakhs'; } }, title: { display: true, text: 'Amount Invested', color: '#154d83', font: { size: 14 } }, border: { dash: [6, 4] } } } }} data={{ labels: [ 2022, 2024, 2026, 2028, 2030, 2032, 2034, 2036, 2038, 2040, 2042 ], datasets: [ { data: [0, 2, 3, 5, 10, 15, 20, 25, 30, 35], borderColor: '#f47920', tension: 0.1, pointRadius: '6', pointHoverRadius: '6', pointBackgroundColor: '#00aeef', pointHoverBackgroundColor: '#f47920' } ] }} /> ); } export default HraHero