Animating outerRadius and innerRadius

Question

I create some hover and clicked changes that increase and decrease the outerRadius and innerRadius properties on a doughnut chart. But I would like the movement more smooth.

const config = {
  type: 'doughnut',
  data: data,
  options: {
    animation: {
      duration: 2000
    },
    interactions: {
      intersect: false,
      mode: 'index',
    },
    onHover: (evt, item) => {
      if (item && item.length) {
        if (clicked && clicked.index == item[0].index) {
          return;
        }
        
        if(!hover) {
          hover = item[0];
          hover.element.outerRadius += 18;
          return;
        }
        
        if (hover.index !== item[0].index) {
          hover.element.outerRadius -= 18;
          item[0].element.outerRadius += 18;
          hover = item[0];
        }
      } else {
        if (hover) {
          hover.element.outerRadius -= 18;
        }
        
        hover = null;
      }
    },
    onClick: (evt, item) => {
      hover.element.outerRadius -= 18;
      hover = null;
      
      if(clicked) {
        clicked.element.innerRadius += 40;
      }
      
      item[0].element.innerRadius -= 40;
      clicked = item[0];
    },
  }
};

Codepen

Can you elaborate on "movement more smooth" in your question itself ? Like what's the current issue and how are you expecting it to be ? — Lakshya Thakur, Jul 20 '21 at 19:12
@LakshyaThakur there is no transition/easing when the mouse hover a segment of the chart and the outerRadius size changes. — marcelo2605, Jul 20 '21 at 19:30

score 0 · Answer 1 · answered Jul 20 '21 at 22:24

You can hack your way around it by using timeouts to change the values of the radius parts

if (!hover) {
    hover = item[0];
    for (let i = 0; i < 18; i++) {
        setTimeout(() => {
            hover.element.outerRadius++;
        }, timeoutMS * i)
    }
    return;
}

Codepen with segment growth animated: https://codepen.io/leelenaleee/pen/bGWrMQx?editors=0110

Animating outerRadius and innerRadius

1 Answers1