How to fix bubble size (marker size) in canvasjs?

I want chart to look like this:

So far I'm very close to my expected output but not exactly what I want. Here is my current codebase:

<!DOCTYPE HTML>
<html>
<head>
  <script type="text/javascript">
      window.onload = function () {
      var ToolTipHtml = "";
        ToolTipHtml += "<div><b>{number}</b></div>";

    var chart = new CanvasJS.Chart("chartContainer",
    {
      title:{
      text: "SEStimate Planning Graph"  
      },
	     axisX: {
                title: "Age in Months",
				interval:1
				
            },
            axisY: {
                title: "SEstimate Score",
				interval:5,
				gridThickness: 0
            },
      creditText: "Hardiks Line Chart",
      data: [
	  {        
        type: "line",
		color:"blue",
		markerSize:0,
		toolTipContent: "",
        lineThickness:2,
        dataPoints: [
        { x: 36, y: 35 },
        { x: 45, y: 35}
        ]
      },
	  {        
        type: "line",
		color:"blue",
		toolTipContent: "",
		markerSize:0,
        lineThickness:2,
        dataPoints: [
        { x: 42, y: 0 },
        { x: 42, y: 43}
        ]
      },
      {        
        type: "line",
		color:"cyan",
		toolTipContent: "",
        lineThickness:2,
		indexLabelPlacement: "inside",
        dataPoints: [
        { x: 43, y: 35},
        { x: 48, y: 37,markerSize:20, indexLabel:"5"},
		{x:55,y:42,markerSize:20, indexLabel:"5"}
        ]
      },
	  {        
        type: "line",
		color:"purple",
		toolTipContent: "",
        lineThickness:2,
		markerSize:27,
        dataPoints: [
        { x: 43, y: 35 },
        { x: 48, y: 43,indexLabel:"10"},
		{x:55,y:54, indexLabel:"10"},
		{x:61,y:60, indexLabel:"10"},
		{x:67,y:70, indexLabel:"10"},
        ]
      },
      {        
          type: "line",
		  color:"red",
		  toolTipContent: "",
        lineThickness:2,
		markerSize:0,
          lineDashType: "dash",
          dataPoints: [
          { x: 41, y: 25 },
          { x: 47, y: 25},
		  { x: 61, y: 58},
		  { x: 72, y: 58}
          ]
      },
        {        
        type: "line",
		color:"green",
		toolTipContent: "",
        lineThickness:2,
		markerSize:0,
		lineDashType: "dash",
        dataPoints: [
        { x: 40, y: 30, abc:"hardy1" },
        { x: 61, y: 76, abc:"hardy2"},
        { x: 72, y: 76, abc:"hardy3" }
        ]
      },
	  {
	  type: "bubble",
	  toolTipContent: "",
	   indexLabelPlacement: "inside", 
     dataPoints: [
     { x: 39, y: 20,z:2.0, number: "II",indexLabel: "II",markerColor: "yellow", radius:  "90%" },
     { x: 39, y: 30,z:2.0, number: "HH", indexLabel:"HH",markerColor: "yellow", radius:  "90%" },
	 { x: 42, y: 35,z:2.0, number: "JJ", indexLabel:"JJ",markerColor: "yellow", radius:  "90%"},
     { x: 45, y: 45, z:2.0, number: "GG", indexLabel:"GG",markerColor: "yellow", radius:  "90%"},
	 { x: 48, y: 50, z:2.0, markerSize:10,number: "EE", indexLabel:"EE",markerColor: "yellow", radius:  "90%"},
	 { x: 48, y: 35, z:2.0, markerSize:10, number: "FF", indexLabel:"FF",markerColor: "yellow", radius:  "90%"},
	 { x: 51, y: 43, z:2.0, number: "DD", indexLabel:"DD",markerColor: "yellow", radius:  "90%"},
	 { x: 52, y: 81, z:2.0, number: "CC", indexLabel:"CC",markerColor: "yellow", radius:  "90%"},
	 { x: 54, y: 35, z:2.0, number: "BB", indexLabel:"BB",markerColor: "yellow", radius:  "90%"},
	 {	 x: 54, y: 70, z:2.0, number: "AA", indexLabel:"AA",markerColor: "yellow", radius:  "90%"}
     ]
	  }
      
      ]
    });

    chart.render();
  }
  </script>
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js"></script>
  </head>
<body>
  <div id="chartContainer" style="height: 450px; width: 100%;">
  </div>
</body>
</html>

Output of my code looks like this:

How can I fix all the bubbles size in bubble chart of CanvasJS? Is there any property for setting and fix all the bubbles in same size?

So far I tried markerSize Property and also set all bubbles data's z field value to same but all the bubbles are looking very large. I want to show the bubbles in small size.

Solution

Hardik,

You can try scatter chart instead of bubble to achieve this.

Check this jsfiddle for solution for your requirement.

var ToolTipHtml = "";
ToolTipHtml += "<div><b>{number}</b></div>";

