This is a demo tutorial. While there is no step-by-step commentary available (yet), the live demo below is fully functional. Feel free to open it for full source code.
We can use setting strokeDasharray
to make lines on a MapChart
dashed. However, zooming in will also make dashes grow in size. This demo shows how we can add adapter which would maintain the same dash length across zooms.
lineSeries.mapLines.template.line.nonScalingStroke = true; lineSeries.mapLines.template.line.strokeDasharray = "5 3"; lineSeries.mapLines.template.line.adapter.add("strokeWidth", function(strokeWidth, target){ target.strokeDasharray = (5 / chart.zoomLevel) + " " + (3 / chart.zoomLevel) return strokeWidth; });
lineSeries.mapLines.template.line.nonScalingStroke = true; lineSeries.mapLines.template.line.strokeDasharray = "5 3"; lineSeries.mapLines.template.line.adapter.add("strokeWidth", function(strokeWidth, target){ target.strokeDasharray = (5 / chart.zoomLevel) + " " + (3 / chart.zoomLevel) return strokeWidth; });
See the Pen Constant stroke dash size when zooming MapChart by amCharts team (@amcharts) on CodePen.