Chartist graphs get re-drawn everytime I click on any button or resize window

Question

I really like this library, but I can't seem to control this issue somehow. If any event occurs the graphs are being re-drawn every time.

I am using React.js and this is how I am creating and displaying the Chartist graphs:

const dailyComplaintsChart = {
        data: {
            labels: ["M", "T", "W", "T", "F", "S", "S"],
            series: [whichType.seriesDaily]
        },
        options: {
            lineSmooth: Chartist.Interpolation.cardinal({
                tension: 0
            }),
            low: 0,
            high: highestValue.highestValueDaily, // creative tim: we recommend you to set the high sa the biggest value + something for a better look
            chartPadding: {
                top: 0,
                right: 0,
                bottom: 0,
                left: 0
            }
        },
        // for animation
        animation: {
            draw: function (data) {
                if (data.type === "line" || data.type === "area") {
                    data.element.animate({
                        d: {
                            begin: 600,
                            dur: 700,
                            from: data.path
                                .clone()
                                .scale(1, 0)
                                .translate(0, data.chartRect.height())
                                .stringify(),
                            to: data.path.clone().stringify(),
                            easing: Chartist.Svg.Easing.easeOutQuint
                        }
                    });
                } else if (data.type === "point") {
                    data.element.animate({
                        opacity: {
                            begin: (data.index + 1) * delays,
                            dur: durations,
                            from: 0,
                            to: 1,
                            easing: "ease"
                        }
                    });
                }
            }
        }
    };

return(
 <div className="daily-graph">

                <ChartistGraph
                    className="ct-chart-background-daily-complaints"
                    data={dailyComplaintsChart.data}
                    type="Line"
                    options={dailyComplaintsChart.options}
                    listener={dailyComplaintsChart.animation}
                />
                <div className={classes.line}>
                    <p>Daily Complaints</p>
                </div>

            </div>
)

Answer 1

This problem is caused by the use of animation, So you have to put all the animate function in an if statement and set a counter outside of draw function.

let animated = 0;
draw(data) {
   if (animated <= label.length) {
       // animate
       data.element.animate(...)
       animated++;
   }
}