amcharts5 icon indicating copy to clipboard operation
amcharts5 copied to clipboard

Dynamic color from JSON to point series bullets

Open ankit-mercer opened this issue 2 years ago • 1 comments

I'm using a map with pulsating bullets in which point series bullets are given fill by an array of colors in JS, but I'm trying to give only two colors to bullets and color will be defined in the JSON with point series data where Latitude and Longitude are given.

I tried using template but it not allowing to pick color from template too, it consider only the default color of the bulletTemplate.
Below is the code snippet which I've used:

  var pointSeries = chart.series.push(am5map.MapPointSeries.new(root, {}));
        var bulletTemplate = am5.Template.new({
        // default color for the bullets
            fill: am5.color(0xADDFB3),
        });
        pointSeries.bullets.push(function () {
            var container = am5.Container.new(root, {});
            var circle = container.children.push(
                am5.Circle.new(root, {
                    radius: 4,
                    tooltipY: 0,
                    templateField: "bulletSettings",
                    strokeOpacity: 0,
                    tooltipText: "{title}"
                }, bulletTemplate)
            );
            var circle2 = container.children.push(
                am5.Circle.new(root, {
                    radius: 4,
                    tooltipY: 0,
                    templateField: "bulletSettings",
                    strokeOpacity: 0,
                    tooltipText: "{title}"
                }, bulletTemplate)
            );
            circle.animate({
                key: "scale",
                from: 1,
                to: 5,
                duration: 600,
                easing: am5.ease.out(am5.ease.cubic),
                loops: Infinity
            });
            circle.animate({
                key: "opacity",
                from: 1,
                to: 0,
                duration: 600,
                easing: am5.ease.out(am5.ease.cubic),
                loops: Infinity
            });
            return am5.Bullet.new(root, {
                sprite: container
            });
        });

JSON used:
"cities": [
    {
      "title": "Ottawa, city rank: 132",
      "latitude": 45.4235,
      "longitude": -75.6979,
      "bulletSettings": { "fill": "#00968F" }
    },
    {
      "title": "Calgary, city rank: 108",
      "latitude": 51.0486,
      "longitude": -114.0708,
      "bulletSettings": { "fill": "#00968F" }
    }
  ]

ankit-mercer avatar Jul 29 '22 07:07 ankit-mercer

fill set in Bullet method has a higher priority over the template, so I am afraid you'll have to add bullet settings for all data points.

zeroin avatar Aug 01 '22 05:08 zeroin

This issue is stale because it has been open 30 days with no activity. It will be closed in 5 days unless a new comment is added.

github-actions[bot] avatar Sep 01 '22 00:09 github-actions[bot]