Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Data tags in a bar chart impact the height of the bars #18

Open
lenormf opened this issue Mar 20, 2021 · 2 comments
Open

Data tags in a bar chart impact the height of the bars #18

lenormf opened this issue Mar 20, 2021 · 2 comments

Comments

@lenormf
Copy link

lenormf commented Mar 20, 2021

Hi,

In a bar chart, bars that are narrower than the length of their data label will scale vertically, and the data label will word-wrap. For example:

I think a way to solve that, which would also make more sense for bars, is to display data labels next to the bar, instead of within it. Data for bars that are maxed would end up being displayed “outside” the graph, though.

HTH.

@acavalin
Copy link

Hi, i got the same problem with smaller values to be represented.
I implemented two solutions:

  1. text within the bar + clip content if too short

    table.charts-css.bar tbody span.data {
      white-space: nowrap;
      overflow: hidden;
    }
  2. text in the middle of the bar's edge

    table.charts-css.bar tbody span.data {
      white-space: nowrap;
      position: relative;
      left: 1rem; /* increment this to move to the right */
    }

Hope this helps and/or be included in the sources 😃

@fang-wei-jie
Copy link

I was thinking if there is a way to pad some spaces so that the data can be shown on the end (either left or right, depending on the direction of the graph was set) of the data axes without overflowing to the outside of the div area.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants