dc.js
dc.js copied to clipboard
composite chart with ordinal (stacked) bar and line bar spacing issue
I implemented (https://github.com/nomego/dc-owc) a composite chart with a stacked, ordinal bar chart and a line chart and the spacing between the bars are too tight and overlapping. Switching to scaleLinear and centerBar as in http://dc-js.github.io/dc.js/examples/composite-bar-line.html works but then half of the first and last bars are cut off, as in the example.
Is there any way to use the combo of composite + bar + ordinal ?
With scaleLinear and centerBar and elasticX(true) you can also set .xAxisPadding(0.5) to get the desired result.
There's always a way with dc.js... it may be hacky and the library is not able to do a lot of things automatically, but there is always a way...
On the composite bar/line example, changing
- .x(d3.scaleLinear().domain([2.9,16.1]))
+ .x(d3.scaleLinear()).xAxisPadding(0.5).elasticX(true)
produces the desired result:
![image](https://user-images.githubusercontent.com/1366709/114059424-59752b00-9862-11eb-87e5-5d94669be473.png)
I'm updating the example, since I'm not sure why the domain was hard-coded previously.
Ok, thanks! No reason to fix ordinal in composite? Are these two setups interchangable (ordinal vs linear+padding+elastic)? Why use one over the other?
Hmm not using xUnits ordinal seems to prevent clicking on the bars to add a filter, even if addFilterHandler is used?
You're right, ordinal composite is one of many things that would be nice to fix in dc.js. The workaround for most things that don't work with ordinal scales is to use continuous scales, but we still want to fix them.
Ordinal and continuous scales are not interchangeable, in fact the coordinate grid mixin, and especially the bar chart, checks whether xUnits is ordinal many places and uses different logic.
As you note, one of the obvious differences is selection via brush or clicking.
If I want to stick to ordinal for the clickability, how can I affect the width calculation? CSS margins, hard-coded width values somewhere or what else?
I found this answer you gave a while back https://stackoverflow.com/a/33267720/3489298 that solved it, but it feels like a bad way to go :) Also issue #678 is about the underlying problem
Yes, it is bad and yes it is the best workaround I know of currently.
You could see if the changes suggested by @jcamins in #678 help.