charts.css icon indicating copy to clipboard operation
charts.css copied to clipboard

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

Open lenormf opened this issue 4 years ago • 2 comments

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.

lenormf avatar Mar 20 '21 05:03 lenormf

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 😃

acavalin avatar Jul 26 '21 21:07 acavalin

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.

fang-wei-jie avatar Oct 03 '21 16:10 fang-wei-jie