From the course: DC.js for Data Science Essential Training

Unlock the full course today

Join today to access over 23,200 courses taught by industry experts.

Modifying our bar chart

Modifying our bar chart - JavaScript Tutorial

From the course: DC.js for Data Science Essential Training

Start my 1-month free trial Buy for my team

Modifying our bar chart

“

- [Teacher] DC offers us a huge number of settings to change the appearance of our charts. With a bar chart, we can start by using .gap, and we can set that to one, we know it defaults to two. And you might be able to see that that has got a bit thinner, and we can change it to 10, and of course we see it get larger. Alternatively, you can use barPadding and outerPadding. Now these work differently to gap, just comment that out, in that they accept a percentage in decimal form. So they're expecting a number between zero and one. The percentage is applied to the bar width, so let's try first of all a barPadding of one and we won't set outerPadding to anything. And you can see we have matchstick-thin bars there because barPadding has eaten away all of the space. So let's change that to 0.5, and that looks a lot better. So we've got three bars here now, and we've got four gaps. One, two, three, four, and our four gaps are all equal. Now if we set barPadding to 0.2, you see that the gaps…

Contents