Victory: VictoryBar label animation (interpolation) precision too high, prefer integer

[mmkari]

Hello, I have an issue with Victory animations and would really appreciate your help! The labels of my chart's bars are animated when new data arrives but the precision of the animated labels is way too high (Image 1 below). As illustrated in that image, the precision is up to 13 decimals for an animation that I would prefer to stick to the realm of integers.

So, I'm hoping that someone could point me to the modifications of the code posted below that would change the animation to the precision of integers or alternatively have the label animations disabled. I'm also curious as to why Victory charts parse labels by default and interpret them as numbers that warrant animation. In my case, the labels are of the form '12345 €' and Victory clearly goes out of its way to recognize that the labels contain numbers and decides they need some animation. In reality, the labels could just be strings with no special meaning.

I have already thoroughly read the documentation and tried editing animations, styles and adding custom components but to no avail. Therefore I would like to have the exact fixes to this minimal example that would do the trick. Many thanks in advance! Below are the details:

I have the following code that renders three bars in a single chart:

<VictoryChart
    width={400}
    height={300}
    domainPadding={70}
    animate={{
        duration: 500,
    }}
    containerComponent={<VictoryContainer
        responsive={false}
        width={400}
        height={300}
    />}
>
    <VictoryAxis
        tickValues={['A', 'B', 'C']}
    />
    <VictoryAxis
        dependentAxis
        tickFormat={(y) => `${y} €`}
    />
    <VictoryBar
        name='bar'
        data={getData()}
    />
</VictoryChart>

The data is prepared using this function:

const getData = () => {
    return props.dataArray.map((value, index) => {
        const roundedValue = Math.round(value);
        return {
            x: index + 1,
            y: roundedValue,
            label: String(roundedValue) + ' €',
            fill: barColors[index],
        };
    });
};

Below are two images that show the labels during the animation process and how they look at other times.

Image 1: labels mid-animation.

Image 2: labels how they appear normally before or after animation.

[boygirl]

@mmkari data objects get interpolated by VictoryAnimation. Rather than defining labels on the data object directly, you can define them with the labels prop like

labels={(datum) => String(Math.round(datum.y)) +  " €"}

[mmkari]

@boygirl Thanks a lot! Your explanation cleared things up :)

It was here alright: http://formidable.com/open-source/victory/docs/victory-bar/#labels