AmCharts line chart animation

2
votes

Is it possible to animate a line chart in AmCharts in a way that shows the line being drawn (either by connecting the bullets or drawing the line sequentially left to right)?

I've played around with the startDuration, startEffect and sequencedAnimation properties but all of the options seem to animate the entire line as a whole, either sliding it down from the top or bouncing it upon entry. It's better than no animation and is perfect for column/bar graphs but it looks somewhat odd and unnatural for a line graph.

Here is the relevant documentation for AmCharts.

2
javascriptanimationamcharts

2 Answers

1
votes

As stated in the documentation you linked to, http://docs.amcharts.com/3/javascriptcharts/AmSerialChart#startEffect, the only effects that are available at this point in time are...

  • easeOutSine
  • easeInSine
  • elastic
  • bounce

These are all bounce or slide in type graphs, they do not currently offer a join the dots type effect that you are wanting as yet.

1
votes

Yes, you can animate your amchart in a way that it draws. You do that with CSS:

#chartdiv{
width       : 100%;
height      : 500px;
}

.amcharts-graph-g1 { //g1 is the id of your graph
  stroke-dasharray: 500%;
  -webkit-animation: am-draw 5s;
  animation: am-draw 5s;
}

@keyframes am-draw {
    0% {
        stroke-dashoffset: 500%;
    }
    100% {
        stroke-dashoffset: 0%;
    }
}

Check out this link: https://www.amcharts.com/demos/css-animations/