apexcharts.js icon indicating copy to clipboard operation
apexcharts.js copied to clipboard

xaxis -> "datetime" cuts off the outer columns.

Open abvas opened this issue 1 year ago • 2 comments

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();

Image 99

Reproduction Link

https://codepen.io/abvas/pen/gOqrGKg?editors=0010

abvas avatar Nov 18 '23 17:11 abvas

After update 3.44.2, "dataLabels" appeared on the outer columns, but the columns are still truncated.

abvas avatar Dec 05 '23 20:12 abvas

A pull request for this and duplicate issue #4178 was merged into the main branch yesterday.

rosco54 avatar Feb 12 '24 05:02 rosco54