Bar chart adjusting/resizing/scaling & start/end date scaling

[pamelahu]

I'm designing a graph that can have 1 to 12 months. Wondering if you have suggestions on how to adjust the graph as it shrinks/grows? If there are a few bars, there is a huge gap between the bars and I got feedback that it looks very empty.

Also, regarding the date filter, the date that can be selected is a month and a year and this can go back 5 years. So October 2019 is an option as a start/end date. Originally, I was going to have a drop down (with options October 2019, November 2019... October 2024) but there would be 5*12 = 60 months to choose from. The current date picker requires a day, but a day isn't needed in this case. Do you have suggestions on how to accommodate for all the possible months? We don't want users to input a date & year combo that isn't within the 5 year range so I avoided a free form input field.

[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:

• Filter placement for chart/graph (updated: 11/06/2024, similarity score: 85%)
• Using date picker within a filter menu (updated: 06/22/2023, similarity score: 84%)
• Custom date range selection (updated: 03/06/2023, similarity score: 84%)

[serifluous]

Hey @pamelahu !

For column width in the chart, you can reference Highcharts's docs. Using Highcharts GPT pointed me to the pointWidth property.

For the month-year picker, can you submit a dependency request for this? https://airtable.com/appwvsQKyJHfnG5Sa/shrvMvL3BG6Zm0f9l I think we could build something based off the native HTML month picker. For now, you can use 4 Select components:

• Start month
• Start year
• End month
• End year

You could put them in a Popover if you feel like 4 Selects in the corner is too much.

[pamelahu]

@serifluous Can you elaborate more specifically on how I should be using Highchart's docs?

Kara had mentioned:
@Pamela Hu I saw your question on github. Here's how we're handling different number of bars. I think you could even go wider on the super spaced out one. Another option is to always show 12 months, but some months will be empty.That's kind of the nature of graphs, so it's not going to be an issue of understanding if there is more white space, so it's the trade off we made rather than making the bars super wide

Making bars wider:

Or show 12 months but 6 months are empty (will look something to the effect of this):

[serifluous]

Re: Highcharts docs, you could look into using the pointWidth property to adjust the width of the columns: https://api.highcharts.com/highcharts/series.column.pointWidth HighchartsGPT also told me that the width could be made responsive, but you'll have to verify that with your engineering team.

@kkenna3's suggestion also works, but I imagine she's saying to show all 12 months on the x-axis of the chart and have it fill the width of the card, but the empty months just have a value of 0 (instead of the 2nd image you have, which is showing the chart only fill half the width of the card).

[pamelahu]

@serifluous Also what are your thoughts on placement of the filter popover?
Even though there's a weird gap in the right, I think I prefer the option where the filter is underneath the graph title.

I like how it looks best with no "filter" label in the right hand side... but is this okay with no label? o_O

[serifluous]

Under the graph title works, and helps with discoverability when elements are left-aligned. btw we're going to work on patterns around data visualization and charting soon, so some of these layouts will get more standardized and easier to use.

The "filter" label is still recommended here to make it easier for users to understand what the "date range" form pill would actually do.

[pamelahu]

Gotcha. Thank you for the answers!!!

…

On Fri, Nov 15, 2024 at 1:58 PM Sarah ***@***.***> wrote: Under the graph title works, and helps with discoverability when elements are left-aligned. btw we're going to work on patterns around data visualization and charting soon, so some of these layouts will get more standardized and easier to use. The "filter" label is still recommended here to make it easier for users to understand what the "date range" form pill would actually do. — Reply to this email directly, view it on GitHub <https://urldefense.com/v3/__https://github.com/twilio-labs/paste/discussions/4154*discussioncomment-11272365__;Iw!!NCc8flgU!eRGuWxXGFY_42-__aRfxHplBwO01oeOwN_xmhnH_M0wSyXPAnmeNBQrlbupaKYXjtD6VPuzd3FlZ8E1kTN8v$>, or unsubscribe <https://urldefense.com/v3/__https://github.com/notifications/unsubscribe-auth/AEN6JREO4H2MZSPXPPQN67D2AY73VAVCNFSM6AAAAABRVGFZCCVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTCMRXGIZTMNI__;!!NCc8flgU!eRGuWxXGFY_42-__aRfxHplBwO01oeOwN_xmhnH_M0wSyXPAnmeNBQrlbupaKYXjtD6VPuzd3FlZ8Jj95SA0$> . You are receiving this because you were mentioned.Message ID: ***@***.***>

-- Pamela Hu Product Designer, Twilio.org [image: Twilio] <https://www.twilio.com/?utm_source=email_signature>