I have a figure showing the evolution of a variable for two points in time for a selection of countries.
The arrows represent the level in time 2. When the value decreases between time 1 and time 2 (for Italy and Germany in my example), I would like that the arrows go down (rotation of 180°). On the contrary, when the value increases between time 1 and time 2, the arrows should go up (Switzerland, France, and Spain in my example).
Does anyone know a piece of code I could add in my amCharts to do automatically the rotation of arrows ?
I have a CodePen with my data and figure: https://codepen.io/European-DataLab/pen/qBdyzap
My code is:
// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);
// Add data
chart.data = [
{"Country":"Switzerland","time2":878,"time1":270},
{"Country":"France","time2":1861,"time1":1237},
{"Country":"Spain","time2":3431,"time1":1987.6667},
{"Country":"Italy","time2":322,"time1":3911},
{"Country":"Germany","time2":940,"time1":1120}];
// Create axis X
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "Country";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.minGridDistance = 1;
categoryAxis.renderer.labels.template.rotation = -45;
categoryAxis.renderer.labels.template.verticalCenter = "top";
categoryAxis.renderer.labels.template.horizontalCenter = "right";
categoryAxis.renderer.grid.template.disabled = true;
// Create axis Y
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
// Series for linking dot and arrow
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.categoryX = "Country";
series.dataFields.openValueY = "time1";
series.dataFields.valueY = "time2";
series.sequencedInterpolation = true;
series.fillOpacity = 0;
series.strokeOpacity = 1;
series.columns.template.stroke = am4core.color("#000000")
series.columns.template.width = 0.01;
series.tooltip.pointerOrientation = "horizontal";
//Series for Time 2
var dot1_1 = chart.series.push(new am4charts.LineSeries());
dot1_1.dataFields.valueY = "time2";
dot1_1.dataFields.categoryX = "Country";
dot1_1.strokeWidth = 0;
dot1_1.name = "Time 2";
// Add a bullet/arrow
var bullet = dot1_1.bullets.push(new am4charts.Bullet());
var arrow = bullet.createChild(am4core.Triangle);
arrow.horizontalCenter = "middle";
arrow.verticalCenter = "middle";
arrow.stroke = am4core.color("#fff");
arrow.fillOpacity = 0.8;
arrow.direction = "top";
arrow.width = 15;
arrow.height = 15;
//Series time 1
var dot1_2 = chart.series.push(new am4charts.LineSeries());
dot1_2.dataFields.valueY = "time1";
dot1_2.dataFields.categoryX = "Country";
dot1_2.name = "Time 1";
dot1_2.strokeWidth = 0;
dot1_2.fill = am4core.color("#000000");
// Add a bullet/rectangle
var bullet = dot1_2.bullets.push(new am4charts.Bullet());
var rect = bullet.createChild(am4core.Rectangle);
rect.horizontalCenter = "middle";
rect.verticalCenter = "middle";
rect.strokeWidth = 0;
rect.fill = am4core.color("#000000");
rect.fillOpacity = 0.8;
rect.direction = "top";
rect.width = 12;
rect.height = 5;
// Round all numbers to integer
chart.numberFormatter.numberFormat = "#0.";
// Legend settings
chart.legend = new am4charts.Legend();
chart.legend.position = "top";
chart.legend.align = "center";
series.hiddenInLegend = true;
// Cursor animation
chart.cursor = new am4charts.XYCursor();
chart.cursor.lineX.disabled = true;
chart.cursor.lineY.disabled = false;
This should do the job:
arrow.adapter.add("rotation", function(rotation, target){
if(target.dataItem.dataContext.time1 < target.dataItem.dataContext.time2){
return 0
}
else{
return 180
}
})