360Giving Design System - Components

Bar Chart 

<ul class="bar-chart">

    <li class="bar-chart__item" style="--width: 100%;">
        <div class="bar-chart__label">Up to £500</div>
        <div class="bar-chart__bar"><span data-val="127"></span></div>
    </li>

    <li class="bar-chart__item" style="--width: 57%;">
        <div class="bar-chart__label">£501 - £1,000</div>
        <div class="bar-chart__bar"><span data-val="77"></span></div>
    </li>

    <li class="bar-chart__item" style="--width: 42%;">
        <div class="bar-chart__label">£1,001 - £2,000</div>
        <div class="bar-chart__bar"><span data-val="63"></span></div>
    </li>

    <li class="bar-chart__item" style="--width: 36%;">
        <div class="bar-chart__label">£2,001 - £5,000</div>
        <div class="bar-chart__bar"><span data-val="42"></span></div>
    </li>

    <li class="bar-chart__item" style="--width: 24%;">
        <div class="bar-chart__label">£5,001 - £10,000</div>
        <div class="bar-chart__bar"><span data-val="27"></span></div>
    </li>

    <li class="bar-chart__item" style="--width: 5%;">
        <div class="bar-chart__label">£10,001 - £100k</div>
        <div class="bar-chart__bar"><span data-val="4"></span></div>
    </li>

</ul>
 
<ul class="bar-chart">
  {% for item in chart %}
  <li class="bar-chart__item"  style="--width: {{ item.width }};">
    <div class="bar-chart__label">{{ item.label }}</div>
    <div class="bar-chart__bar"><span data-val="{{ item.value }}"></span></div>
  </li>
  {% endfor %}
</ul>
 
{
  "chart": [
    {
      "value": 127,
      "width": "100%",
      "label": "Up to £500"
    },
    {
      "value": 77,
      "width": "57%",
      "label": "£501 - £1,000"
    },
    {
      "value": 63,
      "width": "42%",
      "label": "£1,001 - £2,000"
    },
    {
      "value": 42,
      "width": "36%",
      "label": "£2,001 - £5,000"
    },
    {
      "value": 27,
      "width": "24%",
      "label": "£5,001 - £10,000"
    },
    {
      "value": 4,
      "width": "5%",
      "label": "£10,001 - £100k"
    }
  ]
}
  • Content: 
    .bar-chart {
  list-style-type: none;
  padding: 0;
  margin: 0;
  --scale: 127;
  --bar-bg-color: hsla(var(--yellow-hsl), 1);

  &__item {
    display: flex;
    padding-bottom: 8px;
  }

  &__bar {
    flex: 4;
    position: relative;
    margin-right: 40px;

    > span {
      display: inline-block;
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      background-color: var(--bar-bg-color);
      width: var(--width);
    }

    > span:after {
      content: attr(data-val);
      position: absolute;
      left: calc(100% + 8px);
    }
  }

  &__label {
    flex: 0;
    min-width: 136px;
    font-size: 1rem;
    padding-right: 16px;
    text-align: right;
  }
}
  • URL: /components/raw/bar-chart/bar-chart.scss
  • Filesystem Path: src/components/03-components/bar-chart/bar-chart.scss
  • Size: 695 Bytes

No notes defined.