dimple.js Scatter Plot issues

Question

in the below code, i am have plotted a scatter plot. there are couple of questions i have. the rendered chart can be found here: https://jsfiddle.net/dizzy0ny/ch2187dd/4/

   var data1 = [
      {"x":0.123,"y":0.046},
      {"x":0.032,"y":-0.0345},
      {"x":-0.044,"y":-0.0505},
      {"x":0.05,"y":0.076},
      {"x":0.04,"y":0.036},
      {"x":-.034,"y":0.029},
      {"x":-.023,"y":0.087},
      {"x":0.034,"y":0.067},
      {"x":0.024,"y":0.048},
      {"x":0.087,"y":-0.09},
    ]; 
    var svg = dimple.newSvg("#chartContainer", 600,600);

      var myChart = new dimple.chart(svg);
      myChart.setBounds(90, 35, 480, 400)
      xAxis = myChart.addCategoryAxis("x", "x");
      yAxis = myChart.addCategoryAxis("y", "y");
      xAxis.showGridlines = true;
      yAxis.showGridlines = true;
      xAxis.tickFormat = '%'
      yAxis.tickFormat = '%'
      yAxis.ticks = 5 
      xAxis.ticks = 5 
      s1 = myChart.addSeries("Price Tier", dimple.plot.bubble, [xAxis, yAxis]);
      s1.data = data1
      myChart.addLegend(90, 480, 330, 20, "left");
      myChart.draw();

1. Why is the is the axis ticks property not working? In the above i want only 5 labels along the axis
2. Notice in the chart, '5%' and '3%' are shown as labels twice. is there anyway to prevent this?
3. Notice the odd vertical white space in the middle of the chart, where the '0%' line should be. Why isn't 0% shown and why no vertical line at that point in the x-axis?
4. Why no line down the y-vertical axis (like you see along the x-axis above the labels?
5. lastly, is there a simple way to plot a regression line on this chart?

Thanks much

Answer 1

You've used category axes which is an ordinal axis of the distinct values. That's the reason for the behaviours you describe, they are being treated as text values not numbers. Try using a measure axis like this:

xAxis = myChart.addMeasureAxis("x", "x");
yAxis = myChart.addMeasureAxis("y", "y");

You also need to adjust the series to include the x and y dimensions, otherwise they will be aggregated:

s1 = myChart.addSeries(["x", "y", "Price Tier"], dimple.plot.bubble, [xAxis, yAxis]);

Here it is working.

https://jsfiddle.net/ch2187dd/5/

A regression line is a separate issue, there is no out of the box way, you would need to calculate the points manually.