Filter placement for chart/graph

[pamelahu]

Background

I'm wanting to add a date range filter to this bar graph but unsure where to place it.

Feedback

Wondering if I should follow the format for tables where I place the filter right below the title of the bar graph? Or there's a blank spot to the right of the title, should I right-align the filters there?

The tricky part is that, unlike a table, the title of the bar graph is within the same container.

Stage of design

No response

Research

No response

Relevant links

https://www.figma.com/design/3EhzR20r7YrWGOcKoNww6m/2024-Q4-Milestone-1%3A%E2%80%A8Billing-Overview-Page-Overhaul?node-id=1-131738&t=aFDpkyFXqkIbkDFs-1

Are you looking for visual design support?

• Yes

Additional Information

No response

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Sorry, I don't know how to help with that.

I did do a search though, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Using date picker within a filter menu (updated: 06/22/2023, similarity score: 85%)
• Report - Filter Data by Date range -- Canned date range vs. Custom date range selection (updated: 10/16/2022, similarity score: 84%)
• Adding filter with a variety of filtering options (updated: 06/06/2023, similarity score: 83%)

[pamelahu]

Sorry, originally signed up for office hours with this post but I think it can be resolved async via just the Github discussion!

[serifluous]

Hey @pamelahu ! The new Filter pattern doesn't really apply to charts yet. We're going to do some work to add to our data visualization guidelines soon, so stay tuned for that 🤞 .

For now, you can use 2 Date Pickers aligned to the upper right corner of the Card like you mentioned.

Also, what do you mean by "the title of the bar graph is within the same container"? Does that mean, the title is part of the chart, or just that they're in the same Card?