CODEWITHSUNDEEP
reactjsfusioncharts
Shira
Shira

Reputation: 424

React Fusion-Charts bar width

I can't seem to find the prop that changes a bar width. I want it to be much thinner. How can I change this? enter image description here

Upvotes: 2

Views: 635

Answers (3)

Aman Saraswat
Aman Saraswat

Reputation: 172

On a Bar chart, there is spacing defined between two bars. By default, the spacing is set to 20% of canvas width. If you intend to increase or decrease the spacing between columns, you can do so using this attribute. For example, if you wanted all columns to stick to each other without any space in between, you can set plotSpacePercent to 0. Similarly, if you want very thin columns, you can set plotSpacePercent to its max value of 80.

chart :{
plotSpacePercent: 80
}

Upvotes: 0

HirenParekh
HirenParekh

Reputation: 3735

By using the maxBarHeight attribute you can have better control over the bar height.

 "chart": {
          "maxBarHeight" : "10"   // <----  use MaxBarHeight to set max value in px
  },

Demo: https://jsfiddle.net/yc0h8L7x/

Docs: https://www.fusioncharts.com/dev/chart-attributes/bar2d check Functional Attributes section here.

Upvotes: 0

Zapdos13
Zapdos13

Reputation: 865

You can set the width of the bars by using the "plotSpacePercent" chart attribute. Please find the link to the demo which has the same attribute implemented. Kindly try this at your end and let us know if you still face any issues.

chart :{
plotSpacePercent: 70
}

Demo: https://jsfiddle.net/ar9t485c/

Upvotes: 2

Related Questions