The scatter plot marker positions do not always match the provided data

[lovasoa]

Description

The scatter plot marker positions are incorrect.

Steps to Reproduce

1. Open https://codepen.io/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-/pen/MYgMyjY?editors=0010
2. Look at the position of the markers compared with the positions specified in the source

Source:

var options = {
  chart: {
    type: "scatter"
  },
  xaxis: {
    min: 0,
    max: 10,
    title: {
      text: "Growth Rate"
    },
  },
  yaxis: [
    {
      max: 25,
      min: 0,      
      title: {
        text: "GDP (Trillions USD)",
      }
    }
  ],
  series: [
    {
      name: "Brazil",
      data: [
        {
          x: 2.5,
          y: 2
        }
      ],
    },
    {
      name: "China",
      data: [
        {
          x: 6.5,
          y: 14
        }
      ],
    },
    {
      name: "United States",
      data: [
        {
          x: 2.3,
          y: 21
        }
      ],
      group: "apexcharts-axis-0"
    },
    {
      name: "France",
      data: [
        {
          x: 1.5,
          y: 3
        }
      ],
    },
    {
      name: "South Africa",
      data: [
        {
          x: 0.9,
          y: 0.3
        }
      ],
    }
  ],
  annotations: {
    yaxis: [],
    xaxis: [],
    points: []
  }
};

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

chart.render();

Expected Behavior

The marker for "China", with an x value of 6.5 should be rendered further to the right, after the x axis tick for the value 6.

Actual Behavior

All markers seem to be rendered too far to the left.

Screenshots

Reproduction Link

https://codepen.io/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-/pen/MYgMyjY?editors=0010

source

Initially reported on sqlpage/SQLPage#797

[lovasoa]

Thank you very much for the fix, @junedchhipa ! Do you think you could make a new release with the fix ?