{"id":38324,"date":"2026-01-28T20:41:36","date_gmt":"2026-01-28T17:41:36","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=38324"},"modified":"2026-01-28T20:41:36","modified_gmt":"2026-01-28T17:41:36","slug":"solidjs-ve-apexcharts-neden-birlikte-harika","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/solidjs-ve-apexcharts-neden-birlikte-harika\/","title":{"rendered":"SolidJS ve ApexCharts: Neden Birlikte Harika?"},"content":{"rendered":"<p><body><\/p>\n<p>Veri g\u00f6rselle\u015ftirme, modern web uygulamalar\u0131n\u0131n vazge\u00e7ilmez bir par\u00e7as\u0131d\u0131r. Kullan\u0131c\u0131lar\u0131n karma\u015f\u0131k veri setlerini h\u0131zl\u0131 ve anla\u015f\u0131l\u0131r bir \u015fekilde yorumlamas\u0131n\u0131 sa\u011flayan grafikler, bu s\u00fcrecin merkezindedir. SolidJS gibi reaktif ve performans odakl\u0131 bir JavaScript k\u00fct\u00fcphanesi ile ApexCharts gibi zengin \u00f6zelliklere sahip bir grafik k\u00fct\u00fcphanesini birle\u015ftirmek, hem h\u0131zl\u0131 hem de etkile\u015fimli veri g\u00f6rselle\u015ftirmeleri olu\u015fturmak i\u00e7in m\u00fckemmel bir kombinasyon sunar.<\/p>\n<p>Bu rehberde, SolidJS uygulamalar\u0131n\u0131za ApexCharts&#8217;\u0131 nas\u0131l entegre edece\u011finizi ad\u0131m ad\u0131m \u00f6\u011freneceksiniz. Kendi SolidJS bile\u015feninizi olu\u015fturarak farkl\u0131 grafik t\u00fcrlerini nas\u0131l kullanaca\u011f\u0131n\u0131z\u0131, verileri nas\u0131l dinamik olarak g\u00fcncelleyece\u011finizi ve uygulaman\u0131z\u0131n performans\u0131n\u0131 nas\u0131l optimize edece\u011finizi detayl\u0131 kod \u00f6rnekleriyle ke\u015ffedece\u011fiz.<\/p>\n<h2>SolidJS ve ApexCharts: Neden Birlikte Harika?<\/h2>\n<p>SolidJS, React, Vue veya Angular gibi di\u011fer pop\u00fcler k\u00fct\u00fcphanelere benzer bir s\u00f6zdizimi sunsa da, \u00e7al\u0131\u015fma prensibi a\u00e7\u0131s\u0131ndan \u00f6nemli farkl\u0131l\u0131klar bar\u0131nd\u0131r\u0131r. Derleme zaman\u0131nda DOM g\u00fcncellemelerini optimize ederek son derece h\u0131zl\u0131 ve verimli uygulamalar geli\u015ftirmeye olanak tan\u0131r. Reaktif primitifleri (<code>createSignal<\/code>, <code>createEffect<\/code> vb.) sayesinde, durum de\u011fi\u015fiklikleri sadece ilgili DOM par\u00e7alar\u0131n\u0131 g\u00fcnceller, bu da gereksiz yeniden renderlamalar\u0131n \u00f6n\u00fcne ge\u00e7er.<\/p>\n<p>ApexCharts ise, modern ve etkile\u015fimli grafikler olu\u015fturmak i\u00e7in tasarlanm\u0131\u015f a\u00e7\u0131k kaynakl\u0131 bir JavaScript grafik k\u00fct\u00fcphanesidir. \u00c7izgi, \u00e7ubuk, pasta, alan, da\u011f\u0131l\u0131m ve daha bir\u00e7ok grafik t\u00fcr\u00fcn\u00fc destekler. Kullan\u0131m\u0131 kolay API&#8217;si, esnek \u00f6zelle\u015ftirme se\u00e7enekleri ve duyarl\u0131 yap\u0131s\u0131 sayesinde her t\u00fcrl\u00fc veri g\u00f6rselle\u015ftirme ihtiyac\u0131na cevap verebilir. \u00d6zellikle animasyonlar\u0131 ve etkile\u015fimli ara\u00e7 ipu\u00e7lar\u0131 (tooltips) ile kullan\u0131c\u0131 deneyimini zenginle\u015ftirir.<\/p>\n<p>SolidJS&#8217;in reaktif do\u011fas\u0131 ve ApexCharts&#8217;\u0131n g\u00fc\u00e7l\u00fc g\u00f6rselle\u015ftirme yetenekleri bir araya geldi\u011finde, ortaya \u00e7\u0131kan sinerji olduk\u00e7a etkileyicidir. SolidJS&#8217;in hassas reaktivite sistemi sayesinde, grafik verilerinizdeki veya se\u00e7eneklerinizdeki herhangi bir de\u011fi\u015fiklik ApexCharts taraf\u0131ndan an\u0131nda ve verimli bir \u015fekilde g\u00fcncellenebilir. Bu, \u00f6zellikle ger\u00e7ek zamanl\u0131 veri ak\u0131\u015flar\u0131 veya s\u0131k veri g\u00fcncellemeleri gerektiren panolar gibi uygulamalar i\u00e7in kritik \u00f6neme sahiptir.<\/p>\n<h2>Proje Kurulumu ve Gerekli Ba\u011f\u0131ml\u0131l\u0131klar<\/h2>\n<p>SolidJS projemizi olu\u015fturarak ve ApexCharts k\u00fct\u00fcphanesini kurarak ba\u015flayaca\u011f\u0131z. Bu ad\u0131mlar olduk\u00e7a basittir ve k\u0131sa s\u00fcrede bir geli\u015ftirme ortam\u0131 kurman\u0131z\u0131 sa\u011flar.<\/p>\n<h3>SolidJS Projesi Olu\u015fturma<\/h3>\n<p>\u00d6ncelikle SolidJS projemizi olu\u015fturmak i\u00e7in SolidJS&#8217;in resmi CLI arac\u0131n\u0131 kullanaca\u011f\u0131z. Terminalinizde a\u015fa\u011f\u0131daki komutu \u00e7al\u0131\u015ft\u0131r\u0131n:<\/p>\n<pre><code class=\"language-bash\">npm create solid-app my-solid-charts --template javascript\n<\/code><\/pre>\n<p>Bu komut, <code>my-solid-charts<\/code> ad\u0131nda yeni bir SolidJS projesi olu\u015fturacak ve JavaScript \u015fablonunu kullanacakt\u0131r. TypeScript kullanmak isterseniz <code>--template typescript<\/code> olarak de\u011fi\u015ftirebilirsiniz. Proje olu\u015ftuktan sonra, proje dizinine girin:<\/p>\n<pre><code class=\"language-bash\">cd my-solid-charts\n<\/code><\/pre>\n<h3>ApexCharts Ba\u011f\u0131ml\u0131l\u0131\u011f\u0131n\u0131 Kurma<\/h3>\n<p>\u015eimdi ApexCharts k\u00fct\u00fcphanesini projemize eklememiz gerekiyor. A\u015fa\u011f\u0131daki komutu \u00e7al\u0131\u015ft\u0131rarak ApexCharts&#8217;\u0131 kurun:<\/p>\n<pre><code class=\"language-bash\">npm install apexcharts\n<\/code><\/pre>\n<p>Bu kurulumla birlikte, ApexCharts&#8217;\u0131n t\u00fcm i\u015flevselli\u011fi projenizde kullan\u0131labilir hale gelecektir. ApexCharts&#8217;\u0131n kendi CSS stilleri genellikle otomatik olarak y\u00fcklenir, ancak \u00f6zel temalar veya daha derin \u00f6zelle\u015ftirmeler i\u00e7in ApexCharts&#8217;\u0131n <a href=\"https:\/\/apexcharts.com\/docs\/themes\/\">tema dok\u00fcmantasyonuna<\/a> bakabilirsiniz.<\/p>\n<h2>SolidJS \u0130\u00e7in \u00d6zel Bir ApexChart Bile\u015feni Olu\u015fturma<\/h2>\n<p>ApexCharts&#8217;\u0131 SolidJS ile kullanman\u0131n en etkili yolu, ApexCharts \u00f6rne\u011fini y\u00f6neten ve SolidJS&#8217;in reaktivite sistemine entegre olan \u00f6zel bir bile\u015fen olu\u015fturmakt\u0131r. Bu bile\u015fen, grafik se\u00e7eneklerini ve verilerini prop olarak alacak ve SolidJS&#8217;in ya\u015fam d\u00f6ng\u00fcs\u00fc kancalar\u0131n\u0131 (<code>onMount<\/code>, <code>createEffect<\/code>) kullanarak grafi\u011fi olu\u015fturacak ve g\u00fcncelleyecektir.<\/p>\n<p><code>src\/components\/<\/code> dizini alt\u0131nda <code>ApexChart.jsx<\/code> ad\u0131nda yeni bir dosya olu\u015ftural\u0131m ve i\u00e7eri\u011fini a\u015fa\u011f\u0131daki gibi d\u00fczenleyelim:<\/p>\n<pre><code class=\"language-jsx\">\/\/ src\/components\/ApexChart.jsx\nimport { onMount, createEffect, onCleanup } from 'solid-js';\nimport ApexCharts from 'apexcharts';\n\nfunction ApexChart(props) {\n  let chartRef; \/\/ Grafi\u011fin render edilece\u011fi DOM eleman\u0131na referans\n  let chartInstance; \/\/ ApexCharts \u00f6rne\u011fi\n\n  \/\/ Bile\u015fen ilk kez DOM'a ba\u011fland\u0131\u011f\u0131nda \u00e7al\u0131\u015f\u0131r\n  onMount(() => {\n    \/\/ ApexCharts \u00f6rne\u011fini olu\u015ftur\n    chartInstance = new ApexCharts(chartRef, {\n      ...props.options,\n      series: props.series,\n    });\n    chartInstance.render();\n  });\n\n  \/\/ Props'lar (options veya series) de\u011fi\u015fti\u011finde \u00e7al\u0131\u015f\u0131r\n  createEffect(() => {\n    if (chartInstance) {\n      \/\/ Grafi\u011fi yeni se\u00e7enekler ve verilerle g\u00fcncelle\n      chartInstance.updateOptions(props.options);\n      chartInstance.updateSeries(props.series);\n    }\n  });\n\n  \/\/ Bile\u015fen DOM'dan kald\u0131r\u0131ld\u0131\u011f\u0131nda \u00e7al\u0131\u015f\u0131r\n  onCleanup(() => {\n    if (chartInstance) {\n      chartInstance.destroy(); \/\/ Bellek s\u0131z\u0131nt\u0131lar\u0131n\u0131 \u00f6nlemek i\u00e7in grafi\u011fi yok et\n    }\n  });\n\n  \/\/ Grafi\u011fin render edilece\u011fi div eleman\u0131\n  return <div ref={chartRef} \/>;\n}\n\nexport default ApexChart;\n<\/code><\/pre>\n<h3>Bile\u015fenin A\u00e7\u0131klamas\u0131:<\/h3>\n<ul>\n<li><code>chartRef<\/code>: Bu de\u011fi\u015fken, ApexCharts&#8217;\u0131n grafi\u011fi \u00e7izece\u011fi HTML <code>div<\/code> eleman\u0131na bir referans tutar. SolidJS&#8217;in <code>ref<\/code> \u00f6zelli\u011fi ile bu elemana eri\u015firiz.<\/li>\n<li><code>chartInstance<\/code>: Bu de\u011fi\u015fken, olu\u015fturulan ApexCharts \u00f6rne\u011fini tutar. Bu sayede grafi\u011fi daha sonra g\u00fcncelleyebilir veya yok edebiliriz.<\/li>\n<li><code>onMount(() => { ... })<\/code>: Bu SolidJS ya\u015fam d\u00f6ng\u00fcs\u00fc kancas\u0131, bile\u015fen DOM&#8217;a ilk kez ba\u011fland\u0131\u011f\u0131nda \u00e7al\u0131\u015f\u0131r. Burada, <code>new ApexCharts()<\/code> kullanarak grafi\u011fin ilk \u00f6rne\u011fini olu\u015fturur ve <code>chartInstance.render()<\/code> ile ekrana \u00e7izeriz. \u0130lk se\u00e7enekler ve seri, <code>props<\/code> \u00fczerinden al\u0131n\u0131r.<\/li>\n<li><code>createEffect(() => { ... })<\/code>: Bu kanca, <code>props.options<\/code> veya <code>props.series<\/code> gibi ba\u011f\u0131ml\u0131l\u0131klar\u0131 de\u011fi\u015fti\u011finde yeniden \u00e7al\u0131\u015f\u0131r. SolidJS&#8217;in reaktivite sistemi sayesinde, bu prop&#8217;lar de\u011fi\u015fti\u011finde <code>createEffect<\/code> otomatik olarak tetiklenir. \u0130\u00e7eride, <code>chartInstance.updateOptions()<\/code> ve <code>chartInstance.updateSeries()<\/code> metotlar\u0131n\u0131 kullanarak mevcut grafi\u011fi yeni verilerle g\u00fcncelleriz. Bu, grafi\u011fin yeniden \u00e7izilmeden verimli bir \u015fekilde g\u00fcncellenmesini sa\u011flar.<\/li>\n<li><code>onCleanup(() => { ... })<\/code>: Bu kanca, bile\u015fen DOM&#8217;dan kald\u0131r\u0131ld\u0131\u011f\u0131nda (\u00f6rne\u011fin, bir sayfa de\u011fi\u015fikli\u011finde) \u00e7al\u0131\u015f\u0131r. <code>chartInstance.destroy()<\/code> metodunu \u00e7a\u011f\u0131rarak ApexCharts \u00f6rne\u011fini yok ederiz. Bu, bellek s\u0131z\u0131nt\u0131lar\u0131n\u0131 \u00f6nlemek ve kaynaklar\u0131 serbest b\u0131rakmak i\u00e7in \u00f6nemli bir ad\u0131md\u0131r.<\/li>\n<\/ul>\n<p>Bu \u00f6zel bile\u015fen sayesinde, ApexCharts&#8217;\u0131n t\u00fcm g\u00fcc\u00fcn\u00fc SolidJS&#8217;in reaktif ve performansl\u0131 yap\u0131s\u0131yla sorunsuz bir \u015fekilde kullanabiliriz.<\/p>\n<h2>Farkl\u0131 Grafik T\u00fcrlerini Kullanma ve Veri G\u00fcncelleme<\/h2>\n<p>Art\u0131k \u00f6zel <code>ApexChart<\/code> bile\u015fenimiz haz\u0131r oldu\u011funa g\u00f6re, onu <code>App.jsx<\/code> dosyam\u0131zda farkl\u0131 grafik t\u00fcrleriyle nas\u0131l kullanaca\u011f\u0131m\u0131z\u0131 ve verileri nas\u0131l dinamik olarak g\u00fcncelleyece\u011fimizi g\u00f6relim.<\/p>\n<p><code>src\/App.jsx<\/code> dosyan\u0131z\u0131 a\u015fa\u011f\u0131daki gibi g\u00fcncelleyelim:<\/p>\n<pre><code class=\"language-jsx\">\/\/ src\/App.jsx\nimport { createSignal } from 'solid-js';\nimport ApexChart from '.\/components\/ApexChart';\nimport '.\/App.css'; \/\/ Global stilleriniz i\u00e7in\n\nfunction App() {\n  \/\/ \u00c7ubuk grafik i\u00e7in sinyal\n  const [barChartSeries, setBarChartSeries] = createSignal([\n    {\n      name: 'Sat\u0131\u015flar',\n      data: [30, 40, 45, 50, 49, 60, 70, 91, 125],\n    },\n  ]);\n\n  const barChartOptions = {\n    chart: {\n      type: 'bar',\n      height: 350,\n      toolbar: {\n        show: false,\n      },\n    },\n    plotOptions: {\n      bar: {\n        horizontal: false,\n        columnWidth: '55%',\n        endingShape: 'rounded',\n      },\n    },\n    dataLabels: {\n      enabled: false,\n    },\n    stroke: {\n      show: true,\n      width: 2,\n      colors: ['transparent'],\n    },\n    xaxis: {\n      categories: ['Oca', '\u015eub', 'Mar', 'Nis', 'May', 'Haz', 'Tem', 'A\u011fu', 'Eyl'],\n    },\n    yaxis: {\n      title: {\n        text: 'Adet',\n      },\n    },\n    fill: {\n      opacity: 1,\n    },\n    tooltip: {\n      y: {\n        formatter: function (val) {\n          return val + ' Adet';\n        },\n      },\n    },\n    title: {\n      text: 'Ayl\u0131k Sat\u0131\u015f Performans\u0131',\n      align: 'left',\n    },\n  };\n\n  \/\/ Pasta grafik i\u00e7in sinyal\n  const [pieChartSeries, setPieChartSeries] = createSignal([44, 55, 13, 43, 22]);\n  const pieChartOptions = {\n    chart: {\n      type: 'pie',\n      height: 350,\n    },\n    labels: ['Apple', 'Mango', 'Orange', 'Watermelon', 'Banana'],\n    responsive: [\n      {\n        breakpoint: 480,\n        options: {\n          chart: {\n            width: 200,\n          },\n          legend: {\n            position: 'bottom',\n          },\n        },\n      },\n    ],\n    title: {\n      text: 'Meyve Da\u011f\u0131l\u0131m\u0131',\n      align: 'left',\n    },\n  };\n\n  \/\/ Dinamik veri g\u00fcncelleme fonksiyonu\n  const updateBarChartData = () => {\n    setBarChartSeries([\n      {\n        name: 'Sat\u0131\u015flar',\n        data: barChartSeries()[0].data.map((value) => value + Math.floor(Math.random() * 20) - 10),\n      },\n    ]);\n  };\n\n  const updatePieChartData = () => {\n    setPieChartSeries(pieChartSeries().map((value) => value + Math.floor(Math.random() * 10) - 5));\n  };\n\n  return (\n    <div class=\"App\" style=\"padding: 20px;\">\n      <h2>SolidJS ve ApexCharts Entegrasyonu<\/h2>\n\n      <div style=\"margin-bottom: 40px;\">\n        <h3>\u00c7ubuk Grafik \u00d6rne\u011fi<\/h3>\n        <ApexChart options={barChartOptions} series={barChartSeries()} \/>\n        <button onClick={updateBarChartData} style=\"margin-top: 10px; padding: 8px 15px; cursor: pointer;\">\n          \u00c7ubuk Verilerini G\u00fcncelle\n        <\/button>\n      <\/div>\n\n      <div>\n        <h3>Pasta Grafik \u00d6rne\u011fi<\/h3>\n        <ApexChart options={pieChartOptions} series={pieChartSeries()} \/>\n        <button onClick={updatePieChartData} style=\"margin-top: 10px; padding: 8px 15px; cursor: pointer;\">\n          Pasta Verilerini G\u00fcncelle\n        <\/button>\n      <\/div>\n    <\/div>\n  );\n}\n\nexport default App;\n<\/code><\/pre>\n<p>Bu kodda:<\/p>\n<ul>\n<li><code>createSignal<\/code> kullan\u0131larak her grafik t\u00fcr\u00fc i\u00e7in ayr\u0131 ayr\u0131 veri (<code>series<\/code>) ve se\u00e7enekler (<code>options<\/code>) tan\u0131mlanm\u0131\u015ft\u0131r.<\/li>\n<li><code>ApexChart<\/code> bile\u015feni, <code>options<\/code> ve <code>series<\/code> prop&#8217;lar\u0131n\u0131 alarak kullan\u0131l\u0131r. SolidJS&#8217;in reaktif yap\u0131s\u0131 sayesinde, <code>barChartSeries()<\/code> veya <code>pieChartSeries()<\/code> sinyallerinin de\u011feri her de\u011fi\u015fti\u011finde, <code>ApexChart<\/code> bile\u015feni i\u00e7indeki <code>createEffect<\/code> kancas\u0131 tetiklenecek ve grafik otomatik olarak g\u00fcncellenecektir.<\/li>\n<li><code>updateBarChartData<\/code> ve <code>updatePieChartData<\/code> fonksiyonlar\u0131, rastgele de\u011ferler ekleyerek grafik verilerini dinamik olarak g\u00fcnceller. Bu fonksiyonlar bir butona t\u0131klanarak \u00e7a\u011fr\u0131l\u0131r ve grafiklerin an\u0131nda g\u00fcncellendi\u011fini g\u00f6sterir.<\/li>\n<li>ApexCharts&#8217;\u0131n sundu\u011fu geni\u015f se\u00e7enek yelpazesini kullanarak (<code>chart.type<\/code>, <code>xaxis<\/code>, <code>yaxis<\/code>, <code>plotOptions<\/code>, <code>dataLabels<\/code>, <code>title<\/code> vb.) grafiklerinizi tamamen \u00f6zelle\u015ftirebilirsiniz. Daha fazla se\u00e7enek i\u00e7in <a href=\"https:\/\/apexcharts.com\/docs\/options\/\">ApexCharts dok\u00fcmantasyonunu<\/a> inceleyebilirsiniz.<\/li>\n<\/ul>\n<p>Uygulaman\u0131z\u0131 ba\u015flatmak i\u00e7in terminalinizde <code>npm run dev<\/code> komutunu \u00e7al\u0131\u015ft\u0131r\u0131n. Taray\u0131c\u0131n\u0131zda a\u00e7\u0131lan sayfada \u00e7ubuk ve pasta grafiklerinizi g\u00f6recek ve &#8220;Verileri G\u00fcncelle&#8221; butonlar\u0131na t\u0131klayarak grafiklerin dinamik olarak nas\u0131l de\u011fi\u015fti\u011fini g\u00f6zlemleyebileceksiniz.<\/p>\n<h2>Sonu\u00e7 ve S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h2>\n<p>Bu rehberde, SolidJS uygulamalar\u0131n\u0131za ApexCharts&#8217;\u0131 nas\u0131l entegre edece\u011finizi, \u00f6zel bir SolidJS bile\u015feni olu\u015fturarak farkl\u0131 grafik t\u00fcrlerini nas\u0131l kullanaca\u011f\u0131n\u0131z\u0131 ve verileri dinamik olarak nas\u0131l g\u00fcncelleyece\u011finizi \u00f6\u011frendiniz. SolidJS&#8217;in performans odakl\u0131 reaktif yap\u0131s\u0131 ile ApexCharts&#8217;\u0131n zengin g\u00f6rselle\u015ftirme yeteneklerini birle\u015ftirmek, modern ve etkile\u015fimli veri g\u00f6rselle\u015ftirme \u00e7\u00f6z\u00fcmleri geli\u015ftirmek i\u00e7in g\u00fc\u00e7l\u00fc bir yol sunar.<\/p>\n<p>Kendi <code>ApexChart<\/code> bile\u015feninizi olu\u015fturarak, SolidJS&#8217;in <code>onMount<\/code>, <code>createEffect<\/code> ve <code>onCleanup<\/code> gibi ya\u015fam d\u00f6ng\u00fcs\u00fc kancalar\u0131n\u0131 etkin bir \u015fekilde kulland\u0131k. Bu yakla\u015f\u0131m, gereksiz yeniden renderlamalar\u0131 \u00f6nlerken, grafiklerin prop de\u011fi\u015fikliklerine verimli bir \u015fekilde tepki vermesini sa\u011flar. Uygulaman\u0131z b\u00fcy\u00fcd\u00fck\u00e7e veya daha karma\u015f\u0131k grafikler ekledik\u00e7e, bu yap\u0131 size sa\u011flam bir temel sa\u011flayacakt\u0131r.<\/p>\n<h3>S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h3>\n<p><strong>1. ApexCharts&#8217;\u0131n SolidJS ile kullan\u0131m\u0131 i\u00e7in \u00f6zel bir SolidJS k\u00fct\u00fcphanesi var m\u0131?<\/strong><\/p>\n<p>Hay\u0131r, ApexCharts&#8217;\u0131n SolidJS i\u00e7in resmi olarak yay\u0131nlanm\u0131\u015f \u00f6zel bir sar\u0131c\u0131 (wrapper) k\u00fct\u00fcphanesi bulunmamaktad\u0131r. Ancak yukar\u0131da g\u00f6sterdi\u011fimiz gibi, ApexCharts&#8217;\u0131n JavaScript k\u00fct\u00fcphanesini do\u011frudan SolidJS&#8217;in reaktif primitifleri (<code>onMount<\/code>, <code>createEffect<\/code>) ile sararak kendi \u00f6zel bile\u015feninizi kolayca olu\u015fturabilirsiniz. Bu yakla\u015f\u0131m olduk\u00e7a yayg\u0131n ve etkilidir.<\/p>\n<p><strong>2. Grafik boyutunu nas\u0131l ayarlar\u0131m?<\/strong><\/p>\n<p>Grafi\u011fin boyutunu ApexCharts se\u00e7enekleri i\u00e7inde <code>chart.height<\/code> ve <code>chart.width<\/code> \u00f6zelliklerini kullanarak ayarlayabilirsiniz. \u00d6rne\u011fin: <code>chart: { height: 350, width: '100%' }<\/code>. Ayr\u0131ca, grafi\u011fi \u00e7evreleyen <code>div<\/code> eleman\u0131na CSS ile de boyut verebilirsiniz. ApexCharts genellikle duyarl\u0131d\u0131r ve kapsay\u0131c\u0131s\u0131n\u0131n boyutlar\u0131na g\u00f6re kendini ayarlar.<\/p>\n<p><strong>3. Verilerimi dinamik olarak nas\u0131l g\u00fcncellerim?<\/strong><\/p>\n<p>Verilerinizi dinamik olarak g\u00fcncellemek i\u00e7in SolidJS&#8217;in <code>createSignal<\/code> mekanizmas\u0131n\u0131 kullan\u0131n. Grafik verilerini tutan sinyali g\u00fcncelledi\u011finizde (\u00f6rne\u011fin <code>setBarChartSeries([...yeniVeri])<\/code>), <code>ApexChart<\/code> bile\u015feninizdeki <code>createEffect<\/code> kancas\u0131 otomatik olarak tetiklenecek ve ApexCharts&#8217;\u0131n <code>updateSeries()<\/code> ve\/veya <code>updateOptions()<\/code> metotlar\u0131 ile grafik g\u00fcncellenecektir.<\/p>\n<p><strong>4. Birden fazla grafik kullanabilir miyim?<\/strong><\/p>\n<p>Evet, uygulaman\u0131zda istedi\u011finiz kadar <code>ApexChart<\/code> bile\u015feni kullanabilirsiniz. Her bir bile\u015fen kendi <code>options<\/code> ve <code>series<\/code> prop&#8217;lar\u0131n\u0131 alacak ve ba\u011f\u0131ms\u0131z bir ApexCharts \u00f6rne\u011fini y\u00f6netecek \u015fekilde tasarlanm\u0131\u015ft\u0131r. Her grafik i\u00e7in farkl\u0131 sinyaller ve se\u00e7enekler tan\u0131mlayarak birden fazla grafi\u011fi ayn\u0131 anda g\u00f6sterebilirsiniz.<\/p>\n<p><strong>5. ApexCharts&#8217;\u0131n temalar\u0131n\u0131 nas\u0131l de\u011fi\u015ftiririm?<\/strong><\/p>\n<p>ApexCharts, \u00e7e\u015fitli tema se\u00e7enekleri sunar. <code>options<\/code> nesnesi i\u00e7inde <code>theme<\/code> \u00f6zelli\u011fini kullanarak temay\u0131 de\u011fi\u015ftirebilirsiniz. \u00d6rne\u011fin: <code>theme: { mode: 'dark', palette: 'palette1' }<\/code>. Ayr\u0131ca, ApexCharts&#8217;\u0131n CSS de\u011fi\u015fkenlerini kullanarak veya kendi \u00f6zel CSS&#8217;inizi yazarak da grafikleri stilize edebilirsiniz. Detayl\u0131 bilgi i\u00e7in ApexCharts <a href=\"https:\/\/apexcharts.com\/docs\/themes\/\">tema dok\u00fcmantasyonuna<\/a> bakabilirsiniz.<\/p>\n<p><\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Veri g\u00f6rselle\u015ftirme, modern web uygulamalar\u0131n\u0131n vazge\u00e7ilmez bir par\u00e7as\u0131d\u0131r. Kullan\u0131c\u0131lar\u0131n karma\u015f\u0131k veri setlerini h\u0131zl\u0131 ve anla\u015f\u0131l\u0131","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-38324","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>SolidJS ve ApexCharts: Neden Birlikte Harika? - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/solidjs-ve-apexcharts-neden-birlikte-harika\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"SolidJS ve ApexCharts: Neden Birlikte Harika?\" \/>\n<meta property=\"og:description\" content=\"Veri g\u00f6rselle\u015ftirme, modern web uygulamalar\u0131n\u0131n vazge\u00e7ilmez bir par\u00e7as\u0131d\u0131r. Kullan\u0131c\u0131lar\u0131n karma\u015f\u0131k veri setlerini h\u0131zl\u0131 ve anla\u015f\u0131l\u0131\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/solidjs-ve-apexcharts-neden-birlikte-harika\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2026-01-28T17:41:36+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/solidjs-ve-apexcharts-neden-birlikte-harika\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/solidjs-ve-apexcharts-neden-birlikte-harika\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"SolidJS ve ApexCharts: Neden Birlikte Harika?\",\"datePublished\":\"2026-01-28T17:41:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/solidjs-ve-apexcharts-neden-birlikte-harika\/\"},\"wordCount\":1489,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/solidjs-ve-apexcharts-neden-birlikte-harika\/#respond\"]}],\"copyrightYear\":\"2026\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/solidjs-ve-apexcharts-neden-birlikte-harika\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/solidjs-ve-apexcharts-neden-birlikte-harika\/\",\"name\":\"SolidJS ve ApexCharts: Neden Birlikte Harika? - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2026-01-28T17:41:36+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/solidjs-ve-apexcharts-neden-birlikte-harika\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/solidjs-ve-apexcharts-neden-birlikte-harika\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/solidjs-ve-apexcharts-neden-birlikte-harika\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"SolidJS ve ApexCharts: Neden Birlikte Harika?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"SolidJS ve ApexCharts: Neden Birlikte Harika? - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/solidjs-ve-apexcharts-neden-birlikte-harika\/","og_locale":"tr_TR","og_type":"article","og_title":"SolidJS ve ApexCharts: Neden Birlikte Harika?","og_description":"Veri g\u00f6rselle\u015ftirme, modern web uygulamalar\u0131n\u0131n vazge\u00e7ilmez bir par\u00e7as\u0131d\u0131r. Kullan\u0131c\u0131lar\u0131n karma\u015f\u0131k veri setlerini h\u0131zl\u0131 ve anla\u015f\u0131l\u0131","og_url":"https:\/\/fatihsoysal.com\/blog\/solidjs-ve-apexcharts-neden-birlikte-harika\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2026-01-28T17:41:36+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"9 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/solidjs-ve-apexcharts-neden-birlikte-harika\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/solidjs-ve-apexcharts-neden-birlikte-harika\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"SolidJS ve ApexCharts: Neden Birlikte Harika?","datePublished":"2026-01-28T17:41:36+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/solidjs-ve-apexcharts-neden-birlikte-harika\/"},"wordCount":1489,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/solidjs-ve-apexcharts-neden-birlikte-harika\/#respond"]}],"copyrightYear":"2026","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/solidjs-ve-apexcharts-neden-birlikte-harika\/","url":"https:\/\/fatihsoysal.com\/blog\/solidjs-ve-apexcharts-neden-birlikte-harika\/","name":"SolidJS ve ApexCharts: Neden Birlikte Harika? - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2026-01-28T17:41:36+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/solidjs-ve-apexcharts-neden-birlikte-harika\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/solidjs-ve-apexcharts-neden-birlikte-harika\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/solidjs-ve-apexcharts-neden-birlikte-harika\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"SolidJS ve ApexCharts: Neden Birlikte Harika?"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/38324","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=38324"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/38324\/revisions"}],"predecessor-version":[{"id":38325,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/38324\/revisions\/38325"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=38324"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=38324"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=38324"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}