minimum and maximum scatter chart issues

• September 23, 2022 at 10:00 am #39164
  
  wendofire

  As per attached in the screenshot below
  Screenshot image

  The edges here are not selectable, they are only half as you can see. How can i do it so these are full circles and therefore selectable?
  I had selected as the axis the minimum and the maximum so it scales correctly. But then i have this issue. Is their anyway i can fix this or avoid this.

  Thanks

  September 23, 2022 at 4:43 pm #39180
  
  wendofire

  var chart = new CanvasJS.Chart(“chartContainer1”,
  {
  title:{
  text: “Basic Scatter Chart”
  },

  axisX:{
  minimum: -1,
  maximum: 50
  },
  data: [
  {
  type: “scatter”,
  dataPoints: [
  { y: 23, x: 0 },
  { y: 54, x: 1 },
  { y: 10, x: 2 },
  { y: 42, x: 1 },
  { y: 50, x: 50 }

  ]
  }
  ]
  });
  chart.render();

  September 23, 2022 at 7:17 pm #39182
  
  Thangaraj Raman

  @pfiasco,

  When axis minimum and maximum are set, the datapoints that are present either outside or nearer to the set range will get clipped. You can either decrease or increase the range to show datapoints without getting them clipped. In your case, setting maximum to 51 seems to be working fine. Please find the code snippet below.

  axisX: {
    minimum: -1,
    maximum: 51
  }

  Please check this JSFiddle for a working example.

  —
  Thangaraj Raman
  Team CanvasJS

  September 23, 2022 at 8:57 pm #39183
  
  wendofire

  So basically your saying we should never set the minimum and maximum according to the data given otherwise it wont show properly.
  So in theory always such as -10% and +10% of the data given so we never get it clipped? Both on the x and y axis right?

  September 26, 2022 at 6:42 pm #39195
  
  Thangaraj Raman

  @pfiasco,

  The datapoint will be positioned exactly on the x and y coordinate that was passed. However, the size of the marker used to represent a particular datapoint can vary based on it’s size. For example: in your code, the last datapoint is { y: 50, x: 50 }, hence the center of the marker will be positioned on the coordinate { y: 50, x: 50 } and since you are setting axisX maximum to 50, only half the marker will be visible while the other half gets clipped. You will have to set axis maximum and minimum accordingly such that the entire datapoint can be accommodated within the plot area.

  —
  Thangaraj Raman
  Team CanvasJS