OCDE - Pattern Library v1.13.0

Chart Line 

<div class="chartline">
    <p>
        <span class="chartline-x-start">2012</span>
        <span class="chartline-x-end">2015</span>
    </p>
    <div class="chartline-x-data">
        <svg viewbox="0 0 368 68" width="368" height="68">
            <!-- To contain the line joins the actual limits are 3 and 365 on the x axis and 3 65 on the y axis -->
            <!-- X Axis is divided by six and does not change -->
            <!-- Y Axis are precentages of 62 sum 3 -->
            <!-- For example: 50% would be expressed as 62 * .5 + 3 = 34 -->
            <polyline class="chartline-x-line" points="3,65 73.6,3 147.2,34 220.8,3 294.4,65 365,3" stroke-linecap="round"></polyline>
        </svg>
        <p class="chartline-x-average" style="bottom: 18.73%"><span>$32k annual</span></p>
    </div>
</div>
 
<div class="chartline">
  <p>
    <span class="chartline-x-start">2012</span> 
    <span class="chartline-x-end">2015</span>
  </p>
  <div class="chartline-x-data">
    <svg viewbox="0 0 368 68" width="368" height="68">
      <!-- To contain the line joins the actual limits are 3 and 365 on the x axis and 3 65 on the y axis -->
      <!-- X Axis is divided by six and does not change -->
      <!-- Y Axis are precentages of 62 sum 3 -->
      <!-- For example: 50% would be expressed as 62 * .5 + 3 = 34 -->
      <polyline class="chartline-x-line" points="3,65 73.6,3 147.2,34 220.8,3 294.4,65 365,3" stroke-linecap="round"></polyline>
    </svg>
    <p class="chartline-x-average" style="bottom: 18.73%"><span>$32k annual</span></p>
  </div>
</div>
 
/* No context defined. */
  • Content: 
    $chartline-dimensions: 24px;

.chartline {
  @include textstyle-smallbold;
  color: $color-light1;
  display: inline-block;
  padding-bottom: $gridspacing * 3;
  padding-top: $gridspacing * 3;
  position: relative;

  .chartline-x-start,
  .chartline-x-end {
    position: absolute;
  }

  svg {
    display: block;
    height: auto;
    position: relative;
    width: 100%;
    z-index: $z-index-medium;
  }

  .chartline-x-average {
    bottom: 0;
    left: 0;
    padding-bottom: $gridspacing + 2px;
    position: absolute;
    width: 100%;

    span {
      position: relative;
      z-index: $z-index-high;
    }

    &::after {
      background-color: $color-dark2;
      border-radius: 500px; //High value makes pill shape
      bottom: 0;
      content: '';
      display: block;
      height: 2px;
      left: 0;
      position: absolute;
      width: 100%;
      z-index: $z-index-low;
    }

  }

  // Has a terminus to cover the last data point, padding and positioning offset it

  .chartline-x-data {
    padding-right: $chartline-dimensions / 2;
    padding-top: $chartline-dimensions / 2;
    position: relative;

    &::after {
      background-color: $color-accent6;
      border-radius: 100%;
      content: '';
      display: block;
      height: $chartline-dimensions;
      position: absolute;
      right: 0;
      top: 0;
      width: $chartline-dimensions;
    }

  }

  .chartline-x-end {
    right: 0;
    text-align: right;
    top: 0;
  }

  .chartline-x-line {
    fill: transparent;
    stroke: $color-accent6;
    stroke-width: 4;
  }

  .chartline-x-start {
    bottom: 0;
    left: 0;
  }

}
  • URL: /components/raw/chartline/_chartline.scss
  • Filesystem Path: src/scss/02-modules/chartline/_chartline.scss
  • Size: 1.6 KB

No notes defined.