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

Create circular rating scale in Reactjs – Html

I want to create a rating scale similar to one shown in image attached. But I have not been able to do the same.

I tried different packages and also css but couldnot achieve it.

If anybody could help that would be great

Circular rating scale:

I tried using react-circular-progressbar package, react-d3-speedometer but to no avail/

Here is an example of code i tried:

<div className="mt-6 flex justify-center">              
<div className="w-2/5 item-center">
           <CircularProgressbarWithChildren
                     value={80}
                     text="8"
                     strokeWidth={15}
                     circleRatio={0.75}
                     styles={
                       buildStyles({
                         rotation: 1 / 2 + 1 / 8,
                         strokeLinecap: 'butt',
                       })
                     }
                     // onClick={(val) => {
                     //   console.log('val', val)
                     // }}
                   >                  <RadialSeparators
                       count={13}
                       style={{
                         background: '#fff',
                         width: '2px',
                         // This needs to be equal to props.strokeWidth
                         height: `${15}%`,
                       }}
                     />                
</CircularProgressbarWithChildren>             
</div>              
</div>
Tags:

2

Answers


  1. 0

    You can do this using svg. If you draw a donut chart and divide in 12 parts, remember to leave the two ends transparent to have the effect similar to the image, put number in the middle of all parts and color based on your scaling.

    In the case of the marker you can create another donut chart with only one part with stroke but fill transparent and translate based of your rating.

    This is a interesting chalenge

    Login or Signup to reply.
  2. 0

    I have created this by html css and JS,
    You can find code below

    .rating-guage{
    position: relative;
    margin: auto;
    display: flex;
    /* text-align: center; */
    align-items: center;
    justify-content: center;
}
p.Unlikely {
    position: absolute;
    bottom: -40px;
    /* left: 0; */
    /* right: 0; */
    margin-left: -200px;
    color:#4F4F4F;
}
p.likely {
    position: absolute;
    bottom: -40px;
    /* left: 0; */
    /* right: 0; */
    margin-right: -200px;
    color:#4F4F4F;
}
.rating-circle {
    position: relative;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    overflow: hidden;
  }
  
  .selected-rating{
    position: absolute;
    display: flex;
    z-index: 1;
    font-size: 50px;
    font-weight: bold;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #999999;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }
  .rating-scale {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
  }
  
  .rating-tab {
    position: absolute;
    width: 25%;
    height: 25%;
    border-radius: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    cursor: pointer;
    border:2px solid #fff;
    transition: all 0.2s ease-in-out;
  } 
  
  
  .rating-tab:hover,.rating-tab.active {
    filter: drop-shadow(4px 2px 7px black);
    border: 2px solid #fff;
    transition: all 0.2s ease-in-out;
    font-weight: 700;
  }

  .rating-tab span{
    position: absolute;
    top: 50%;
    left: 55%;
  }

  .red {
    background-color: #EA463D;
    color: #fff;
  }
  
  .yellow {
    background-color: #FBC402;
    color: #000;
  }
  
  .green {
    background-color: #0FB478;
    color: #fff;
  }
  .transparent {
    background-color: #fff;
    color: #fff;
  }
  
  /*Child 1*/
  .rating-tab:nth-child(1) {
    transform: rotate(130deg) translate(125px) rotate(-20deg);
  }
  .rating-tab:nth-child(1):hover,.rating-tab.active:nth-child(1) {
    transform: rotate(130deg) translate(125px) rotate(-20deg) scale(1.1);
  }
  .rating-tab:nth-child(1):hover span {
    transform: translate(-50%,-100%) rotate(250deg) scale(1.1);
  }
  .rating-tab:nth-child(1) span{
    transform: translate(-50%,-100%) rotate(250deg);
  }

  /*Child 2*/
  .rating-tab:nth-child(2) {
    transform: rotate(155deg) translate(125px) rotate(-20deg);
  }
  .rating-tab:nth-child(2):hover,.rating-tab.active:nth-child(2) {
    transform: rotate(155deg) translate(125px) rotate(-20deg) scale(1.1);
  }
  .rating-tab:nth-child(2):hover span {
    transform: translate(-50%,-100%) rotate(230deg) scale(1.1);
  }
  .rating-tab:nth-child(2) span{
    transform: translate(-50%,-100%) rotate(230deg);
  }


  /*Child 3*/
  .rating-tab:nth-child(3) {
    transform: rotate(183deg) translate(125px) rotate(-20deg);
  }
  .rating-tab:nth-child(3):hover,.rating-tab.active:nth-child(3) {
    transform: rotate(183deg) translate(125px) rotate(-20deg) scale(1.1);
  }
  .rating-tab:nth-child(3):hover span {
    transform: translate(-50%,-100%) rotate(205deg) scale(1.1);
  }
  .rating-tab:nth-child(3) span{
    transform: translate(-50%,-100%) rotate(205deg);
  }


  /*Child 4*/
  .rating-tab:nth-child(4) {
    transform: rotate(213deg) translate(125px) rotate(-20deg);
  }
  .rating-tab:nth-child(4):hover,.rating-tab.active:nth-child(4) {
    transform: rotate(213deg) translate(125px) rotate(-20deg) scale(1.1);
  }
  .rating-tab:nth-child(4):hover span {
    transform: translate(-50%,-100%) rotate(170deg) scale(1.1);
  }
  .rating-tab:nth-child(4) span{
    transform: translate(-50%,-100%) rotate(170deg);
  }

  /*Child 5*/
  .rating-tab:nth-child(5) {
    transform: rotate(240deg) translate(125px) rotate(-20deg);
  }
  .rating-tab:nth-child(5):hover,.rating-tab.active:nth-child(5) {
    transform: rotate(240deg) translate(125px) rotate(-20deg) scale(1.1);
  }
  .rating-tab:nth-child(5):hover span {
    transform: translate(-50%,-100%) rotate(140deg) scale(1.1);
  }
  .rating-tab:nth-child(5) span{
    transform: translate(-50%,-100%) rotate(140deg);
  }

  /*Child 6*/
  .rating-tab:nth-child(6) {
    transform: rotate(270deg) translate(125px) rotate(-20deg);
  }
  .rating-tab:nth-child(6):hover,.rating-tab.active:nth-child(6) {
    transform: rotate(270deg) translate(125px) rotate(-20deg) scale(1.1);
  }
  .rating-tab:nth-child(6):hover span {
    transform: translate(-50%,-100%) rotate(110deg) scale(1.1);
  }
  .rating-tab:nth-child(6) span{
    transform: translate(-50%,-100%) rotate(110deg);
  }

  /*Child 7*/
  .rating-tab:nth-child(7) {
    transform: rotate(300deg) translate(125px) rotate(-20deg);
  }
  .rating-tab:nth-child(7):hover,.rating-tab.active:nth-child(7) {
    transform: rotate(300deg) translate(125px) rotate(-20deg) scale(1.1);
  }
  .rating-tab:nth-child(7):hover span {
    transform: translate(-50%,-100%) rotate(80deg) scale(1.1);
  }
  .rating-tab:nth-child(7) span{
    transform: translate(-50%,-100%) rotate(80deg);
  }

  /*Child 8*/
  .rating-tab:nth-child(8) {
    transform: rotate(330deg) translate(125px) rotate(-20deg);
  } 
  .rating-tab:nth-child(8):hover,.rating-tab.active:nth-child(8) {
    transform: rotate(330deg) translate(125px) rotate(-20deg) scale(1.1);
  }
  .rating-tab:nth-child(8):hover span {
    transform: translate(-50%,-100%) rotate(50deg) scale(1.1);
  }
  .rating-tab:nth-child(8) span{
    transform: translate(-50%,-100%) rotate(50deg);
  }
  /*Child 9*/
  .rating-tab:nth-child(9) {
    transform: rotate(0deg) translate(125px) rotate(-20deg);
  }
  .rating-tab:nth-child(9):hover,.rating-tab.active:nth-child(9) {
    transform: rotate(0deg) translate(125px) rotate(-20deg) scale(1.1);
  }
  .rating-tab:nth-child(9):hover span {
    transform: translate(-50%,-100%) rotate(20deg) scale(1.1);
  }
  .rating-tab:nth-child(9) span{
    transform: translate(-50%,-100%) rotate(20deg);
  }
  
  /*Child 10*/
  .rating-tab:nth-child(10) {
    transform: rotate(30deg) translate(125px) rotate(-20deg);
  }
  .rating-tab:nth-child(10):hover,.rating-tab.active:nth-child(10) {
    transform: rotate(30deg) translate(125px) rotate(-20deg) scale(1.1);
  }
  .rating-tab:nth-child(10):hover span {
    transform: translate(-50%,-100%) rotate(-10deg) scale(1.1);
  }
  .rating-tab:nth-child(10) span{
    transform: translate(-50%,-100%) rotate(-10deg);
  }
  
  /*Child 11*/
  .rating-tab:nth-child(11) {
    transform: rotate(60deg) translate(125px) rotate(-20deg);
  }
  .rating-tab:nth-child(11):hover,.rating-tab.active:nth-child(11) {
    transform: rotate(60deg) translate(125px) rotate(-20deg) scale(1.1);
    filter: drop-shadow(30px 2px 7px black);
  }
  .rating-tab:nth-child(11):hover span {
    transform: translate(-50%,-100%) rotate(-40deg) scale(1.1);
  }
  .rating-tab:nth-child(11) span{
    transform: translate(-50%,-100%) rotate(-40deg);
  }
  
  /*Child 12*/
  .rating-tab:nth-child(12) {
    transform: rotate(82deg) translate(125px) rotate(-10deg);
    border: 0;
    width: 40%;
    height: 15%;
    cursor: default;
    pointer-events: none;
  }
  .rating-tab:nth-child(12):hover{
    filter:none;
    border: 0px solid #fff;
  }
    <div class="rating-guage">
  <p class="Unlikely">Extremly Unlikely</p>
  <p class="likely">Extremly Likely</p>
      <div class="rating-circle">
        <div class=""><span class="selected-rating">5</span></div>
        <div class="rating-scale ">
          <div class="rating-tab red"><span>0</span></div>
          <div class="rating-tab red"><span>1</span></div>
          <div class="rating-tab red"><span>2</span></div>
          <div class="rating-tab red"><span>3</span></div>
          <div class="rating-tab red"><span>4</span></div>
          <div class="rating-tab red"><span>5</span></div>
          <div class="rating-tab red"><span>6</span></div>
          <div class="rating-tab yellow"><span>7</span></div>
          <div class="rating-tab yellow"><span>8</span></div>
          <div class="rating-tab green"><span>9</span></div>
          <div class="rating-tab green"><span>10</span></div>
          <div class="rating-tab transparent"></div>
        </div>
      </div>  
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search