Price chart with CSS, on a stretched scale

by

I would like to create a simple chart style block on my webshop, what shows the current price(CP), the target price(TP), TPx1.05 and TPx0.95. The difference is very small between the target price and to the other two prices (TPx1.05 TPx0.95) so I decided the stretch the chart as the following:

  1. TPx1.05: 75%
  2. TP: 50%
  3. TPx0.95: 25%

Of course the CP doesn’t accurate, and I tried to adjust it, but unfortunately it doesn’t work out. The differences between the TP prices are 25%, originally it’s 0.5% (TPx1.05 - TP - TPx0.95), but on my chart it’s 25%. 25/0.5 = 50, so I adjusted the calculation of the CP: CP / (TP*2) * 50.
I have no idea how to adjust the CP indicator, maybe the whole concept is wrong?

I uploaded my code for better understanding:

jQuery(document).ready(function($) {
    var target = 10;
  var target_positive = target*1.05;
  var target_negative = target*0.95;
  var current = 9.5; // works fine
  // var current = 10; // It should be on the middle
  
    $('.current-price').css({
    'bottom' : current / (target*2) * 50 + '%'
  });
});
.scale {
  width: 5px;
  height: 100vh;
  background: red;
  position: relative;
}

.current-price {
  position: absolute;
  left: -2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: blue;
  transform: translateY(3px);
}

.target {
  width: 20px;
  height: 2px;
  position: absolute;
  left: -7px;
  bottom: 50%;
  background: black;
  display: block;
}

.target.positive {
  bottom: 75%;
  background: pink;
}

.target.negative {
  bottom: 25%;
  background: #ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
TOP: 20
<div class="scale">
  <div class="current-price" data-price="9.5"></div>
  <div class="target"></div>
  <div class="target positive"></div>
  <div class="target negative"></div>
</div>
BOTTOM: 0

67 thoughts on “Price chart with CSS, on a stretched scale”

Leave a Comment