Categories
Mastering Development

How do I animate a dashed line between two points in amcharts 4?

I am trying to build a dashed line between two points in an amCharts 4 map based on this CodePen.
I’ve tried something like this without succeed:

let lineSeries = chart.series.push(new am4maps.MapLineSeries());
lineSeries.mapLines.template.strokeWidth = 4;
lineSeries.mapLines.template.stroke = am4core.color("#e03e96");
lineSeries.mapLines.template.nonScalingStroke = true;
lineSeries.mapLines.template.line.strokeDasharray = `.25rem`;

Of course, I can dash the line with CSS by:

.amcharts-myline path {
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 8px;
  -webkit-animation: am-draw 40s forwards;
  animation: am-draw 40s;
}

However, it makes a weird effect. I just want to make it as the initial animation, from A to B point forwarding the effect with a dashed line.

As far as I know SVG and dashed lines, I need to create another SVG and animate it but I can’t figure out how to do it by keeping the structure.

Leave a Reply

Your email address will not be published. Required fields are marked *