const fullData = [ { x: new Date('2025-04-20'), y: 142.27 }, { x: new Date('2025-04-21'), y: 141.75 }, { x: new Date('2025-04-22'), y: 140.85 }, { x: new Date('2025-04-23'), y: 141.39 }, { x: new Date('2025-04-24'), y: 142.70 }, { x: new Date('2025-04-25'), y: 142.67 }, { x: new Date('2025-04-26'), y: 143.55 }, { x: new Date('2025-04-27'), y: 143.60 }, { x: new Date('2025-04-28'), y: 143.69 }, { x: new Date('2025-05-02'), y: 144.68 }, { x: new Date('2025-05-03'), y: 144.82 }, { x: new Date('2025-05-05'), y: 144.70 }, { x: new Date('2025-05-06'), y: 144.70 }, { x: new Date('2025-05-07'), y: 143.00 }, { x: new Date('2025-05-08'), y: 143.53 }, { x: new Date('2025-05-09'), y: 145.32 }, { x: new Date('2025-05-10'), y: 145.20 }, { x: new Date('2025-05-11'), y: 145.18 }, { x: new Date('2025-05-12'), y: 145.57 }, { x: new Date('2025-05-13'), y: 147.85 }, { x: new Date('2025-05-14'), y: 147.67 }, { x: new Date('2025-05-15'), y: 146.48 }, { x: new Date('2025-05-16'), y: 145.71 }, { x: new Date('2025-05-17'), y: 145.74 }, { x: new Date('2025-05-19'), y: 145.30 }, { x: new Date('2025-05-20'), y: 144.95 }, { x: new Date('2025-05-21'), y: 144.50 }, { x: new Date('2025-05-22'), y: 143.76 }, { x: new Date('2025-05-24'), y: 142.67 }, { x: new Date('2025-05-26'), y: 142.73 }, { x: new Date('2025-05-27'), y: 142.69 }, { x: new Date('2025-05-29'), y: 144.97 }, { x: new Date('2025-06-02'), y: 143.86 }, { x: new Date('2025-06-06'), y: 143.45 }, { x: new Date('2025-06-10'), y: 144.52 }, { x: new Date('2025-06-11'), y: 144.77 }, { x: new Date('2025-06-12'), y: 144.50 }, { x: new Date('2025-06-14'), y: 143.98 }, { x: new Date('2025-06-15'), y: 143.95 }, { x: new Date('2025-06-16'), y: 144.44 }, { x: new Date('2025-06-17'), y: 144.48 }, { x: new Date('2025-06-18'), y: 145.13 }, { x: new Date('2025-06-20'), y: 145.34 }, { x: new Date('2025-06-21'), y: 145.83 }, { x: new Date('2025-06-22'), y: 145.81 }, { x: new Date('2025-06-23'), y: 146.07 }, { x: new Date('2025-06-24'), y: 146.33 }, { x: new Date('2025-06-25'), y: 144.88 }, { x: new Date('2025-06-26'), y: 145.24 }, { x: new Date('2025-06-27'), y: 144.48 }, { x: new Date('2025-06-28'), y: 144.65 }, { x: new Date('2025-06-29'), y: 144.63 }, { x: new Date('2025-06-30'), y: 144.50 }, { x: new Date('2025-07-01'), y: 144.08 }, { x: new Date('2025-07-02'), y: 143.43 }, { x: new Date('2025-07-04'), y: 144.57 }, { x: new Date('2025-07-05'), y: 144.50 }, { x: new Date('2025-07-06'), y: 144.50 }, { x: new Date('2025-07-07'), y: 144.50 }, { x: new Date('2025-07-08'), y: 145.84 }, { x: new Date('2025-07-09'), y: 146.65 }, { x: new Date('2025-07-10'), y: 146.36 }, { x: new Date('2025-07-11'), y: 146.2904 }, { x: new Date('2025-07-12'), y: 147.22 }, { x: new Date('2025-07-13'), y: 147.1678 }, { x: new Date('2025-07-14'), y: 147.2361 }, { x: new Date('2025-07-15'), y: 147.6158 }, { x: new Date('2025-07-16'), y: 148.5007 }, { x: new Date('2025-07-17'), y: 148.2694 }, { x: new Date('2025-07-19'), y: 148.6944 }, { x: new Date('2025-07-20'), y: 148.6969 }, { x: new Date('2025-07-21'), y: 148.5742 }, { x: new Date('2025-07-22'), y: 147.6338 }, { x: new Date('2025-07-23'), y: 146.8312 }, { x: new Date('2025-07-24'), y: 146.4022 }, { x: new Date('2025-07-25'), y: 146.7867 }, { x: new Date('2025-07-26'), y: 147.6103 }, { x: new Date('2025-07-27'), y: 147.5895 }, { x: new Date('2025-07-29'), y: 148.3668 }, { x: new Date('2025-07-30'), y: 148.5285 }, { x: new Date('2025-07-31'), y: 148.9955 }, { x: new Date('2025-08-01'), y: 150.4022 }, { x: new Date('2025-08-02'), y: 148.1739 }, { x: new Date('2025-08-03'), y: 148.3526 }, { x: new Date('2025-08-04'), y: 147.5304 }, { x: new Date('2025-08-05'), y: 147.0980 }, { x: new Date('2025-08-07'), y: 147.3245 }, { x: new Date('2025-08-08'), y: 147.1583 }, { x: new Date('2025-08-09'), y: 147.6807 }, { x: new Date('2025-08-10'), y: 147.6564 }, { x: new Date('2025-08-11'), y: 147.6544 }, { x: new Date('2025-08-12'), y: 148.0171 }, { x: new Date('2025-08-13'), y: 147.9760 }, { x: new Date('2025-08-14'), y: 147.3049 }, { x: new Date('2025-08-15'), y: 147.4067 }, { x: new Date('2025-08-16'), y: 147.0941 }, { x: new Date('2025-08-18'), y: 147.2455 }, { x: new Date('2025-08-19'), y: 147.7589 }, { x: new Date('2025-08-20'), y: 147.708 }, { x: new Date('2025-08-21'), y: 147.3628 }, { x: new Date('2025-08-22'), y: 148.1105 }, { x: new Date('2025-08-23'), y: 147.189 }, { x: new Date('2025-08-24'), y: 147.2885 }, { x: new Date('2025-08-25'), y: 147.1819 }, { x: new Date('2025-08-26'), y: 147.639 }, { x: new Date('2025-08-27'), y: 147.4179 }, { x: new Date('2025-08-28'), y: 147.5358 }, { x: new Date('2025-08-29'), y: 146.9841 }, { x: new Date('2025-08-30'), y: 147.0346 }, { x: new Date('2025-08-31'), y: 146.997 }, { x: new Date('2025-09-01'), y: 147.1487 }, { x: new Date('2025-09-02'), y: 147.1176 }, { x: new Date('2025-09-03'), y: 148.3843 }, { x: new Date('2025-09-04'), y: 148.1995 }, { x: new Date('2025-09-05'), y: 148.4087 }, { x: new Date('2025-09-06'), y: 147.5486 }, { x: new Date('2025-09-07'), y: 147.6371 }, { x: new Date('2025-09-08'), y: 148.2226 }, { x: new Date('2025-09-09'), y: 147.5733 }, { x: new Date('2025-09-10'), y: 147.2252 }, { x: new Date('2025-09-11'), y: 147.3705 }, { x: new Date('2025-09-12'), y: 147.3534 }, { x: new Date('2025-09-13'), y: 147.6468 }, { x: new Date('2025-09-14'), y: 147.6444 }, { x: new Date('2025-09-15'), y: 147.723 }, { x: new Date('2025-09-16'), y: 147.3897 }, { x: new Date('2025-09-17'), y: 146.6127 }, { x: new Date('2025-09-18'), y: 146.6373 }, { x: new Date('2025-09-19'), y: 147.6057 }, { x: new Date('2025-09-20'), y: 147.9475 }, { x: new Date('2025-09-21'), y: 147.9445 }, { x: new Date('2025-09-22'), y: 148.0283 }, { x: new Date('2025-09-23'), y: 147.7854 }, { x: new Date('2025-09-24'), y: 147.6898 }, { x: new Date('2025-09-25'), y: 148.6159 }, { x: new Date('2025-09-26'), y: 149.5017 }, { x: new Date('2025-09-27'), y: 149.5762 }, { x: new Date('2025-09-28'), y: 149.5874 }, { x: new Date('2025-09-29'), y: 149.4533 }, { x: new Date('2025-09-30'), y: 148.6619 }, { x: new Date('2025-10-01'), y: 147.993 }, { x: new Date('2025-10-02'), y: 147.093 }, { x: new Date('2025-10-03'), y: 147.1005 }, { x: new Date('2025-10-04'), y: 147.4041 }, { x: new Date('2025-10-05'), y: 147.3889 }, { x: new Date('2025-10-06'), y: 148.9828 }, { x: new Date('2025-10-06'), y: 148.9828 }, { x: new Date('2025-10-07'), y: 150.0247 }, { x: new Date('2025-10-08'), y: 151.2887 }, { x: new Date('2025-10-09'), y: 152.4772 }, { x: new Date('2025-10-10'), y: 152.8772 }, { x: new Date('2025-10-11'), y: 151.8035 }, { x: new Date('2025-10-12'), y: 151.8531 }, { x: new Date('2025-10-13'), y: 152.0023 }, { x: new Date('2025-10-14'), y: 152.1228 }, { x: new Date('2025-10-15'), y: 151.7756 }, { x: new Date('2025-10-16'), y: 151.1022 }, { x: new Date('2025-10-17'), y: 150.4604 }, { x: new Date('2025-10-18'), y: 150.4363 }, { x: new Date('2025-10-20'), y: 150.3871 }, { x: new Date('2025-10-21'), y: 150.7254 }, { x: new Date('2025-10-22'), y: 151.5132 }, { x: new Date('2025-10-23'), y: 151.8114 }, { x: new Date('2025-10-24'), y: 152.4699 }, { x: new Date('2025-10-25'), y: 152.7514 }, { x: new Date('2025-10-26'), y: 152.7514 }, { x: new Date('2025-10-27'), y: 152.8245 }, { x: new Date('2025-10-28'), y: 153.0001 }, { x: new Date('2025-10-29'), y: 152.8147 }, { x: new Date('2025-10-30'), y: 152.1691 }, { x: new Date('2025-10-31'), y: 152.4192 }, { x: new Date('2025-11-01'), y: 154.10758966 }, { x: new Date('2025-11-02'), y: 154.1073 }, { x: new Date('2025-11-03'), y: 154.151 }, { x: new Date('2025-11-04'), y: 154.1688 }, { x: new Date('2025-11-05'), y: 153.6089 }, { x: new Date('2025-11-06'), y: 153.9317 }, { x: new Date('2025-11-07'), y: 153.4466696 }, { x: new Date('2025-11-08'), y: 153.2282 }, { x: new Date('2025-11-09'), y: 153.3163 }, { x: new Date('2025-11-10'), y: 153.3078 }, { x: new Date('2025-11-11'), y: 153.6231 }, { x: new Date('2025-11-12'), y: 154.0401 }, { x: new Date('2025-11-13'), y: 154.1095 }, { x: new Date('2025-11-14'), y: 154.6955 }, { x: new Date('2025-11-15'), y: 154.5627 }, { x: new Date('2025-11-16'), y: 154.4657 }, { x: new Date('2025-11-17'), y: 154.4657 }, { x: new Date('2025-11-18'), y: 154.5272 }, { x: new Date('2025-11-19'), y: 155.0652 }, { x: new Date('2025-11-20'), y: 155.4125 }, { x: new Date('2025-11-21'), y: 156.625 }, { x: new Date('2025-11-22'), y: 157.4088 }, { x: new Date('2025-11-23'), y: 156.7674 }, { x: new Date('2025-11-24'), y: 156.7674 }, { x: new Date('2025-11-25'), y: 156.8904 }, { x: new Date('2025-11-26'), y: 156.8904 }, { x: new Date('2025-11-27'), y: 156.1888 }, { x: new Date('2025-11-28'), y: 156.3836 }, { x: new Date('2025-11-29'), y: 156.2861 }, { x: new Date('2025-11-30'), y: 156.1747 }, { x: new Date('2025-12-01'), y: 156.1032 }, { x: new Date('2025-12-02'), y: 155.339 }, { x: new Date('2025-12-03'), y: 155.8589 }, { x: new Date('2025-12-04'), y: 155.275 }, { x: new Date('2025-12-05'), y: 154.9932 }, { x: new Date('2025-12-06'), y: 155.2105 }, { x: new Date('2025-12-07'), y: 155.1985 }, { x: new Date('2025-12-08'), y: 155.2549 }, { x: new Date('2025-12-09'), y: 155.7349 }, { x: new Date('2025-12-10'), y: 156.6202 }, { x: new Date('2025-12-11'), y: 156.1933 }, { x: new Date('2025-12-12'), y: 155.5316 }, { x: new Date('2025-12-13'), y: 155.8304 }, { x: new Date('2025-12-14'), y: 155.8139 }, { x: new Date('2025-12-15'), y: 155.8148 }, { x: new Date('2025-12-16'), y: 155.1805 }, { x: new Date('2025-12-17'), y: 154.7574 }, { x: new Date('2025-12-18'), y: 155.4759 }, { x: new Date('2025-12-19'), y: 155.6137 }, { x: new Date('2025-12-20'), y: 157.3276 }, { x: new Date('2025-12-21'), y: 157.219 }, { x: new Date('2025-12-22'), y: 157.5619 }, { x: new Date('2025-12-23'), y: 157.0647 }, { x: new Date('2025-12-24'), y: 156.2209 }, { x: new Date('2025-12-25'), y: 155.9442 }, { x: new Date('2025-12-26'), y: 155.9322 }, { x: new Date('2025-12-27'), y: 156.472 }, { x: new Date('2025-12-29'), y: 156.4999 }, { x: new Date('2025-12-30'), y: 156.4818 }, { x: new Date('2025-12-31'), y: 156.1419 }, { x: new Date('2026-01-01'), y: 156.2883 }, { x: new Date('2026-01-02'), y: 156.6962 }, { x: new Date('2026-01-03'), y: 156.7298 }, { x: new Date('2026-01-04'), y: 156.8463 }, { x: new Date('2026-01-05'), y: 156.8414 }, { x: new Date('2026-01-06'), y: 156.8378 }, { x: new Date('2026-01-07'), y: 156.6119 }, { x: new Date('2026-01-08'), y: 156.6193 }, { x: new Date('2026-01-09'), y: 156.6594 }, { x: new Date('2026-01-10'), y: 156.8338 }, { x: new Date('2026-01-11'), y: 157.7796 }, { x: new Date('2026-01-12'), y: 157.7408 }, { x: new Date('2026-01-13'), y: 158.0289 }, { x: new Date('2026-01-14'), y: 157.9877 }, { x: new Date('2026-01-15'), y: 158.9937 }, { x: new Date('2026-01-16'), y: 158.5032 }, { x: new Date('2026-01-17'), y: 158.5914 }, { x: new Date('2026-01-18'), y: 158.1531 }, { x: new Date('2026-01-19'), y: 158.1674 }, { x: new Date('2026-01-20'), y: 157.7942 }, { x: new Date('2026-01-21'), y: 158.0514 }, { x: new Date('2026-01-22'), y: 158.0142 }, { x: new Date('2026-01-23'), y: 158.1572 }, { x: new Date('2026-01-24'), y: 158.4801 }, { x: new Date('2026-01-25'), y: 156.8108 }, { x: new Date('2026-01-26'), y: 157.1672 }, { x: new Date('2026-01-27'), y: 155.5954 }, { x: new Date('2026-01-28'), y: 154.1537 }, { x: new Date('2026-01-29'), y: 152.8696 }, { x: new Date('2026-01-30'), y: 153.136 }, { x: new Date('2026-01-31'), y: 153.1262 }, { x: new Date('2026-02-01'), y: 154.3823 }, { x: new Date('2026-02-02'), y: 154.3136 }, { x: new Date('2026-02-03'), y: 154.9866 }, { x: new Date('2026-02-04'), y: 155.3437 }, { x: new Date('2026-02-05'), y: 155.7883 }, { x: new Date('2026-02-06'), y: 156.6817 }, { x: new Date('2026-02-07'), y: 156.9127 }, { x: new Date('2026-02-08'), y: 157.0769 }, { x: new Date('2026-02-09'), y: 157.0625 }, { x: new Date('2026-02-10'), y: 157.283 }, { x: new Date('2026-02-11'), y: 156.157 }, { x: new Date('2026-02-12'), y: 154.632 }, { x: new Date('2026-02-13'), y: 153.3213 }, { x: new Date('2026-02-14'), y: 152.9512 }, { x: new Date('2026-02-15'), y: 152.8974 }, { x: new Date('2026-02-16'), y: 152.935 }, { x: new Date('2026-02-17'), y: 152.833 }, { x: new Date('2026-02-18'), y: 153.5054 }, { x: new Date('2026-02-19'), y: 153.2841 }, { x: new Date('2026-02-20'), y: 154.4162 }, { x: new Date('2026-02-21'), y: 155.006 }, { x: new Date('2026-02-22'), y: 155.0921 }, { x: new Date('2026-02-23'), y: 155.1421 }, { x: new Date('2026-02-24'), y: 154.6414 }, { x: new Date('2026-02-25'), y: 154.5984 }, { x: new Date('2026-02-26'), y: 155.742 }, { x: new Date('2026-02-27'), y: 156.3257 }, { x: new Date('2026-02-28'), y: 156.0475 }, { x: new Date('2026-03-01'), y: 156.0215 }, { x: new Date('2026-03-02'), y: 156.0372 }, { x: new Date('2026-03-03'), y: 156.2879 }, { x: new Date('2026-03-04'), y: 157.2454 }, { x: new Date('2026-03-05'), y: 157.6966 }, { x: new Date('2026-03-06'), y: 157.1276 }, { x: new Date('2026-03-07'), y: 157.5053 }, { x: new Date('2026-03-08'), y: 157.759 }, { x: new Date('2026-03-09'), y: 157.7331 }, { x: new Date('2026-03-10'), y: 158.3092 }, { x: new Date('2026-03-11'), y: 158.121 }, { x: new Date('2026-03-12'), y: 157.9017 }, { x: new Date('2026-03-13'), y: 158.8319 }, { x: new Date('2026-03-14'), y: 159.1443 }, { x: new Date('2026-03-15'), y: 159.5372 }, { x: new Date('2026-03-16'), y: 159.4982 }, { x: new Date('2026-03-17'), y: 159.5573 }, { x: new Date('2026-03-18'), y: 159.1775 }, { x: new Date('2026-03-19'), y: 158.984 }, { x: new Date('2026-03-20'), y: 158.7198 }, { x: new Date('2026-03-21'), y: 158.8502 }, { x: new Date('2026-03-22'), y: 159.0296 }, { x: new Date('2026-03-23'), y: 158.9682 }, { x: new Date('2026-03-24'), y: 159.1186 }, { x: new Date('2026-03-25'), y: 158.6152 }, { x: new Date('2026-03-26'), y: 158.7682 }, { x: new Date('2026-03-27'), y: 159.1933 }, { x: new Date('2026-03-28'), y: 159.6199 }, { x: new Date('2026-03-29'), y: 160.0597 }, { x: new Date('2026-03-30'), y: 160.0187 }, { x: new Date('2026-03-31'), y: 160.2782 }, { x: new Date('2026-04-01'), y: 159.6798 }, { x: new Date('2026-04-02'), y: 158.62156315 }, { x: new Date('2026-04-03'), y: 158.6497 }, { x: new Date('2026-04-04'), y: 159.4308 }, { x: new Date('2026-04-05'), y: 159.5323 }, { x: new Date('2026-04-06'), y: 159.5685 }, { x: new Date('2026-04-07'), y: 159.7008 }, { x: new Date('2026-04-08'), y: 159.6237 }, { x: new Date('2026-04-09'), y: 159.2468 }, { x: new Date('2026-04-10'), y: 158.5291 }, { x: new Date('2026-04-11'), y: 158.9763 }, { x: new Date('2026-04-12'), y: 159.2487 }, { x: new Date('2026-04-13'), y: 159.2231 }, { x: new Date('2026-04-14'), y: 159.6847 }, { x: new Date('2026-04-15'), y: 159.429 }, { x: new Date('2026-04-16'), y: 158.886 }, { x: new Date('2026-04-17'), y: 158.9007 }, { x: new Date('2026-04-18'), y: 159.1247 }, { x: new Date('2026-04-19'), y: 158.6188 }, { x: new Date('2026-04-20'), y: 158.6694 }, { x: new Date('2026-04-21'), y: 159.0684 }, { x: new Date('2026-04-22'), y: 158.7957 }, { x: new Date('2026-04-23'), y: 159.2733 }, { x: new Date('2026-04-24'), y: 159.3875 }, { x: new Date('2026-04-25'), y: 159.6168 }, { x: new Date('2026-04-26'), y: 159.4538 }, { x: new Date('2026-04-27'), y: 159.4627 }, { x: new Date('2026-04-28'), y: 159.5406 }, { x: new Date('2026-04-29'), y: 159.348 }]; const options = { chart: { type: 'area', height: 300, toolbar: { show: false }, zoom: { enabled: false } }, series: [{ name: '', data: fullData }], xaxis: { type: 'datetime' }, yaxis: { tickAmount: 7, labels: { formatter: val => `${val.toLocaleString('ja-JP')}円`, offsetX: -17 } }, grid: { padding: { left: -10, right: 0 } }, tooltip: { x: { formatter: val => { const date = new Date(val); return new Intl.DateTimeFormat('ja-JP', { year: 'numeric', month: 'long', day: 'numeric', weekday: 'short' }).format(date); } }, y: { formatter: val => `${val.toLocaleString('ja-JP')}円` } }, stroke: { curve: 'smooth', width: 2 }, fill: { type: 'gradient', gradient: { shadeIntensity: 1, opacityFrom: 0.8, opacityTo: 0, stops: [0, 90, 100] } }, colors: ['#007bff'], legend: { show: false }, dataLabels: { enabled: false } }; const chart = new ApexCharts(document.querySelector("#chart"), options); chart.render(); function updateChart(months) { const sortedData = [...fullData].sort((a, b) => a.x - b.x); const latestDate = sortedData[sortedData.length - 1].x; const start = new Date(latestDate); start.setMonth(start.getMonth() - months); const startTime = start.getTime(); const filtered = fullData.filter(item => item.x >= startTime && item.x <= latestDate ); chart.updateSeries([{ name: '', data: filtered }], true); chart.updateOptions({ xaxis: { type: 'datetime', min: startTime, max: latestDate } }); } document.querySelectorAll('.filter-btn').forEach(btn => { btn.addEventListener('click', () => { document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active')); btn.classList.add('active'); const months = parseInt(btn.dataset.months); updateChart(months); }); }); updateChart(1);