amcharts5
amcharts5 copied to clipboard
Dynamic color from JSON to point series bullets
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" }
}
]
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.
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.