Amcharts v4 custom SVG

Question

Is there a way to dynamically build an SVG using sprites in amcharts 4?

Example: screenhot

There are 20 different types which are represented by colors. Each pin can contain a multitude of types. So an example can be that a pin has 3 types and will consist out of 3 colors.

I have an SVG path which is a circle. With regular JS and SVG i can create a path for each type and change the stroke color, strokedasharray and strokedashoffset. This results in the nice circle with 3 colors.

However this seems to be impossible to do with amcharts 4.

For starters, strokedashoffset is not even a supported property for a sprite. Why would you bother supporting strokedasharray and then ignore strokedashoffet?!

The second problem is finding out how to pass data to the sprite.

This is an example of a data object I pass to the mapImageSeries class.

[{
amount: 3,
client: undefined,
colorsArr: {0: "#FFB783", 1: "#FD9797", 2: "#77A538"},
dashArray: "500,1000",
dashOffset: 1500,
divided: 500,
global: true,
groupId: "minZoom-1",
hcenter: "middle",
id: "250",
latitude: 50.53398,
legendNr: 8,
longitude: 9.68581,
name: "Fulda",
offsetsArr: {0: 0, 1: 500, 2: 1000},
scale: 0.5,
title: "Fulda",
typeIds: (3) ["4", "18", "21"],
typeMarker: " type-21 type-18 type-4",
vcenter: "bottom",
zoomLevel: 5
}]

It seems impossible to pass the colors down to the sprite.

var svgPath = 'M291,530C159,530,52,423,52,291S159,52,291,52s239,107,239,239c0,131.5-106.3,238.3-237.7,239'
var mainPin1 = single.createChild(am4core.Sprite)
mainPin1.strokeWidth = 100
mainPin1.fill = am4core.color('#fff')
mainPin1.stroke = am4core.color('#ff0000')
mainPin1.propertyFields.strokeDasharray = 'dashArray'
mainPin1.propertyFields.strokeDashoffset = 'dashOffset'
mainPin1.path = svgPath
mainPin1.scale = 0.04
mainPin1.propertyFields.horizontalCenter = 'hcenter'
mainPin1.propertyFields.verticalCenter = 'vbottom'

Answer 1

With what you've provided, simulating your custom SVGs is beyond the scope of what can be answered, so I'll try tackling:

1. applying stroke-dashoffset despite lack of innate library support. (I see you've added a feature request on GitHub for it, so why the library doesn't include it, when/if it will, can be left for discussion there.)
2. passing data/colors to the Sprite

For both we're going to have to wait until the instances of Sprite s are ready along with their data. Presuming your single variable is a reference to a MapImageSeries.mapImages.template , we can set up an "inited" event like so:

single.events.once("inited", function(event){
  // ...
});

Our data and data placeholders don't really support nested arrays/objects in general, since your colors are nested within a field, we can find them via:

event.target.dataItem.dataContext.colorsArr

You can then set the fill and stroke on the Sprite or event.target.children.getIndex(0) manually from there (in my demo below, the index will be 1 because mainPin1 is not the first/only child created on the MapImage template).

As for stroke-dashoffset , you can access the actual rendered SVGElement via sprite.group.node and just use setAttribute .

I forked our map image demo from our map image data guide and added all the above to it here:

https://codepen.io/team/amcharts/pen/6a3d87ff3bdee7b85000fe775af9e583