First and last bars in bar chart are cropped

[ashleydavis]

Hi, just started using this library and am loving it.

I've found an odd issue that appears to be caused by the way I'd like to structure my data.

It might be similar to this previous issue:

#280

I started with this example that works the way I want:

https://apexcharts.com/javascript-chart-demos/column-charts/column-with-data-labels/

Then I restructured the data to be the way I'd like it, example code in this repo:

https://github.com/ashleydavis/apex-charts-example

Now my first and last bars are cropped:

Is this a bug or is this a mistake in the way that I'm using it?

Thanks so much.

[ashleydavis]

This is the code that renders the chart with the cropped bars:

var chartDef = {
    chart: {
        type: 'bar',
    },
    series: [{
        name: 'Inflation',
        data: [
            { x: 0, y: 2.3 }, 
            { x: 1, y: 3.1, },
            { x: 2, y: 4.0,  },
            { x: 3, y: 10.1,  },
            { x: 4, y: 4.0,  },
            { x: 5, y: 3.6,  },
            { x: 6, y: 3.2,  },
            { x: 7, y: 2.3,  },
            { x: 8, y: 1.4,  },
            { x: 9, y: 0.8,  },
            { x: 10, y: 0.5,  },
            { x: 11, y: 0.2 },
        ]
    }],
};

var chart = new ApexCharts(document.querySelector("#chart"), chartDef);

chart.render();

[junedchhipa]

Sorry for the late response.
The fix for the candlestick issue which you referenced was for datetime x-axis.
If you're seeing this issue in a numeric x-axis, I will take another look.

You can also avoid it by converting x-axis to category (if you're not plotting linear/datetime data). I will show an example soon.

[junedchhipa]

Adding this would prevent the cropping of the first and last bar

   xaxis: {
      type: 'numeric',
      tickAmount: 'dataPoints'
    }

[ashleydavis]

Thanks adding type: 'numeric' does the job.

I'm integrated ApexCharts into my application:

http://www.data-forge-notebook.com/

I've love to give you a free copy of it and be able to get your feedback ;)

[junedchhipa]

Sorry for the late response, I missed your last message.
Sure, I would love to try it out ;)

[ashleydavis]

Awesome. Please send me an email to ashley@codecapers.com.au, then I'll have your email and I can sign you for a free copy of Data-Forge Notebook.

[EvanBarbour3]

@junedchhipa I'm having the same problem, but can't change my type to numeric or category as I have a large data set, and when changing it to one of these, I get lots of labels that overlap one another (even when hideOverlappingLabels is used, or tickAmount is a number like 10, it still shows them all).

For me, only the last column is cropped off

Should this be a new issue?

[Evanda-crypto]

Hello..may I get help why my graph is showing 23rd instead of 1st..This occurs for every month in apex chart.