Horizontal bar chart - No Scroll option

[vasu-ram]

When creating a horizontal bar chart, The chart attempts to display all of the data. As a result, the chart may have 30+ bars making the data extremely difficult to read

Actual

Expected

To make the chart more usable, the option to scroll would be useful

[eterry1388]

Not a huge fan as it may not be obvious that there is a scrollbar to see more bars. Wouldn't it be better to sort desc and limit the series (such as just showing the top 10)? Or even grouping by ranges would be better than a scroll bar IMO.

[justin-tomlinson]

I think the scroll bar would be useful for keeping the display readable. When using a categorical value on the chart axis, it shouldnt hide category labels. I think having a Top n function would be useful in this chart. A dynamic Top N control thats exposed on the dashboard would be useful (suimilar to how the page selection shows on the table vis).

@vasu-ram my current work around for this is to use a table chart type and turn on cell bars. You can further customise the cell bar colours using CSS as shown below on the dashboard, its not a perfect workaround though.

.cell-bar.positive {
  background-color: rgba(31, 168, 201, .5);
}

.cell-bar.negative {
  background-color:  rgba(31, 168, 201, .5);
}

[vasu-ram]

Thanks for your message. Unfortunately I have to use more than 100 category on horizontal chart.

Initially I tried with Table chart using below colour (our company theme)

.cell-bar { background-color: #ff733c; }

The colour makes the data label to not visible. I tried when cell bars colours touches the data label then 'data label' should be white colour but no luck

But Horizontal chart with scroll would be one of the useful option for everyone

[justin-tomlinson]

Hi, I had a similar issue when I first used the css styling. I see that you are specifying a hex code for the background colour. The trick is to use the rgba() function to define the colour like in my example as the last number is for opacity/transperancy. You can convert your hex colour code to a rgba and it should make the label text visible if you set the a-value appropriately (less that 1, maybe 0.7).

---

From: vasu-ram @.> Sent: Friday, January 26, 2024 2:25:00 AM To: apache/superset @.> Cc: Justin Tomlinson @.>; Comment @.> Subject: Re: [apache/superset] Horizontal bar chart - No Scroll option (Issue #26667)

Thanks for your message. Unfortunately I have to use more than 100 category on horizontal chart.

Initially I tried with Table chart using below colour (our company theme)

.cell-bar { background-color: #ff733c; }

The colour makes the data label to not visible. I tried when cell bars colours touches the data label then 'data label' should be white colour but no luck

— Reply to this email directly, view it on GitHubhttps://github.com/apache/superset/issues/26667#issuecomment-1910550638, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AHB6XWNF333XI264655INHTYQKBNZAVCNFSM6AAAAABCAVGP6GVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMJQGU2TANRTHA. You are receiving this because you commented.Message ID: @.***>

[mohamed-montaser91]

scroll bar should be there really, it was there in old legacy bar chart, idk why they remove it, i'm facing the same issue

[michael-s-molina]

Hi all. The way we resolve this problem is with the data zoom option where users can visualize the complete dataset but also have the flexibility to define a visualization window and scroll through data. That tool was not working correctly for horizontal bar charts but I opened https://github.com/apache/superset/pull/27291 to fix it.

[vasu-ram]

Hi Michael,

Thanks for making that change, the zoom bar on the horizontal orientation would be very useful and we will definitely be implementing that into our dashboards. Is there the possibility that we can have the functionality to save the status of the zoom bar or define the length of the zoom bar in the chart config or as something we can change on CSS so that we can define the length of the zoom bar to x Pixels for example. I've attached a recording of our use case where we have a table with Car Manufacturers which has about 30 different car manufacturer

https://github.com/apache/superset/assets/55632570/e7b03bc4-633f-470a-a9f7-c60f93214055

[michael-s-molina]

Is there the possibility that we can have the functionality to save the status of the zoom bar or define the length of the zoom bar in the chart config or as something we can change on CSS so that we can define the length of the zoom bar to x Pixels for example.

Hi @vasu-ram. The problem is that the status/length of the zoom bar depends on the dataset length which can be different depending on the applied filters. Initializing a chart without any filter would produce a completely different zoom bar than initializing the same chart with a filter that returns only 3 bars.

[vasu-ram]

Hi @michael-s-molina , thanks for the update, it looks good, it will be a great help if we can set the bar width on the edit chart page (or using CSS) on the dashboard page the bar can appear as below image, and if the the total number of bars can fit within the chart area, the scroll bar should disappear/hide automatically/dynamically

[felipegranado]

Hello!

The scrollbar is still interesting even with the zoom feature for 2 reasons:

1. Zoom does not give us the possibility to define a default quantity to be displayed on the graph;
2. The bar allows us to configure the default quantity to be displayed to the user, removing the user's obligation to zoom through the resource.

The idea would be a box asking if you want to display compressed or expanded and a field where we could put the number of bars (almost a truncate axis hahaha).

I believe that providing the option would be ideal so that, in each case, the most appropriate resource is used!