apexcharts.js
apexcharts.js copied to clipboard
xaxis -> "datetime" cuts off the outer columns.
If you set xaxis: {type: "datetime"}, chart: {type: "bar" } and there are more than three elements in each series, then the outer columns are cut off.
In addition, “dataLabels” are not displayed on the outer columns
The simplest implementation:
let series = [{
name: 'PRODUCT A',
data: [44, 55, 41, 67, 22, 43]
}, {
name: 'PRODUCT B',
data: [13, 23, 20, 8, 13, 27]
}, {
name: 'PRODUCT C',
data: [11, 17, 15, 15, 21, 14]
}, {
name: 'PRODUCT D',
data: [21, 7, 25, 13, 22, 8]
}];
var options = {
chart: {
type: "bar"
},
series: series,
xaxis: {
type: "datetime",
categories: ['01/01/2011 GMT', '01/02/2011 GMT', '01/03/2011 GMT', '01/04/2011 GMT', '01/05/2011 GMT', '01/06/2011 GMT'],
},
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
Reproduction Link
After update 3.44.2, "dataLabels" appeared on the outer columns, but the columns are still truncated.
A pull request for this and duplicate issue #4178 was merged into the main branch yesterday.