Y axis bar values are overlapping with each other in apache superset bar chart

Question

When I try to show the bar value in the bar chart of apache superset, y axis bar values overlap with each other.

To fix this issue, I want to rotate the y-axis values with 45 degree so that those values will look vertically and won't overlap with each other, just like it is there in x-axis values.

Answer 1

I don't have an easy but bad answer for you, and a more difficult but rational answer.

The bad/easy answer: You might be able to do this with CSS, at least in any given dashboard. For that, you'd want to take your Dashboard into Edit mode, and pick "Edit CSS" from the "..." menu in the top right. There, you should have access to write some clever CSS selectors (let me know if you need help) and tweak CSS properties of the SVG text element (i.e. text-anchor, transform). That said I think you're going to have a bad time with this approach, since you don't have access in CSS to the values you might need for `translate(x, y). So, that brings us to...

The better/harder answer: You could edit the plugin! One caveat is that we'll be replacing some visualizations in the near future (including the Bar Chart) with ones based on Apache ECharts. Meanwhile, you could open up a PR on the Superset-ui repo at https://github.com/apache-superset/superset-ui. The NVD3-based plugin lies in there, as do the controls, where you might be able to add additional controls for rotation.

Door #3, of course, would be to write your own visualization plugin (or help us with the ECharts refactor!) but that's another conversation entirely.

Sorry this isn't more directly helpful, but I hope it gives you more avenues to explore.

Answer 2

Do you prefer grouped or stacked bars. Using stacked bars would be a shortcut to solving this.