Apexcharts How to Swap xAxis to yAxis?

Question

I have line chart use Apexcharts plugins, i want to swap position xAxis to yAxis and yAxis to xAxis. Anyone know?, this is from example code Apexchart Line

 var options = {
        series: [{
          name: "Desktops",
          data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
      }],
        chart: {
        height: 350,
        type: 'line',
        zoom: {
          enabled: false
        }
      },
      dataLabels: {
        enabled: false
      },
      stroke: {
        curve: 'straight'
      },
      title: {
        text: 'Product Trends by Month',
        align: 'left'
      },
      grid: {
        row: {
          colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
          opacity: 0.5
        },
      },
      xaxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
      },

      annotations: {
          xaxis:[{
              x : 45,
              strokeDashArray: 0,
              borderColor: '#775DD0',
             label: {
                borderColor: '#775DD0',
                style: {
                    color: '#fff',
                    background: '#775DD0',
                },
                text: 'Anno Test',
                }
          }]

      }
      };

      var chart = new ApexCharts(document.querySelector("#chartsimple"), options);
      chart.render();

result:

i want to swap xAxis (Months) to yAxis, and yAxis(number) to xAxis like this picture bellow:

Answer 1

Here's an example of how you would achieve what you want. You'll have to change the data to suit your needs. There's many different ways to provide the data with ApexCharts. From the code that you copied from the documentation, all I did was experiment with the x and y values and change the type to type: scatter

 let data = []; let i = 0; for (i = -10; i <= 10; i++) data.push({ x: i, y: (Math.sin(i/10) * 10) -10 }); var options = { series: [{ data: data }], chart: { height: 350, type: 'scatter', zoom: { enabled: false } }, dataLabels: { enabled: false }, title: { text: 'Modified Math.Sin', align: 'left' }, grid: { row: { colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns opacity: 0.5 }, }, annotations: { xaxis: [{ x: 45, strokeDashArray: 0, borderColor: '#775DD0', label: { borderColor: '#775DD0', style: { color: '#fff', background: '#775DD0', }, text: 'Annotation', } }] } }; var chart = new ApexCharts(document.querySelector("#chartsimple"), options); chart.render();

 <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script> <div id="chartsimple"></div>