Increase width of column series in charts using CSS

[Former Member]

Dears,

My requirement being increasing the width of each columns in a Column - Combination chart and i am unable to do that.

But i am able to fill colors to the columns with the following piece of code in CSS.

g.v-m-maing.v-m-plotg.v-column:nth-child(1) .v-datapoint.v-morphable-datapoint {fill: RGB(146,208,80)}

but when I try to increase width with the below piece of code its not working....

g.v-m-main g.v-m-plot g.v-column:nth-child(1) .v-datapoint.v-morphable-datapoint {width: 45px;}

Please let me know if I am missing anything in my code.

Rgds,

Sethu.

[former_member194504 · Accepted solution]

Hi sethuraman,

g.v-m-main g.v-m-plot g.v-column:nth-child(1) .v-datapoint.v-morphable-datapoint {width: 45px; !important}

will do the work.

Thanks,
Nithyanandam

[Former Member · Accepted solution]

Hi Venu,

Yes, I have tried the same but its not working.

Please let me know is there any other possibility to achieve the same.

Note : width is increasing automatically when we map less no of columns in x-axis but also spacing between columns also increasing proportionately where in my requirement is to increase the width of each column bar and reduce the spacing between one to the other column.

Rgds,

Sethu.

[former_member194504 · Accepted solution]

Hi sethu,

You forgot this !important in your code. I added  and tested it out, its working. Please check it out properly

Thanks,
Nithyanandam

[Former Member · Accepted solution]

Hi Venu,

No I have implemented and got the screenshot for the same but its not getting applied. PFA for your perusal or let me know what I am missing as its working for you.

Rgds,

Sethu.

.

[former_member194504 · Accepted solution]

Hi sethu,

Seems we both are doing the same. I hope you upload the css file in repository and doing the changes. And can you tell me which browswer are you using?

I have tried in broswer developer tool which seems working fine, can you test this out in chrome as per screenshot

1.Right click inspect element

2.change the width in style

Thanks,
Nithyanandam

[Former Member · Accepted solution]

Hi Venu,

Yes you are right. It seems like its working in Chrome browser, as previously I was checking in Firefox browser where it was not working.

Still as per my requirement I have got to implement 2 things.

1) The column width is getting extended to the other month where it is not getting aligned to be displayed in respective months means the column width of June is extending to July also as I have highlighted in red color.

2) It has to work on mobile devices where I have to check for the same and would update.

Rgds,

Sethu.

[former_member194504 · Accepted solution]

Hi sethu,

Hope that solves your issues, in case of the new requirement you mentioned please close this thread and open it in a new thread. I will give a look on this, whether the axis can be increased. And, i hope this works fine with mobile.

Thanks,
Nithyanandam

[Former Member · Accepted solution]

Hi Venu,

Ok if that is the case we can close this thread, would like to thank you for extending your support.

Rgds,

Sethu.

[TammyPowlas]

Hi Sethu - I've traced through the DOM and I am not seeing where changing the column width is an option -- maybe others have ideas but I can't find it.

[Former Member]

Thank you for goin thru my request....will do as you suggested...

rgds,

sethu,