apexcharts.js
apexcharts.js copied to clipboard
apexcharts
xaxis.tickAmount not working for Bubble chart
I am testing the bubble chart. This chart has the range of x-axis between 0 and 1. If I set the tickamount for 9 the chart is render correctly. In this case the ticks will be placed at every 0.1 on the x-axis. However if want to have the ticks at ever 0.05 I would expect that setting the tickamout to 18 would do the trick. However when I do that the max value is changed to 1.9 (not observing the max value set for x-axis) and the ticks are still placed at every 0.1. Another problem is that the bubble remain in the same position. Observe that the x-axis type is numeric.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>title</title>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
</head>
<body>
<div id = 'chart'>
</div>
<script>
var options = {
series: [{name: 'Bubble1',
data: [[0.2,0.5,10]]},
{name: 'Bubble2',
data: [[0.3,0.8,20]]}],
chart: {
height: 350,
type: 'bubble',
},
dataLabels: {
enabled: false
},
fill: {
opacity: 0.8
},
title: {
text: 'Simple Bubble Chart'
},
xaxis: {
tickAmount: 9,
type: 'numeric',
min:0,
max:1,
labels: {
formatter: function (val) {
return val.toFixed(2);
}
}
},
yaxis: {
min: 0,
max: 1,
labels: {
formatter: function (val) {
return val.toFixed(2);
}
}
},
legend: {
position: 'right'
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
</script>
</body>
</html>
Steps to Reproduce
- Copy the code above in a empty html file
- Change the tickamount value in xaxis option (line 31) to 18 (5 has a similar effect)
- Open the file in the browser.
Expected Behavior
Setting the tickamount should respect the maximun value set for the axis
Actual Behavior
Depening on the value set for the tickamount in the x-axis options its scaled is messed up, not respecting the max value and the bubbles are not realocated to mach the new scale.
