Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

composite chart with ordinal (stacked) bar and line bar spacing issue #1827

Open
nomego opened this issue Apr 6, 2021 · 8 comments
Open

Comments

@nomego
Copy link
Contributor

nomego commented Apr 6, 2021

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 ?

image

@gordonwoodhull
Copy link
Contributor

gordonwoodhull commented Apr 7, 2021 via email

@gordonwoodhull
Copy link
Contributor

gordonwoodhull commented Apr 8, 2021

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

I'm updating the example, since I'm not sure why the domain was hard-coded previously.

@nomego
Copy link
Contributor Author

nomego commented Apr 8, 2021

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?

@nomego
Copy link
Contributor Author

nomego commented Apr 8, 2021

Hmm not using xUnits ordinal seems to prevent clicking on the bars to add a filter, even if addFilterHandler is used?

@gordonwoodhull
Copy link
Contributor

gordonwoodhull commented Apr 8, 2021

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.

@gordonwoodhull gordonwoodhull reopened this Apr 8, 2021
@nomego
Copy link
Contributor Author

nomego commented Apr 13, 2021

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?

@nomego
Copy link
Contributor Author

nomego commented Apr 26, 2021

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

@gordonwoodhull
Copy link
Contributor

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants