mhkeller / layercake

graphics framework for sveltejs
https://layercake.graphics
MIT License
1.41k stars 31 forks source link

How to handle combo charts? #183

Closed jhiney closed 7 months ago

jhiney commented 7 months ago

What would be the best way to approach a "combo" chart, like this example:

https://observablehq.com/@d3/bar-line-chart

Specifically I am having trouble when the data set for the line chart and bar chart would be different. For example, funding by year plotted onto a bar chart, and the overall summation of funding per year plotted onto the line chart. They would have the same scale, but what would be the best way to superimpose them?

mhkeller commented 7 months ago

I would do them as two separate <LayerCake> components and use the position='absolute' prop (https://layercake.graphics/guide#position)

I think "one cake per dataset" is a good rule and then you super-impose them on top of one another. Just make sure the margins and scale extents are the same. Use the debug prop to double check.

jhiney commented 7 months ago

Excellent, this is exactly what I was looking for. Thank you!