apexcharts.js グラフの更新がうまくいかない

test.js

12var test1=[3,6,8,7,6,90,80]; 3 var test2=[7,5,3,9,2.8]; 4var suuji=[24,72,51,90]; 5 6const button = document.getElementById('button'); 7 8var options = { 9 chart: { 10 height: 350, 11 width: 700, 12 type: 'line', 13 zoom: { 14 enabled: false 15 } 16 }, 17 stroke: { 18 curve: 'straight', 19 // dashArray: 5, 20 width: 5 21 }, 22 markers: { 23 size: 8, 24 colors: ["#ffffff"], 25 strokeColor: "#008FFB", 26 strokeWidth: 3 27 }, 28 series: [{ 29 name: 'スコア', 30 data: suuji 31 }], 32 grid: { 33 row: { 34 colors: ['#f3f3f3', 'transparent'], 35 opacity: 0.5 36 }, 37 }, 38 xaxis: { 39 type: suuji, 40 categories: suuji, 41 tickAmount: 1 42 }, 43 yaxis: { 44 min: 0, 45 max: 100 46 }, 47 fill: { 48 type: 'gradient', 49 gradient : { 50 shade: 'dark', 51 gradientToColors: ['#F9A3A4'], 52 shadeIntensity: 1, 53 type: 'vertical', 54 opacityFrom: 1, 55 opacityTo: 1, 56 stops: [0, 100] 57 } 58 } 59} 60 61var chart = new ApexCharts(document.querySelector("#chart"), options); 62chart.render(); 63 64button.addEventListener("click", () => { 65 66 // グラフ更新 67 console.log(options.xaxis.categories); 68 69 options.xaxis.categories=test1; 70 options.xaxis.type=test1; 71 options.series[0].data = test2; 72 73 74 chart.update(); 75 console.log(options.xaxis.categories); 76 console.log(options.series[0].data); 77 console.log(options.xaxis.type); 78});