var chart = new CanvasJS.Chart("chartContainer",{
	title:{
		text: "SEStimate Planning Graph",
		fontSize: 40,
		fontColor: "#000",
		horizontalAlign: "left"
	},
	axisX: {
		title: "Age in Months",
		interval: 1,
		minimum: 35.5,
		labelFontSize: 14,
		labelFontColor: "#000",
		titleFontColor: "#000",
		titleFontSize: 20,
		tickColor: "transparent",
		lineColor: "#4A83BA",
	},
	axisY: {
		title: "SEstimate Score",
		interval:5,
		gridThickness: 0,
		labelFontSize: 14,
		labelFontSize: 14,
		labelFontColor: "#000",
		titleFontColor: "#000",
		titleFontSize: 20,
		tickColor: "transparent",
		lineColor: "#4A83BA",
		maximum: 100,
	},
	data: [
		{        
		type: "line",
		color:"#4A83BA",
		markerSize:0,
		toolTipContent: "",
		lineThickness:2,
		dataPoints: [
			{ x: 35, y: 35 },
			{ x: 36, y: 35 },
			{ x: 45, y: 35}
		]
		},
		{        
		type: "line",
		color:"#4A83BA",
		toolTipContent: "",
		markerSize:0,
		lineThickness:2,
		dataPoints: [
			{ x: 42, y: 0 },
			{ x: 42, y: 43 }
		]
		},
		{        
		type: "line",
		color:"#00B2EC",
		lineThickness:2,		
		markerSize:30,
		dataPoints: [
			{ x: 43, y: 35 },
			{ x: 48, y: 37 },
			{ x: 55, y:42 }
		]
		},
		{        
		type: "scatter",
		color:"#00B2EC",		
		indexLabelPlacement: "inside",		
		indexLabelFontSize: 16,
		indexLabelFontColor: "#fff",
		markerSize:30,
		markerBorderThickness: 1,
		markerBorderColor: "#79A2BF",
		dataPoints: [
			{ x: 43, y: 35 },
			{ x: 48, y: 37, indexLabel:"5" },
			{ x: 55, y:42, indexLabel:"5" }
		]
		},
		{        
		type: "line",
		color:"purple",
		toolTipContent: "",
		lineThickness:2,
		markerSize:30,
		markerBorderThickness: 1,
		markerBorderColor: "#79A2BF",
		dataPoints: [
			{ x: 43, y: 35 },
			{ x: 48, y: 43 },
			{ x: 55, y: 54 },
			{ x: 61, y: 60 },
			{ x: 67, y: 70 },
		]
		},
		{
		type: "scatter",
		color:"purple",
		toolTipContent: "",
		indexLabelPlacement: "inside",
		indexLabelFontSize: 16,
		indexLabelFontColor: "#fff",
		markerSize:30,
		markerBorderColor: "#79A2BF",
		dataPoints: [
			{ x: 43, y: 35 },
			{ x: 48, y: 43, indexLabel:"10" },
			{ x:55, y:54, indexLabel:"10" },
			{ x:61, y:60, indexLabel:"10" },
			{ x:67, y:70, indexLabel:"10" },
		]
		},
		{        
		type: "line",
		color:"red",
		toolTipContent: "",
		lineThickness:3,
		markerSize:0,
		lineDashType: "dash",
		dataPoints: [
			{ x: 41, y: 25 },
			{ x: 47, y: 25 },
			{ x: 61, y: 58 },
			{ x: 72, y: 58 }
		]
		},
		{        
		type: "line",
		color:"#00F84C",
		toolTipContent: "",
		lineThickness: 3,
		markerSize:0,
		lineDashType: "dash",
		dataPoints: [
			{ x: 40, y: 30, abc:"hardy1" },
			{ x: 61, y: 76, abc:"hardy2" },
			{ x: 72, y: 76, abc:"hardy3" }
		]
		},
		{
		type: "scatter",
		toolTipContent: "",
		indexLabelPlacement: "inside",
		indexLabelFontSize: 14,
		indexLabelFontColor:"#1BBDCA",
		markerSize: 30,
		markerBorderThickness: 1,
		markerColor:"#FFFC47",
		markerBorderColor: "#79A2BF",
		dataPoints: [
			{ x: 39, y: 20, number: "II", indexLabel: "II" },
			{ x: 39, y: 30, number: "HH", indexLabel: "HH" },
			{ x: 42, y: 35, number: "JJ", indexLabel: "JJ" },
			{ x: 45, y: 45, number: "GG", indexLabel: "GG" },
			{ x: 48, y: 50, number: "EE", indexLabel: "EE" },
			{ x: 48, y: 35, number: "FF", indexLabel: "FF" },
			{ x: 51, y: 43, number: "DD", indexLabel: "DD" },
			{ x: 52, y: 81, number: "CC", indexLabel: "CC" },
			{ x: 54, y: 35, number: "BB", indexLabel: "BB" },
			{ x: 54, y: 70, number: "AA", indexLabel: "AA" }
		]
		}
	]
});

chart.render();

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 600px; width: 100%;"></div>