const fullData = [ { x: new Date('2025-04-06'), y: 189.52 }, { x: new Date('2025-04-07'), y: 188.15 }, { x: new Date('2025-04-08'), y: 188.22 }, { x: new Date('2025-04-09'), y: 187.18 }, { x: new Date('2025-04-10'), y: 187.18 }, { x: new Date('2025-04-11'), y: 187.29 }, { x: new Date('2025-04-12'), y: 187.48 }, { x: new Date('2025-04-13'), y: 187.41 }, { x: new Date('2025-04-14'), y: 187.95 }, { x: new Date('2025-04-15'), y: 188.51 }, { x: new Date('2025-04-16'), y: 189.24 }, { x: new Date('2025-04-17'), y: 188.48 }, { x: new Date('2025-04-18'), y: 188.74 }, { x: new Date('2025-04-19'), y: 188.88 }, { x: new Date('2025-04-20'), y: 188.85 }, { x: new Date('2025-04-21'), y: 188.58 }, { x: new Date('2025-04-22'), y: 188.41 }, { x: new Date('2025-04-23'), y: 188.62 }, { x: new Date('2025-04-24'), y: 189.50 }, { x: new Date('2025-04-25'), y: 189.98 }, { x: new Date('2025-04-26'), y: 191.12 }, { x: new Date('2025-04-27'), y: 191.08 }, { x: new Date('2025-04-28'), y: 191.23 }, { x: new Date('2025-05-02'), y: 192.42 }, { x: new Date('2025-05-03'), y: 192.22 }, { x: new Date('2025-05-05'), y: 191.87 }, { x: new Date('2025-05-06'), y: 191.87 }, { x: new Date('2025-05-07'), y: 190.94 }, { x: new Date('2025-05-08'), y: 191.21 }, { x: new Date('2025-05-09'), y: 192.84 }, { x: new Date('2025-05-10'), y: 193.15 }, { x: new Date('2025-05-11'), y: 193.05 }, { x: new Date('2025-05-12'), y: 193.66 }, { x: new Date('2025-05-13'), y: 195.17 }, { x: new Date('2025-05-14'), y: 195.97 }, { x: new Date('2025-05-15'), y: 194.66 }, { x: new Date('2025-05-16'), y: 193.76 }, { x: new Date('2025-05-17'), y: 193.52 }, { x: new Date('2025-05-19'), y: 193.24 }, { x: new Date('2025-05-20'), y: 193.66 }, { x: new Date('2025-05-21'), y: 193.34 }, { x: new Date('2025-05-22'), y: 192.92 }, { x: new Date('2025-05-24'), y: 192.85 }, { x: new Date('2025-05-26'), y: 193.23 }, { x: new Date('2025-05-27'), y: 193.56 }, { x: new Date('2025-05-29'), y: 195.21 }, { x: new Date('2025-06-02'), y: 193.75 }, { x: new Date('2025-06-06'), y: 194.77 }, { x: new Date('2025-06-10'), y: 195.85 }, { x: new Date('2025-06-11'), y: 195.60 }, { x: new Date('2025-06-12'), y: 195.61 }, { x: new Date('2025-06-14'), y: 195.34 }, { x: new Date('2025-06-15'), y: 195.31 }, { x: new Date('2025-06-16'), y: 195.78 }, { x: new Date('2025-06-17'), y: 196.17 }, { x: new Date('2025-06-18'), y: 195.63 }, { x: new Date('2025-06-20'), y: 195.64 }, { x: new Date('2025-06-21'), y: 196.35 }, { x: new Date('2025-06-22'), y: 196.31 }, { x: new Date('2025-06-23'), y: 196.42 }, { x: new Date('2025-06-24'), y: 197.52 }, { x: new Date('2025-06-25'), y: 197.25 }, { x: new Date('2025-06-26'), y: 198.25 }, { x: new Date('2025-06-27'), y: 198.31 }, { x: new Date('2025-06-28'), y: 198.45 }, { x: new Date('2025-06-29'), y: 198.46 }, { x: new Date('2025-06-30'), y: 198.29 }, { x: new Date('2025-07-01'), y: 197.66 }, { x: new Date('2025-07-02'), y: 197.11 }, { x: new Date('2025-07-04'), y: 197.36 }, { x: new Date('2025-07-05'), y: 197.23 }, { x: new Date('2025-07-06'), y: 197.23 }, { x: new Date('2025-07-07'), y: 197.21 }, { x: new Date('2025-07-08'), y: 198.51 }, { x: new Date('2025-07-09'), y: 199.22 }, { x: new Date('2025-07-10'), y: 198.86 }, { x: new Date('2025-07-11'), y: 198.5950 }, { x: new Date('2025-07-12'), y: 198.84 }, { x: new Date('2025-07-13'), y: 198.8148 }, { x: new Date('2025-07-14'), y: 198.6572 }, { x: new Date('2025-07-15'), y: 198.4839 }, { x: new Date('2025-07-16'), y: 199.077 }, { x: new Date('2025-07-17'), y: 198.7419 }, { x: new Date('2025-07-19'), y: 199.5943 }, { x: new Date('2025-07-20'), y: 199.5703 }, { x: new Date('2025-07-21'), y: 199.3458 }, { x: new Date('2025-07-22'), y: 198.8373 }, { x: new Date('2025-07-23'), y: 198.4267 }, { x: new Date('2025-07-24'), y: 198.5754 }, { x: new Date('2025-07-25'), y: 198.5645 }, { x: new Date('2025-07-26'), y: 198.4752 }, { x: new Date('2025-07-27'), y: 198.4976 }, { x: new Date('2025-07-29'), y: 198.6040 }, { x: new Date('2025-07-30'), y: 198.2273 }, { x: new Date('2025-07-31'), y: 197.9432 }, { x: new Date('2025-08-01'), y: 198.8199 }, { x: new Date('2025-08-02'), y: 196.5526 }, { x: new Date('2025-08-03'), y: 196.6871 }, { x: new Date('2025-08-04'), y: 195.8827 }, { x: new Date('2025-08-05'), y: 195.5227 }, { x: new Date('2025-08-07'), y: 196.5392 }, { x: new Date('2025-08-08'), y: 197.5258 }, { x: new Date('2025-08-09'), y: 198.5057 }, { x: new Date('2025-08-10'), y: 198.4434 }, { x: new Date('2025-08-11'), y: 198.4799 }, { x: new Date('2025-08-12'), y: 198.8090 }, { x: new Date('2025-08-13'), y: 199.5740 }, { x: new Date('2025-08-14'), y: 199.8737 }, { x: new Date('2025-08-15'), y: 199.6647 }, { x: new Date('2025-08-16'), y: 199.4085 }, { x: new Date('2025-08-18'), y: 199.5919 }, { x: new Date('2025-08-19'), y: 199.7574 }, { x: new Date('2025-08-20'), y: 199.3553 }, { x: new Date('2025-08-21'), y: 198.4323 }, { x: new Date('2025-08-22'), y: 198.9117 }, { x: new Date('2025-08-23'), y: 198.8352 }, { x: new Date('2025-08-24'), y: 198.8876 }, { x: new Date('2025-08-25'), y: 198.9047 }, { x: new Date('2025-08-26'), y: 198.9333 }, { x: new Date('2025-08-27'), y: 198.6978 }, { x: new Date('2025-08-28'), y: 198.8885 }, { x: new Date('2025-08-29'), y: 198.5524 }, { x: new Date('2025-08-30'), y: 198.436 }, { x: new Date('2025-08-31'), y: 198.3988 }, { x: new Date('2025-09-01'), y: 198.6157 }, { x: new Date('2025-09-02'), y: 199.1886 }, { x: new Date('2025-09-03'), y: 198.8551 }, { x: new Date('2025-09-04'), y: 199.0202 }, { x: new Date('2025-09-05'), y: 199.4449 }, { x: new Date('2025-09-06'), y: 199.2125 }, { x: new Date('2025-09-07'), y: 199.2493 }, { x: new Date('2025-09-08'), y: 200.012 }, { x: new Date('2025-09-09'), y: 199.8103 }, { x: new Date('2025-09-10'), y: 199.3051 }, { x: new Date('2025-09-11'), y: 199.5019 }, { x: new Date('2025-09-12'), y: 199.7903 }, { x: new Date('2025-09-13'), y: 200.1478 }, { x: new Date('2025-09-14'), y: 200.1354 }, { x: new Date('2025-09-15'), y: 200.2128 }, { x: new Date('2025-09-16'), y: 200.4313 }, { x: new Date('2025-09-17'), y: 200.1091 }, { x: new Date('2025-09-18'), y: 200.0282 }, { x: new Date('2025-09-19'), y: 200.4032 }, { x: new Date('2025-09-20'), y: 199.5132 }, { x: new Date('2025-09-21'), y: 199.5857 }, { x: new Date('2025-09-22'), y: 199.4389 }, { x: new Date('2025-09-23'), y: 199.6118 }, { x: new Date('2025-09-24'), y: 199.6536 }, { x: new Date('2025-09-25'), y: 200.0412 }, { x: new Date('2025-09-26'), y: 199.8584 }, { x: new Date('2025-09-27'), y: 200.2696 }, { x: new Date('2025-09-28'), y: 200.2234 }, { x: new Date('2025-09-29'), y: 200.2952 }, { x: new Date('2025-09-30'), y: 199.7028 }, { x: new Date('2025-10-01'), y: 198.974 }, { x: new Date('2025-10-02'), y: 198.3004 }, { x: new Date('2025-10-03'), y: 197.8914 }, { x: new Date('2025-10-04'), y: 198.6001 }, { x: new Date('2025-10-05'), y: 198.5275 }, { x: new Date('2025-10-06'), y: 200.2119 }, { x: new Date('2025-10-06'), y: 200.2119 }, { x: new Date('2025-10-07'), y: 202.201 }, { x: new Date('2025-10-08'), y: 203.2454 }, { x: new Date('2025-10-09'), y: 204.3984 }, { x: new Date('2025-10-10'), y: 203.8211 }, { x: new Date('2025-10-11'), y: 202.446 }, { x: new Date('2025-10-12'), y: 202.4781 }, { x: new Date('2025-10-13'), y: 202.6681 }, { x: new Date('2025-10-14'), y: 202.8838 }, { x: new Date('2025-10-15'), y: 202.1336 }, { x: new Date('2025-10-16'), y: 202.2025 }, { x: new Date('2025-10-17'), y: 202.1781 }, { x: new Date('2025-10-18'), y: 202.0087 }, { x: new Date('2025-10-20'), y: 201.9664 }, { x: new Date('2025-10-21'), y: 202.3852 }, { x: new Date('2025-10-22'), y: 202.713 }, { x: new Date('2025-10-23'), y: 202.7348 }, { x: new Date('2025-10-24'), y: 203.2896 }, { x: new Date('2025-10-25'), y: 203.4269 }, { x: new Date('2025-10-26'), y: 203.4269 }, { x: new Date('2025-10-27'), y: 203.4536 }, { x: new Date('2025-10-28'), y: 203.7735 }, { x: new Date('2025-10-29'), y: 203.8117 }, { x: new Date('2025-10-30'), y: 202.0766 }, { x: new Date('2025-10-31'), y: 201.2678 }, { x: new Date('2025-11-01'), y: 202.48520723 }, { x: new Date('2025-11-02'), y: 202.4891 }, { x: new Date('2025-11-03'), y: 202.4558 }, { x: new Date('2025-11-04'), y: 202.5211 }, { x: new Date('2025-11-05'), y: 200.3332 }, { x: new Date('2025-11-06'), y: 200.7964 }, { x: new Date('2025-11-07'), y: 200.84737571 }, { x: new Date('2025-11-08'), y: 200.9717 }, { x: new Date('2025-11-09'), y: 201.4984 }, { x: new Date('2025-11-10'), y: 201.5091 }, { x: new Date('2025-11-11'), y: 201.8937 }, { x: new Date('2025-11-12'), y: 202.867 }, { x: new Date('2025-11-13'), y: 202.7606 }, { x: new Date('2025-11-14'), y: 203.0677 }, { x: new Date('2025-11-15'), y: 203.465 }, { x: new Date('2025-11-16'), y: 203.3485 }, { x: new Date('2025-11-17'), y: 203.3485 }, { x: new Date('2025-11-18'), y: 203.3469 }, { x: new Date('2025-11-19'), y: 204.1024 }, { x: new Date('2025-11-20'), y: 204.347 }, { x: new Date('2025-11-21'), y: 204.9357 }, { x: new Date('2025-11-22'), y: 205.8509 }, { x: new Date('2025-11-23'), y: 205.2138 }, { x: new Date('2025-11-24'), y: 205.2138 }, { x: new Date('2025-11-25'), y: 205.5779 }, { x: new Date('2025-11-26'), y: 205.5779 }, { x: new Date('2025-11-27'), y: 205.5395 }, { x: new Date('2025-11-28'), y: 206.7297 }, { x: new Date('2025-11-29'), y: 206.892 }, { x: new Date('2025-11-30'), y: 206.6295 }, { x: new Date('2025-12-01'), y: 206.5494 }, { x: new Date('2025-12-02'), y: 205.4745 }, { x: new Date('2025-12-03'), y: 205.8945 }, { x: new Date('2025-12-04'), y: 206.8315 }, { x: new Date('2025-12-05'), y: 206.6981 }, { x: new Date('2025-12-06'), y: 206.9912 }, { x: new Date('2025-12-07'), y: 206.9902 }, { x: new Date('2025-12-08'), y: 206.9371 }, { x: new Date('2025-12-09'), y: 207.5058 }, { x: new Date('2025-12-10'), y: 208.4688 }, { x: new Date('2025-12-11'), y: 208.5562 }, { x: new Date('2025-12-12'), y: 208.3126 }, { x: new Date('2025-12-13'), y: 208.4005 }, { x: new Date('2025-12-14'), y: 208.3976 }, { x: new Date('2025-12-15'), y: 208.3461 }, { x: new Date('2025-12-16'), y: 207.6222 }, { x: new Date('2025-12-17'), y: 207.6872 }, { x: new Date('2025-12-18'), y: 207.9228 }, { x: new Date('2025-12-19'), y: 208.2976 }, { x: new Date('2025-12-20'), y: 210.4801 }, { x: new Date('2025-12-21'), y: 210.3223 }, { x: new Date('2025-12-22'), y: 210.8121 }, { x: new Date('2025-12-23'), y: 211.2218 }, { x: new Date('2025-12-24'), y: 210.8717 }, { x: new Date('2025-12-25'), y: 210.5911 }, { x: new Date('2025-12-26'), y: 210.6812 }, { x: new Date('2025-12-27'), y: 211.2408 }, { x: new Date('2025-12-29'), y: 211.2426 }, { x: new Date('2025-12-30'), y: 211.1975 }, { x: new Date('2025-12-31'), y: 210.7921 }, { x: new Date('2026-01-01'), y: 210.6416 }, { x: new Date('2026-01-02'), y: 210.8912 }, { x: new Date('2026-01-03'), y: 210.9952 }, { x: new Date('2026-01-04'), y: 211.1009 }, { x: new Date('2026-01-05'), y: 211.099 }, { x: new Date('2026-01-06'), y: 210.9251 }, { x: new Date('2026-01-07'), y: 211.485 }, { x: new Date('2026-01-08'), y: 211.541 }, { x: new Date('2026-01-09'), y: 211.0754 }, { x: new Date('2026-01-10'), y: 210.7517 }, { x: new Date('2026-01-11'), y: 211.5821 }, { x: new Date('2026-01-12'), y: 211.5777 }, { x: new Date('2026-01-13'), y: 211.7782 }, { x: new Date('2026-01-14'), y: 212.6793 }, { x: new Date('2026-01-15'), y: 213.7239 }, { x: new Date('2026-01-16'), y: 213.0547 }, { x: new Date('2026-01-17'), y: 212.3716 }, { x: new Date('2026-01-18'), y: 211.6911 }, { x: new Date('2026-01-19'), y: 211.7293 }, { x: new Date('2026-01-20'), y: 211.2131 }, { x: new Date('2026-01-21'), y: 212.0404 }, { x: new Date('2026-01-22'), y: 212.4925 }, { x: new Date('2026-01-23'), y: 212.4041 }, { x: new Date('2026-01-24'), y: 213.5196 }, { x: new Date('2026-01-25'), y: 212.9682 }, { x: new Date('2026-01-26'), y: 213.3078 }, { x: new Date('2026-01-27'), y: 212.1436 }, { x: new Date('2026-01-28'), y: 210.7732 }, { x: new Date('2026-01-29'), y: 210.7713 }, { x: new Date('2026-01-30'), y: 211.3053 }, { x: new Date('2026-01-31'), y: 211.3919 }, { x: new Date('2026-02-01'), y: 211.7925 }, { x: new Date('2026-02-02'), y: 211.7719 }, { x: new Date('2026-02-03'), y: 212.2618 }, { x: new Date('2026-02-04'), y: 212.3481 }, { x: new Date('2026-02-05'), y: 213.2359 }, { x: new Date('2026-02-06'), y: 214.2163 }, { x: new Date('2026-02-07'), y: 212.6651 }, { x: new Date('2026-02-08'), y: 213.5879 }, { x: new Date('2026-02-09'), y: 213.4839 }, { x: new Date('2026-02-10'), y: 213.9192 }, { x: new Date('2026-02-11'), y: 213.3611 }, { x: new Date('2026-02-12'), y: 211.1085 }, { x: new Date('2026-02-13'), y: 209.205 }, { x: new Date('2026-02-14'), y: 208.4188 }, { x: new Date('2026-02-15'), y: 208.5577 }, { x: new Date('2026-02-16'), y: 208.5659 }, { x: new Date('2026-02-17'), y: 208.4461 }, { x: new Date('2026-02-18'), y: 209.2082 }, { x: new Date('2026-02-19'), y: 207.8432 }, { x: new Date('2026-02-20'), y: 208.8053 }, { x: new Date('2026-02-21'), y: 208.6857 }, { x: new Date('2026-02-22'), y: 209.1135 }, { x: new Date('2026-02-23'), y: 209.1179 }, { x: new Date('2026-02-24'), y: 208.9443 }, { x: new Date('2026-02-25'), y: 208.6964 }, { x: new Date('2026-02-26'), y: 210.229 }, { x: new Date('2026-02-27'), y: 211.6787 }, { x: new Date('2026-02-28'), y: 210.7459 }, { x: new Date('2026-03-01'), y: 210.3082 }, { x: new Date('2026-03-02'), y: 210.2849 }, { x: new Date('2026-03-03'), y: 209.814 }, { x: new Date('2026-03-04'), y: 210.7473 }, { x: new Date('2026-03-05'), y: 210.3836 }, { x: new Date('2026-03-06'), y: 209.9769 }, { x: new Date('2026-03-07'), y: 210.2586 }, { x: new Date('2026-03-08'), y: 211.0839 }, { x: new Date('2026-03-09'), y: 210.939 }, { x: new Date('2026-03-10'), y: 210.9708 }, { x: new Date('2026-03-11'), y: 211.7468 }, { x: new Date('2026-03-12'), y: 212.1345 }, { x: new Date('2026-03-13'), y: 212.8371 }, { x: new Date('2026-03-14'), y: 212.6643 }, { x: new Date('2026-03-15'), y: 211.4272 }, { x: new Date('2026-03-16'), y: 211.4794 }, { x: new Date('2026-03-17'), y: 211.2632 }, { x: new Date('2026-03-18'), y: 211.687 }, { x: new Date('2026-03-19'), y: 212.1901 }, { x: new Date('2026-03-20'), y: 211.5105 }, { x: new Date('2026-03-21'), y: 211.9564 }, { x: new Date('2026-03-22'), y: 212.2772 }, { x: new Date('2026-03-23'), y: 212.2556 }, { x: new Date('2026-03-24'), y: 212.2074 }, { x: new Date('2026-03-25'), y: 212.627 }, { x: new Date('2026-03-26'), y: 212.7542 }, { x: new Date('2026-03-27'), y: 212.9686 }, { x: new Date('2026-03-28'), y: 212.9582 }, { x: new Date('2026-03-29'), y: 212.6152 }, { x: new Date('2026-03-30'), y: 212.6396 }, { x: new Date('2026-03-31'), y: 212.3618 }, { x: new Date('2026-04-01'), y: 210.7343 }, { x: new Date('2026-04-02'), y: 211.07713769 }, { x: new Date('2026-04-03'), y: 211.0225 }, { x: new Date('2026-04-04'), y: 210.9435 }, { x: new Date('2026-04-05'), y: 210.7598 }, { x: new Date('2026-04-06'), y: 210.7738 }, { x: new Date('2026-04-07'), y: 210.7085 }, { x: new Date('2026-04-08'), y: 211.258 }, { x: new Date('2026-04-09'), y: 212.1185 }, { x: new Date('2026-04-10'), y: 212.6015 }, { x: new Date('2026-04-11'), y: 213.4467 }, { x: new Date('2026-04-12'), y: 214.2414 }, { x: new Date('2026-04-13'), y: 214.1607 }, { x: new Date('2026-04-14'), y: 214.0743 }, { x: new Date('2026-04-15'), y: 214.9073 }]; 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);