Problems When Changing Chart Type/Series Data

I have two problems really, but they revolve around the changing of a chart specifically from an area type to a scatter type, and vice-versa.

I have a codepen that switches the options, the series, and the chartType variables on click event. https://codesandbox.io/s/react-basic-example-if6i1?fontsize=14

By default, the chart shows the area, and it looks great, but switch it to scatterand all of a sudden my markers are gone, the series data on the x axis is busted, lots changes. back to area, and it's good again.

If you switch this.state.area to be false, you will see the scatter chart load first, and then when you switch it to the area chart, it is super messed up!

I think what's happening is when the chart initially loads it fills in the default values for the options and then when the chartType changes, it only replaces the variables that have changed. This might be intended functionality, so you can have two different chart types that maintain styles across them, but i need two very different charts. Even when i split the render path to only return different, hardcoded <Chart />'s with different id's, it still maintains the old options.

I think what, at least for me, would be INCREDIBLY helpful, would be to see the full set of default options for each chart type in the docs, or a method that will return a full/complete options object that i can hook into the updated lifecycle method or something. I cannot find them anywhere, i can just find bits and pieces.

pics attached: 1. area => scatter and 2. scatter => area

One last note - for the scatter chart i think my series data is a bit off! what i want is one dataPoint per x value, and that dataPoint is something like:

{ x: 2, y: 0.32, value/name/label: "The Safety & Wellbeing of Debra and Other Women" }

currently it is having me set 5 datapoints for every series, when maybe x = 0 and 3 will be series 1, x = 1 will be series 2, series 3 doesnt have any values. thats the x value, the y value is a percentage that is coupled with the series name. ex: { x:1, y:0.46, name: seriesName }

I cannot find any way to do this gracefully in the documentation, if you know a way (single xaxis datapoint scatter but from a multi series dataset - only one dataPoint from a single series on each x axis though... if that makes any sense). below is another method i tried to get the data to plot correctly:

example of another way i tried getting the scatter plots to be correct (no 0 values)
[
  {
    name: "The Safety & Wellbeing of Debra and Other Women",
    data: [[0, 0.307], [3, 0.273]]
  },
  { name: "John's Background & Con Artistry", data: [] },
  {
    name: "The Coordinated Effort Against John",
    data: [[1, 0.3104], [4, 0.3381]]
  },
  {
    name: "Drugs, Recovery, Hospitals and Healthy Resolution",
    data: [[2, 0.4104]]
  }
];
I thought it would be 
{
  name: "name",
  data: [[x, y]]
}
but that's what this series is and it does not work

apexcharts / react-apexcharts

Problems When Changing Chart Type/Series Data #77