I need apply on radar a animation

[AngeloCG97]

I need apply on radar this animation

Rate.EOS.Block.Producer.Infrastructure.and.Community.Reputation.Aloha.EOS.-.EOS.Rate.-.Google.Chrome.2021-08-24.11-55-38_Trim.mp4

Does anyone know what configuration I need?

[LeeLenaleee]

https://www.chartjs.org/docs/3.5.1/configuration/animations.html

[kurkle]

You'll need to provide more information that a video, to get a proper answer.
How are you updating the chart?
See (hit the randomize button) for default animation: https://www.chartjs.org/docs/next/samples/other-charts/radar.html

[AngeloCG97]

Rate.EOS.Block.Producer.Infrastructure.and.Community.Reputation.EOS.Costa.Rica.-.EOS.Rate.-.Google.Chrome.2021-08-24.23-47-54_Trim.mp4

I have tried some solutions and they do not work, I have read a lot about the documentation of the library but I can not find something specific.

The video of the first animation is when I was using version 2 of the library, I think that animation was by default, but now that I update to version 3 that animation is lost and instead that update of the component occurs that looks bad.

Probe removing the 'x' and 'y' values ​​of this property

options: {
   animations: {
      numbers: {
         properties: ['x', 'y', 'borderWidth', 'radius', 'tension']
      }
   }
}

And this eliminated the render but I could not reach the desired animation.

If you can help me I would appreciate it

This is the code in which I configure the radar

import React, { useEffect, useState } from 'react'
import PropTypes from 'prop-types'
import { useTranslation } from 'react-i18next'
import { Radar } from 'react-chartjs-2'

import getRadarLabelName from 'utils/getRadarLabelName'

const RadarData = ({ bpData, height, showLabel, width, ...props }) => {
  const { t } = useTranslation('translations')
  const labels = getRadarLabelName(t)
  const [sizes, setSizes] = useState({ width: 240, height: 240 })
  const bpValidData =
    bpData.datasets && bpData.datasets.length
      ? { ...bpData, labels }
      : { labels, datasets: [{ data: [0, 0, 0, 0, 0] }] }

  useEffect(() => {
    if (!width && !height) return

    setSizes({ width, height })
  }, [width, height])

  return (
    <Radar
      data={bpValidData}
      style={{
        margin: 'auto',
        width: sizes.width,
        height: sizes.height
      }}
      options={{
        plugins: {
          legend: {
            display: showLabel,
            labels: {
              font: {
                size: 14
              }
            }
          }
        },
        scales: {
          r: {
            ticks: {
              display: false,
              min: 0,
              max: 10,
              stepSize: 2
            },
            grid: {
              circular: true,
              lineWidth: 4
            },
            suggestedMin: 1,
            suggestedMax: 10,
            angleLines: { color: '#e5e5e5', lineWidth: 4 },
            pointLabels: {
              fontColor: '#443F5B',
              font: {
                size: 12
              }
            }
          }
        },
        layout: {
          padding: {
            bottom: 10
          }
        },
        chartArea: {
          backgroundColor: '#f8f8f8',
          strokeColor: '#e5e5e5',
          lineWidth: 4
        },
        tooltips: {
          enabled: true,
          callbacks: {
            label: (tooltipItem, data) =>
              `${data.labels[tooltipItem.index]}: ${
                data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]
              }`,
            title: (tooltipItem, data) => {
              const titleModeled = tooltipItem.reduce(
                (acc, current, index) => {
                  if (current.datasetIndex === acc.prevDatasetIndex) return acc

                  const label = `${acc.title} ${index ? '||' : ''} ${
                    data.datasets[current.datasetIndex].label
                  }`

                  return {
                    title: label,
                    prevDatasetIndex: current.datasetIndex
                  }
                },
                { title: '', prevDatasetIndex: null }
              )

              return titleModeled.title
            }
          }
        }
      }}
    />
  )
}

RadarData.propTypes = {
  bpData: PropTypes.object,
  height: PropTypes.any,
  width: PropTypes.any,
  showLabel: PropTypes.bool
}

RadarData.defaultProps = {
  showLabel: false
}

export default RadarData

[kurkle]

reactchartjs/react-chartjs-2#648