Dynamic Scaling of ApexCharts Scatter Plot with Large Dataset

I am using ApexCharts to render a scatter plot with a large dataset (around 300+ points) where each point has an x and y value. Here’s an example of my data: (client requirement)

**opr_planned_arr1** = [
{x: 3, y: 22},
{x: 3, y: 27},
{x: 3, y: 33},
...
]

**opr_Executed_arr1**= [
{x: 6, y: 93},
{x: 6, y: 94},
{x: 8, y: 104},
{x: 10, y: 113}
]

**opr_Reviewed_arr1** = []


const xValues = allData.map(point => point.x);
const yValues = allData.map(point => point.y);

const xMin = Math.min(...xValues);
const xMax = Math.max(...xValues);
const yMin = Math.min(...yValues);
const yMax = Math.max(...yValues);

const tickAmountX = xMax - xMin;
const tickAmountY = yMax - yMin;

// Adjust height
const chartHeight = Math.min(Math.max(140, tickAmountY * 10), 1000);

const chartOptions = {
series: [
{
name: "Planned",
data: opr_Planned_arr1,
color: '#FE2836'
},
{
name: "Execution In Progress",
data: opr_Executed_arr1,
color: '#feb019',
},
{
name: "Completed",
data: opr_Reviewed_arr1,
color: '#00e396',
},
],
chart: {
type: 'scatter',
zoom: { enabled: false },
toolbar: { show: false },
height: chartHeight ,
},
markers: {
size: 6,
},
xaxis: {
type: 'numeric',
tickAmount: 23,
min: 0,
max: 23,
},
yaxis: {
tickAmount: tickAmountX ,
min: 0,
max: xMax,
},
stroke: { width: 1 },
};

• How can I ensure that all points are properly aligned with their respective x and y values?
• Is there a better way to dynamically calculate and set the tickAmount, min, max, and chart height for large datasets in ApexCharts?

​

Any insights, suggestions, or examples would be greatly appreciated!

1. 
   I used ApexCharts to render a scatter plot with dynamic axis configurations. I calculated the min, max, and tickAmount for both x and y axes based on my dataset. Additionally, I adjusted the chart height dynamically to fit the data and enabled zoom for better navigation.
   
   
2. 
   I expected all data points to align correctly on the chart, with no overlaps or misalignments. I also aimed for the chart to scale dynamically based on the dataset's range and size, ensuring that the scatter points were clear and visually distinguishable.
   

3.Some points are not aligned correctly with their respective axes, especially when the dataset is large or has sparse x-values. The chart does not always scale as expected, and some points seem skipped or misrepresented. live eg : Reference_Picutre_of_Issue

Continue reading...