Question 45313 in Html Question posted in
Some basic documentation can be found here.

Aligning bar chart columns and text with CSS – Html

I have a component where the generated HTML is for a simplistic bar chart. The height and background colour are computed in the component. This works fine but I want to solve the issue of long text causing displacement of the bar above it.

There is also the issue of the width of the bars wrongly depending on the width of the text too, but that’s probably another post.

Chart when viewport is wide enough:

enter image description here

Chart when viewport is smaller (this is the problem I wish to solve):
enter image description here

I think the rest of the bars and their labels need offsetting?

    <ul class="flex gap-3 items-end">
        <li class="flex flex-col flex-grow gap-1 content-center">
            <span style="height:42.666666666666664px;background-color:#d73027" title="Apple - 10">
            </span>
            <div class="text-sm text-center">Apple</div>
        </li>
        <li class="flex flex-col flex-grow gap-1 content-center">
            <span style="height:128px;background-color:#f46d43" title="Very Long Banana - 30">
            </span>
            <div class="text-sm text-center">Very Long Banana</div>
        </li>
        <li class="flex flex-col flex-grow gap-1 content-center">
            <span style="height:64px;background-color:#fdae61" title="Orange - 15">
            </span>
            <div class="text-sm text-center">Orange</div>
        </li>
        <li class="flex flex-col flex-grow gap-1 content-center">
            <span style="height:106.66666666666667px;background-color:#fee08b" title="Grape - 25">
            </span>
            <div class="text-sm text-center">Grape</div>
        </li>
    </ul>
</div>
Tags:

3

Answers


  1. 0

    Please try to add the CSS for the text using VW method.
    Example: font-size: 16vw;

    Please check below reference link:
    https://css-tricks.com/viewport-sized-typography/

    Login or Signup to reply.
  2. 0

    As someone mentioned in the comments, there are various ways to solve the issues, this is just one way.

    Edit: See @MagnusEffect’s answer for a much simpler option.

    If you want to keep your layout as it is, i.e., using an unordered list as a container for both the bars and the labels, you can wrap all bars with a fixed size div for the vertical alignment. Otherwise you could divide the bars and the labels in two different rows with equally sized items. I positioned the items within the wrapper divs using absolute positioning of the children, you can use flex box here as well.

    You can use flex-basis together with word-wrap for equal widths across the flex items. Some kind of overflow for the text can be an alternative to word-wrap.

    <!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body>
  <ul class="flex gap-3 items-start" style="width: 270px; resize: both; overflow: auto; border: 1px solid black">
    <li class="flex flex-col basis-0 flex-grow gap-1">
      <div class="relative" style="height: 128px;">
        <span class="absolute w-full bottom-0" style="height:42.666666666666664px;background-color:#d73027" title="Apple - 10"></span>
      </div>
      <div class="text-sm text-center" style="word-wrap: anywhere;">Apple</div>
    </li>
    <li class="flex flex-col basis-0 flex-grow gap-1">
      <div class="relative" style="height: 128px">
        <span class="absolute w-full bottom-0" style="height:128px;background-color:#f46d43" title="Very Long Banana - 30"></span>
      </div>
      <div class="text-sm text-center" style="word-wrap: anywhere;">Very Long Banana</div>
    </li>
    <li class="flex flex-col basis-0 flex-grow gap-1">
      <div class="relative" style="height: 128px">
        <span class="absolute w-full bottom-0" style="height:64px;background-color:#fdae61" title="Orange - 15"></span>
      </div>
      <div class="text-sm text-center" style="word-wrap: anywhere;">Orange</div>
    </li>
    <li class="flex flex-col basis-0 flex-grow gap-1">
      <div class="relative" style="height: 128px">
        <span class="absolute w-full bottom-0" style="height:106.66666666666667px;background-color:#fee08b" title="Grape - 25"></span>
      </div>
      <div class="text-sm text-center" style="word-wrap: anywhere;">Grape</div>
    </li>
  </ul>
</body>

</html>
    Login or Signup to reply.
  3. 0

    As mentioned , since you are using items-end , it is using the end (text) to align the object.

    Replace it with items-baseline class and also add flex-row to the <ul>.

    So the code looks like this

    <ul class="flex gap-3 flex-row items-baseline">
        <li class="flex flex-col flex-grow gap-1 content-center">
            <span style="height:42.666666666666664px;background-color:#d73027" title="Apple - 10">
            </span>
            <div class="text-sm text-center">Apple</div>
        </li>
        <li class="flex flex-col flex-grow gap-1 content-center">
            <span style="height:128px;background-color:#f46d43" title="Very Long Banana - 30">
            </span>
            <div class="text-sm text-center">Very Long Banana</div>
        </li>
        <li class="flex flex-col flex-grow gap-1 content-center">
            <span style="height:64px;background-color:#fdae61" title="Orange - 15">
            </span>
            <div class="text-sm text-center">Orange</div>
        </li>
        <li class="flex flex-col flex-grow gap-1 content-center">
            <span style="height:106.66666666666667px;background-color:#fee08b" title="Grape - 25">
            </span>
            <div class="text-sm text-center">Grape</div>
        </li>
    </ul>
</div>

    You can check the demonstration here on tailwind play

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search