Mark Indicator of a threshold value in circular progress bar CSS-CodePudding

I need to show a threshold indicator on a circular progress bar, I was able to indicate that position using circle indicator. But I need to show a line indicator with the threshold value.

For example if the threshold value is 70%, I have to show a line indicator with the threshold value shown.

Any suggestions on how it can be done? Suggestions also welcome on any other look and feel that can be used.

Current working version -

Expected look

CodePudding user response：

I will suggest something like this. I guess the meter/gauge itself is the easy part. Here I have a stroke-dasharay that can be set to a value between 0-100.

I added more threshold indicators so that you can see what they should look like, both on the left and right side of the circle. Basically it is just a line and a text that is rotated. When displaying the text in the left side it needs to be rotated 180 deg.

<svg width="400" viewBox="0 0 100 100" fill="none" stroke-width="5" stroke-linecap="round">
  <circle stroke="silver" cx="50" cy="50" r="40"/>
  <circle transform="rotate(-90 50 50)" stroke="green" cx="50" cy="50" r="40" pathLength="100" stroke-dasharray="65 100"/>
  <g transform="translate(50 50) rotate(-90) rotate(90)">
    <line x1="37.5" y1="0" x2="47.5" y2="0" stroke="black" stroke-width="1"/>
    <text transform="translate(43 -1)" font-size="4" fill="black">25</text>
  </g>
  <g transform="translate(50 50) rotate(-90) rotate(135)">
    <line x1="37.5" y1="0" x2="47.5" y2="0" stroke="black" stroke-width="1"/>
    <text transform="translate(43 -1)" font-size="4" fill="black">38</text>
  </g>
  <g transform="translate(50 50) rotate(-90) rotate(270)">
    <line x1="37.5" y1="0" x2="47.5" y2="0" stroke="black" stroke-width="1"/>
    <text transform="translate(43 -1) rotate(180) translate(-5 -2)" font-size="4" fill="black">75</text>
  </g>
  <g transform="translate(50 50) rotate(-90) rotate(315)">
    <line x1="37.5" y1="0" x2="47.5" y2="0" stroke="black" stroke-width="1"/>
    <text transform="translate(43 -1) rotate(180) translate(-5 -2)" font-size="4" fill="black">88</text>
  </g>
</svg>

The interactive version

var meter = document.getElementById('meter');
var threshold = document.getElementById('threshold');

document.forms.form01.addEventListener('change', e => {
  let newval = e.target.value;
  switch(e.target.name){
    case 'val':
      meter.setAttribute('stroke-dasharray', `${newval} 100`);
      break;
    case 'tval':
      threshold.setAttribute('transform', `translate(50 50) rotate(-90) rotate(${3.6*newval})`);
      let text = threshold.querySelector('text');
      text.textContent = newval;
      let transformStr = 'translate(43 -1)';
      if(newval > 50) transformStr  = ' rotate(180) translate(-5 -2)';
      text.setAttribute('transform', transformStr);
      break;
  }
});

<form name="form01">
<lable>Value: <input name="val" type="range" min="0" max="100" value="25"/></lable>
<lable>Threshold: <input name="tval" type="range" min="0" max="100" value="33"/></lable>
</form>
<svg width="400" viewBox="0 0 100 100" fill="none" stroke-width="5" stroke-linecap="round">
  <circle stroke="silver" cx="50" cy="50" r="40"/>
  <circle id="meter" transform="rotate(-90 50 50)" stroke="green" cx="50" cy="50" r="40" pathLength="100" stroke-dasharray="25 100"/>
  <g id="threshold" transform="translate(50 50) rotate(-90) rotate(120)">
    <line x1="37.5" y1="0" x2="47.5" y2="0" stroke="black" stroke-width="1"/>
    <text transform="translate(43 -1)" font-size="4" fill="black">33</text>
  </g>
</svg>