[Help] Creating a bar chart with one sided rounded rectangle

[dennismphil]

Happy New Year!

I need a bit of help in creating the chart shown below. 

The columns need to be rounded on the top end only and the y-axis dates need to be formatted so that the y-axis formatted date labels are aligned with the center of the bars. 

How would you go about implementing this?

Notebook

https://observablehq.com/d/5488d85cbe5f8d48

[mbostock]

Here is my suggestion using the rx option, and then “faking it” by using a negative insetBottom and clip.

Plot.rectY(data, {x: "Date", y: "Count", interval: d3.utcDay, rx: 6, insetBottom: -3, clip: "frame"})

https://observablehq.com/d/022b0876b936b4cb

Edit (July 2024): This is now supported in Plot as of #2099.

[dennismphil]

Thank you for the prompt response and your time answering 🙏.

Edit: Clip bug seems to be resolved. So approach 2 works well.

I saw both the approaches mentioned in the notebook and the drawbacks

• Approach 1: Labels not aligned to the center of the bars
• Approach 2: Clip bug

makes both the approaches not quite meet the needs.

To fake the top side only rounded corners, the thought I had was to draw 2 bars:

1. Draw a bar with rounded corner. This will create a bar will all sides rounded.
2. Draw another bar on top of first bar without the corner radius with half the height. This should create the desired visual requirements.

The drawback of this approach this is not quite efficient and on some high res screens with careful eyes, the overlapping bars are visible looking at the edges.

I wish there was an option to make this implementation a bit straightforward without doing a hack.

[Kiss-World]

use barY。