How to include custom value in amcharts series for calculation - amcharts

Question

How do we include the new custom variable to define the bullet location based on avgTime in chart.data
We are unable to assign the avgTime to openBullet.locationX = avgTime; like this.
If i add the avgTime to locationX it is throwing the error like avgTime is not defined.
Find the below code for your reference
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
var chart = am4core.create("chartdiv", am4charts.XYChart);
chart.data = [{
"name": "John",
"startTime": 8,
"endTime": 11,
"avgTime": 0.5,
"color": chart.colors.next()
}, {
"name": "Joe",
"startTime": 10,
"endTime": 13,
"avgTime": 0.8,
"color": chart.colors.next()
}, {
"name": "Susan",
"startTime": 11,
"endTime": 18,
"avgTime": 0.1,
"color": chart.colors.next()
}, {
"name": "Eaton",
"startTime": 15,
"endTime": 19,
"avgTime": 0,
"color": chart.colors.next()
}];
var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "name";
categoryAxis.renderer.inversed = true;
categoryAxis.renderer.grid.template.location = 0;
var valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
//valueAxis.renderer.minGridDistance = 50;
var columnSeries = chart.series.push(new am4charts.ColumnSeries());
columnSeries.dataFields.categoryY = "name";
columnSeries.dataFields.valueX = "endTime";
columnSeries.dataFields.openValueX = "startTime";
columnSeries.columns.template.tooltipText = "[bold]{categoryY}[/]\nstarts at {openValueX}\nends at {valueX}";
var columnTemplate = columnSeries.columns.template;
columnTemplate.strokeOpacity = 0;
columnTemplate.propertyFields.fill = "color";
//columnTemplate.height = am4core.percent(100);
//var openBullet = columnSeries.bullets.create(am4charts.CircleBullet);
//openBullet.locationX = avgTime;
var circleBullet = columnSeries.bullets.push(new am4charts.CircleBullet());
circleBullet.circle.stroke = am4core.color("#fff");
circleBullet.circle.strokeWidth = 2;
circleBullet.locationX = /**
* ---------------------------------------
* This demo was created using amCharts 4.
*
* For more information visit:
* https://www.amcharts.com/
*
* Documentation is available at:
* https://www.amcharts.com/docs/v4/
* ---------------------------------------
*/
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
var chart = am4core.create("chartdiv", am4charts.XYChart);
chart.data = [{
"name": "John",
"startTime": 8,
"endTime": 11,
"avgTime": 0.5,
"color": chart.colors.next()
}, {
"name": "Joe",
"startTime": 10,
"endTime": 13,
"avgTime": 0.8,
"color": chart.colors.next()
}, {
"name": "Susan",
"startTime": 11,
"endTime": 18,
"avgTime": 0.1,
"color": chart.colors.next()
}, {
"name": "Eaton",
"startTime": 15,
"endTime": 19,
"avgTime": 0,
"color": chart.colors.next()
}];
var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "name";
categoryAxis.renderer.inversed = true;
categoryAxis.renderer.grid.template.location = 0;
var valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
//valueAxis.renderer.minGridDistance = 50;
var columnSeries = chart.series.push(new am4charts.ColumnSeries());
columnSeries.dataFields.categoryY = "name";
columnSeries.dataFields.valueX = "endTime";
columnSeries.dataFields.openValueX = "startTime";
columnSeries.columns.template.tooltipText = "[bold]{categoryY}[/]\nstarts at {openValueX}\nends at {valueX}";
var columnTemplate = columnSeries.columns.template;
columnTemplate.strokeOpacity = 0;
columnTemplate.propertyFields.fill = "color";
//columnTemplate.height = am4core.percent(100);
//var openBullet = columnSeries.bullets.create(am4charts.CircleBullet);
//openBullet.locationX = avgTime;
var circleBullet = columnSeries.bullets.push(new am4charts.CircleBullet());
circleBullet.circle.stroke = am4core.color("#fff");
circleBullet.circle.strokeWidth = 2;
circleBullet.locationX = {avgTime};
var labelBullet = columnSeries.bullets.push(new am4charts.LabelBullet());
labelBullet.label.text = "{avgTime}";
labelBullet.label.dx = +20;
labelBullet.locationX = 0.2;;
var labelBullet = columnSeries.bullets.push(new am4charts.LabelBullet());
labelBullet.label.text = "{avgTime}";
labelBullet.label.dx = +20;
labelBullet.locationX = 0.2;

Answer 1

I'm not quite sure if I understood your question correctly. To set the position of the bullets you have to set the value in the propertyFields accounding to the name of the value in your data:
circleBullet.propertyFields.locationX = "avgTime";
I created a code pen with your example code. Hope that helps.
EDIT: According to the response from zeroin you should consider to change your avgTime to 1 - avgTime, because it is rendered beginning at the end of the column.