column shading alignment

[elliotashton]

I'm trying to set an alternating column shade s as per the examples (using vanilla javascript), however, the shading is not correctly sitting in the columns as per the following example...

The following is the code (javascript) I've used to do the shading.

grid: { row: { colors: ['#5FB665', '#5FB665','transparent', 'transparent','#5FB665', '#5FB665'], opacity: 0.1 }, column: { colors: ['#5FB665', '#5FB665','transparent', 'transparent','#5FB665', '#5FB665','transparent', 'transparent','#5FB665', '#5FB665','transparent', 'transparent'], opacity: 0.1 }, xaxis: { lines: { show: true } } },

I'm using ApexCharts v3.19.0.

[AbdulRahman-Proxcurity]

@elliotashton @franklx @yangkun @rndmerle @zur4ik

I am also facing the same issue if I use a vertical bar graph and in the case of horizontal bar graph shading of row background working fine

Let me know if you found out any solution regarding the same

Thanks in advance

[junedchhipa]

Can anyone provide a working Codepen example, please?

[AbdulRahman-Proxcurity]

Can anyone provide a working Codepen example, please?

@junedchhipa PFB working example link on stackblitz

https://stackblitz.com/edit/react-h5pvks

[AbdulRahman-Proxcurity]

@junedchhipa Do we have any solution for this yet?

[junedchhipa]

@AbdulRahman-Proxcurity Thanks for providing the Codepen. There is no immediate solution right now as it's a bug and will need a change in the core library. I will take a look at it soon.

[AbdulRahman-Proxcurity]

There is no immediate solution right now as it's a bug and will need a change in the core library.

@junedchhipa

Done Thanks for your time spent really appreciate it keep me posted

[modimir]

Same probleme her on ApexCharts v3.30.0

[modimir]

11395: var _x6 = w.globals.padHorizontal + w.globals.gridWidth / (xc + (w.config.chart.type === 'bar' ? 1 : 0) ); 11412 :_x5 = _x5 + w.globals.gridWidth / (xc + (w.config.chart.type === 'bar' ? 1 : 0));

[ciprian1992]

Reproduces also for : "apexcharts": "3.41.1", "ng-apexcharts": "1.8.0".

Happens also when adding column background colors on a barchart. Happens only on 'category' type. (on 'numeric' type it doesn't reproduce)

I used the example data from: https://apexcharts.com/javascript-chart-demos/column-charts/column-with-group-label/

Reproduction: https://stackblitz-starters-8hcnbe.stackblitz.io

[ciprian1992]

@junedchhipa thanks for looking into this before. I saw @modimir proposed a fix and the PR was marked as stale, should we recreate the PR?