plz click here to check the image want to show the bubble but hide the grid line.
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>
<!-- Chart code -->
<script>
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);
chart.colors.step = 3;
// Add data
chart.data = [ {
"y": 5,
"x": 3,
"value": 50,
"y2": 15,
"x2": 8,
"value2": 12
}, {
"y": 10,
"x": 8,
"value": 19,
"y2": 4,
"x2": 6,
"value2": 35
}, {
"y": 15,
"x": 4,
"value": 92,
"y2": 10,
"x2": 8,
"value2": 102
}, {
"y": 13,
"x": 1,
"value": 8,
"y2": 2,
"x2": 0,
"value2": 41
}, {
"y": 1,
"x": 6,
"value": 35,
"y2": 0,
"x2": 3,
"value2": 16
} ];
// Create axes
var xAxis = chart.xAxes.push(new am4charts.ValueAxis());
xAxis.renderer.minGridDistance = 50;
var yAxis = chart.yAxes.push(new am4charts.ValueAxis());
yAxis.renderer.minGridDistance = 50;
chart.maskBullets = true;
yAxis.paddingBottom = 10;
// Create series #1
var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.valueY = "y";
series.dataFields.valueX = "x";
series.dataFields.value = "value";
series.strokeOpacity = 0;
series.name = "Series 1";
var bullet = series.bullets.push(new am4charts.CircleBullet());
bullet.strokeOpacity = 0.2;
bullet.stroke = am4core.color("#ffffff");
bullet.nonScalingStroke = true;
bullet.tooltipText = "x:{valueX} y:{valueY}";
series.heatRules.push({
target: bullet.circle,
min: 10,
max: 60,
property: "radius"
});
// Create series #2
var series2 = chart.series.push(new am4charts.LineSeries());
series2.dataFields.valueY = "y2";
series2.dataFields.valueX = "x2";
series2.dataFields.value = "value2";
series2.strokeOpacity = 0;
series2.name = "Series 2";
var bullet2 = series2.bullets.push(new am4charts.Bullet());
bullet2.tooltipText = "x:{valueX} y:{valueY}";
bullet2.layout = "absolute";
bullet2.rotation = 45;
var rectangle = bullet2.createChild(am4core.Rectangle);
rectangle.verticalCenter = "middle";
rectangle.horizontalCenter = "middle";
rectangle.width = 10;
rectangle.height = 10;
rectangle.strokeOpacity = 0.5;
rectangle.stroke = am4core.color("#ffffff");
rectangle.nonScalingStroke = true;
rectangle.verticalCenter = "middle";
rectangle.horizontalCenter = "middle";
series2.heatRules.push({
target: rectangle,
min: 1,
max: 8,
property: "scale"
});
chart.scrollbarX = new am4core.Scrollbar();
chart.scrollbarY = new am4core.Scrollbar();
chart.legend = new am4charts.Legend();
</script>
<div id="chartdiv"></div>
Grid line(y-axis)is going beyond x-axis as i have given paddingBottom for yAxis.i tried giving maskBullet = false, but when i scroll bubbles will go out of chart. So i tried giving padding bottom to show the bubbles which lay on x axis 0 value