title: Animating outerRadius and innerRadius
body: <p>I create some hover and clicked changes that increase and decrease the <code>outerRadius</code> and <code>innerRadius</code> properties on a doughnut chart. But I would like the movement more smooth.</p>
  <pre><code>const config = {
    type: 'doughnut',
    data: data,
    options: {
      animation: {
        duration: 2000
      },
      interactions: {
        intersect: false,
        mode: 'index',
      },
      onHover: (evt, item) =&gt; {
        if (item &amp;&amp; item.length) {
          if (clicked &amp;&amp; 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) =&gt; {
        hover.element.outerRadius -= 18;
        hover = null;
        
        if(clicked) {
          clicked.element.innerRadius += 40;
        }
        
        item[0].element.innerRadius -= 40;
        clicked = item[0];
      },
    }
  };
  </code></pre>
  <p><a href="https://codepen.io/marcelo2605/pen/GRmEVvO?editors=0110" rel="nofollow noreferrer">Codepen</a></p>