Amcharts 4: overlapping LabelBullet text - amcharts

I have a line chart with similar values.
Is there a way to automatically add padding when LabelBullets overlaps?
or some other elegant solution to this problem....
Either no one has this problem, or this problem has not yet occurred to anyone
I found only one question on this topic, but it remained unanswered
Here is a screenshot of the case
Jfiddle link
`HTML`
<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>
`CSS`
#chartdiv {
width: 100%;
height: 500px;
}
`JS`
am4core.ready(function() {
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
var chart = am4core.create("chartdiv", am4charts.XYChart);
var data = [
{
"year": "2015",
"b1": "10",
"b2": "12"
},
{
"year": "2016",
"b1": "20",
"b2": "22"
},
{
"year": "2017",
"b1": "30",
"b2": "32"
},
{
"year": "2018",
"b1": "40",
"b2": "42"
},
{
"year": "2019",
"b1": "20",
"b2": "22"
}
]
;
chart.data = data;
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
var yAxis = chart.yAxes.push(new am4charts.ValueAxis());
//remove grid
valueAxis.renderer.grid.template.strokeWidth = 0;
categoryAxis.renderer.grid.template.disabled = true;
valueAxis.renderer.labels.template.disabled = true;
// Create series
categoryAxis.dataFields.category = "year";
categoryAxis.renderer.minGridDistance = 10;
CreateLineSeries("b1", "Data1", false);
CreateLineSeries("b2", "Data2", false);
function CreateLineSeries(field, name, stacked) {
var LineValueAxis = chart.yAxes.push(new am4charts.ValueAxis());
LineValueAxis.renderer.opposite = true;
LineValueAxis.renderer.grid.template.disabled = true;
LineValueAxis.renderer.labels.template.disabled = true;
var LineSeries = chart.series.push(new am4charts.LineSeries())
LineSeries.dataFields.valueY = field;
LineSeries.dataFields.categoryX = "year";
LineSeries.yAxis = LineValueAxis;
LineSeries.name = name;
LineSeries.strokeWidth = 4
var bullet = LineSeries.bullets.push(new am4charts.Bullet());
var circle = bullet.createChild(am4core.Circle);
circle.radius = 6;
var labelBullet = LineSeries.bullets.push(new am4charts.LabelBullet());
labelBullet.label.text = "{valueY.formatNumber('###.')} %";
labelBullet.label.background.fill = am4core.color("lightgrey");
labelBullet.label.padding(4, 8, 4, 8);
labelBullet.dy = -25;
labelBullet.fillOpacity = 0.5;
}
});

Related

How to create smoothed line instead of sharp line in amcharts 4?

unable to smooth line
I've tried to set tensionX, tensionY, chart.smoothing. However, the line is still not smoothed
Here is the jsfiddle filehttps://jsfiddle.net/cherrykosasih02/wyac0dnq/2/
You cannot use tensionX, tensionY or smoothing with propertyFields. You have to create axis ranges instead. Take a look at the following issue on GitHub:
The smoothed curve algorithm works by bending the path around multiple points.
Now, when you are using propertyFields to color specific section of the line, it creates a separate path for each separately-colored segment. If that segment encompasses only two points, the smoothing algorithm does not have anything to work with, hence the straight line.
If you remove series.propertyFields.stroke = "color"; and replace it with series.smoothing = "monotoneX";, you could do something like this:
function colorize(startDate, endDate, color) {
var range = dateAxis.createSeriesRange(series);
range.date = new Date(startDate + ' 12:00');
range.endDate = new Date(endDate + ' 12:00');
range.contents.stroke = am4core.color(color);
}
for (var i = 0; i < chart.data.length; i++) {
var startDate = chart.data[i].date,
endDate = (i < chart.data.length - 1) && chart.data[i + 1].date,
color = chart.data[i].color;
colorize(startDate, endDate, color);
}
Here is your code with these modifications and additions:
/**
* ---------------------------------------
* 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
// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);
// Add data
chart.data = [{
"date": "2012-03-01",
"price": 20,
"color": "#00FF00"
}, {
"date": "2012-03-02",
"price": 75,
"color": "#FF0000"
}, {
"date": "2012-03-03",
"price": 15,
"color": "#00FF00"
}, {
"date": "2012-03-04",
"price": 75,
"color": "#00FF00"
}, {
"date": "2012-03-05",
"price": 158,
"color": "#FF0000"
}, {
"date": "2012-03-06",
"price": 57,
"color": "#FF0000"
}, {
"date": "2012-03-07",
"price": 107,
"color": "#FF0000"
}, {
"date": "2012-03-08",
"price": 89,
"color": "#FF0000"
}, {
"date": "2012-03-09",
"price": 75,
"color": "#00FF00"
}, {
"date": "2012-03-10",
"price": 132,
"color": "#00FF00"
}, {
"date": "2012-03-11",
"price": 380,
"color": "#FF0000"
}, {
"date": "2012-03-12",
"price": 56,
"color": "#00FF00"
}, {
"date": "2012-03-13",
"price": 169,
"color": "#FF0000"
}, {
"date": "2012-03-14",
"price": 24,
"color": "#00FF00"
}, {
"date": "2012-03-15",
"price": 147,
"color": "#00FF00"
}];
// Create axes
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.grid.template.location = 0;
dateAxis.renderer.minGridDistance = 50;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
/* valueAxis.logarithmic = true; */
valueAxis.renderer.minGridDistance = 20;
// Create series
var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.valueY = "price";
series.dataFields.dateX = "date";
series.strokeWidth = 3;
// series.propertyFields.stroke = "color";
series.smoothing = "monotoneX"; // <--- HERE
var bullet = series.bullets.push(new am4charts.CircleBullet());
bullet.circle.fill = am4core.color("#fff");
bullet.circle.strokeWidth = 3;
// Add cursor
chart.cursor = new am4charts.XYCursor();
chart.cursor.fullWidthLineX = true;
chart.cursor.xAxis = dateAxis;
chart.cursor.lineX.strokeWidth = 0;
chart.cursor.lineX.fill = am4core.color("#000");
chart.cursor.lineX.fillOpacity = 0.1;
// Add scrollbar
chart.scrollbarX = new am4core.Scrollbar();
// Add a guide
let range = valueAxis.axisRanges.create();
range.value = 90.4;
range.grid.stroke = am4core.color("#396478");
range.grid.strokeWidth = 1;
range.grid.strokeOpacity = 1;
range.grid.strokeDasharray = "3,3";
range.label.inside = true;
range.label.text = "Average";
range.label.fill = range.grid.stroke;
range.label.verticalCenter = "bottom";
// ========================= HERE =========================
function colorize(startDate, endDate, color) {
var range = dateAxis.createSeriesRange(series);
range.date = new Date(startDate + " 12:00");
range.endDate = new Date(endDate + " 12:00");
range.contents.stroke = am4core.color(color);
}
for (var i = 0; i < chart.data.length; i++) {
var startDate = chart.data[i].date,
endDate = (i < chart.data.length - 1) && chart.data[i + 1].date,
color = chart.data[i].color;
colorize(startDate, endDate, color);
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
#chartdiv {
width: 100%;
height: 500px;
}
<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>

amCharts - XY Charts Tooltip and Bullet

I have an XY Charts in amCharts 4 and I can't set the correct parameter to insert in the tooltip. This is the code that design the chart:
Is possible to show the parameter "desc" in the tooltip?
var chart = am4core.create("chartdiv", am4charts.XYChart);
// Add data
chart.data = [ {
"x": -6,
"y": 0,
"diam": 4,
"desc": "test"
}, {
"x": 0,
"y": -10,
"diam": 4,
"desc": "test"
}, {
"x": 12,
"y": 10,
"diam": 8,
"desc": "special"
} ];
// Create axes
var xAxis = chart.xAxes.push(new am4charts.ValueAxis());
var yAxis = chart.yAxes.push(new am4charts.ValueAxis());
// Create series
var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.valueX = "x";
series.dataFields.valueY = "y";
series.strokeWidth = 2;
series.fillOpacity = 0;
series.stroke = "red";
// Create bullet and tooltip
seriesBullet = series.bullets.push(new am4charts.CircleBullet());
seriesBullet.circle.fill = am4core.color("#fff");
seriesBullet.circle.strokeWidth = 3;
seriesBullet.circle.propertyFields.radius = "diam";
seriesBullet.tooltipText = "desc";
#chartdiv {
width: 100%;
height: 200px;
}
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<div id="chartdiv"></div>
You need to wrap the desc in curly braces: {desc}
seriesBullet.tooltipText = "{desc}";
Here is your updated working example:
var chart = am4core.create("chartdiv", am4charts.XYChart);
// Add data
chart.data = [ {
"x": -6,
"y": 0,
"diam": 4,
"desc": "test"
}, {
"x": 0,
"y": -10,
"diam": 4,
"desc": "test"
}, {
"x": 12,
"y": 10,
"diam": 8,
"desc": "special"
} ];
// Create axes
var xAxis = chart.xAxes.push(new am4charts.ValueAxis());
var yAxis = chart.yAxes.push(new am4charts.ValueAxis());
// Create series
var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.valueX = "x";
series.dataFields.valueY = "y";
series.strokeWidth = 2;
series.fillOpacity = 0;
series.stroke = "red";
series.tooltipText = "{desc}";
// Create bullet and tooltip
seriesBullet = series.bullets.push(new am4charts.CircleBullet());
seriesBullet.circle.fill = am4core.color("#fff");
seriesBullet.circle.strokeWidth = 3;
seriesBullet.circle.propertyFields.radius = "diam";
seriesBullet.tooltipText = "{desc}";
#chartdiv {
width: 100%;
height: 200px;
}
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<div id="chartdiv"></div>
You need to put your parameter inside a {} curly braces.
E.g :
seriesBullet.tooltipText = "{desc}";

amcharts valueaxis incremental manner scaling

I have value range from 1 to 40 000 which I am trying to plot on amcharts serial chart. As chart is auto scaling depend on value range, values which are less than 500 (ex: 10, 50, 100...) are shown as line on x-axis itself. In this case auto scaling is 0-1000-2000-3000...
How to achieve scaling in incremental manner i.e. 0-10-100-1000-10000 ... so that all candles including low value candles also get significant visibility.
or suggest any better approach to get all chart candles visible in chart.
<style>
#chartdiv {
width: 100%;
height: 500px;
}
</style>
<!-- Resources -->
<script src="https://www.amcharts.com/lib/4/core.js">
</script>
<script src="https://www.amcharts.com/lib/4/charts.js">
</script>
<script>
src=
"https://www.amcharts.com/lib/4/themes/animated.js" >
</script>
<!-- Chart code -->
<script>
am4core.ready(function() {
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
// Create chart instance
var chart = am4core.create("chartdiv",
am4charts.XYChart3D);
// Adding sample data
chart.data = [{
"country": "USA",
"visits": 39000
}, {
"country": "China",
"visits": 100
}, {
"country": "Japan",
"visits": 35000
}, {
"country": "Germany",
"visits": 50
}, {
"country": "UK",
"visits": 200
}, {
"country": "France",
"visits": 20
}, {
"country": "India",
"visits": 25
}, {
"country": "Spain",
"visits": 711
} ];
// Create axes
let categoryAxis = chart.xAxes.push(new
am4charts.CategoryAxis());
categoryAxis.dataFields.category = "country";
categoryAxis.renderer.labels.template.rotation = 270;
categoryAxis.renderer.labels.template.hideOversized =
false;
categoryAxis.renderer.minGridDistance = 20;
categoryAxis.renderer.labels.template.horizontalCenter =
"right";
categoryAxis.renderer.labels.template.verticalCenter =
"middle";
categoryAxis.tooltip.label.rotation = 270;
categoryAxis.tooltip.label.horizontalCenter = "right";
categoryAxis.tooltip.label.verticalCenter = "middle";
let valueAxis = chart.yAxes.push(new
am4charts.ValueAxis());
valueAxis.title.text = "Countries";
valueAxis.title.fontWeight = "bold";
// Create series
var series = chart.series.push(new
am4charts.ColumnSeries3D());
series.dataFields.valueY = "visits";
series.dataFields.categoryX = "country";
series.name = "Visits";
series.tooltipText = "{categoryX}: [bold]{valueY}[/]";
series.columns.template.fillOpacity = .8;
var columnTemplate = series.columns.template;
columnTemplate.strokeWidth = 2;
columnTemplate.strokeOpacity = 1;
columnTemplate.stroke = am4core.color("#FFFFFF");
columnTemplate.adapter.add("fill", (fill, target) => {
return chart.colors.getIndex(target.dataItem.index);
})
columnTemplate.adapter.add("stroke", (stroke, target) =>
{
return chart.colors.getIndex(target.dataItem.index);
})
chart.cursor = new am4charts.XYCursor();
chart.cursor.lineX.strokeOpacity = 0;
chart.cursor.lineY.strokeOpacity = 0;
}); // end am4core.ready()
</script>
<!-- HTML -->
<div id="chartdiv"></div>
You can achieve this by setting:
valueAxis.logarithmic = true;

How to include custom value in amcharts series for calculation

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;
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.

Highlighting the highest and lowest point in amcharts

Could someone help me on changing the bullet or highlighting the highest and lowest values using amcharts?.
I am using serial chart. The condition given in the function "highlight" is matching , however the the bullets are not highlighted to the highest and lowest points..
Any help will be appreciated.
Please find my code below.
<link rel="stylesheet" href="style.css" type="text/css">
<script src="amcharts/amcharts.js" type="text/javascript"></script>
<script src="amcharts/serial.js" type="text/javascript"></script>
<script>
var chart;
var chartData = [
{"date": "2006", "value": 63, "value1": 87},
{"date": "2007", "value": 64, "value1": 63},
{"date": "2008", "value": 66, "value1": 75},
{"date": "2009", "value": 70, "value1": 51},
{"date": "2010", "value": 63, "value1": 79},
{"date": "2011", "value": 64, "value1": 65},
{"date": "2012", "value": 56, "value1": 52},
{"date": "2013", "value": 60, "value1": 88},
{"date": "2014", "value": 56, "value1": 90},
{"date": "2015", "value": 68, "value1": 83},
{"date": "2016", "value": 68, "value1": 63},
{"date": "2017", "value": 69, "value1": 74},
{"date": "2018", "value": 70, "value1": 68},
{"date": "2019", "value": 55, "value1": 65}, ];
AmCharts.ready(function () {
// SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.dataProvider = chartData;
chart.dataDateFormat = "YYYY";
chart.categoryField = "date";
chart.addTitle("Graph Chart-Connects/ Disconnects");
chart.addListener("rendered", highlight);
// AXES
// category
var categoryAxis = chart.categoryAxis;
categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
categoryAxis.minPeriod = "YYYY"; // our data is daily, so we set minPeriod to DD
categoryAxis.gridAlpha = 0.1;
categoryAxis.minorGridAlpha = 0.1;
categoryAxis.axisAlpha = 0;
categoryAxis.minorGridEnabled = true;
categoryAxis.inside = true;
// value
var valueAxis = new AmCharts.ValueAxis();
valueAxis.tickLength = 0;
valueAxis.axisAlpha = 0;
valueAxis.showFirstLabel = false;
valueAxis.showLastLabel = false;
chart.addValueAxis(valueAxis);
// GRAPH
var graph = new AmCharts.AmGraph();
graph.title = "Connects";
graph.dashLength = 3;
graph.lineColor = "#00CC00";
graph.valueField = "value";
graph.bullet = "round";
graph.balloonText = "[[category]]<br><b><span style='font-size:14px;'>Connects:[[value]]</span></b>";
chart.addGraph(graph);
// GRAPH
var graph1 = new AmCharts.AmGraph();
graph1.title = "Disconnects";
graph1.dashLength = 3;
graph1.lineColor = "#EF9B0F";
graph1.valueField = "value1";
graph1.bullet = "square";
graph1.balloonText = "[[category]]<br><b><span style='font-size:14px;'>Disconnects:[[value1]]</span></b>";
graph1.fillToGraph = graph;
chart.addGraph(graph1);
// CURSOR
var chartCursor = new AmCharts.ChartCursor();
chartCursor.valueLineEnabled = true;
chartCursor.valueLineBalloonEnabled = true;
chart.addChartCursor(chartCursor);
// SCROLLBAR
var chartScrollbar = new AmCharts.ChartScrollbar();
chart.addChartScrollbar(chartScrollbar);
// HORIZONTAL GREEN RANGE
var guide = new AmCharts.Guide();
guide.value = 10;
guide.toValue = 20;
guide.fillColor = "#00CC00";
guide.inside = true;
guide.fillAlpha = 0.2;
guide.lineAlpha = 0;
valueAxis.addGuide(guide);
var legend = new AmCharts.AmLegend();
legend.marginLeft = 110;
// legend.data = [{markerType:"round",title:"Connects",color:"#EF9B0F"}, {markerType:"square",title:"Disconnects",color:"#00CC00"}]
chart.addLegend(legend);
// WRITE
chart.write("chartdiv");
});
function highlight(event) {
// get chart and value axis
var chart = event.chart;
var axis = chart.valueAxes[0];
var graph = chart.graphs[1];
if (chart.minMaxMarked)
return;
// find data points with highest and biggest values
for (var i = 0; i < chart.dataProvider.length; i++) {
var dp = chart.dataProvider[i];
console.log(dp[graph.valueField] + "<=>" + axis.maxReal);
//alert(axis.minReal);
if (dp[graph.valueField] == axis.maxReal) {
alert('test');
dp.markerType = "bubble";
dp.bulletSize = 8;
//dp.
}
else if (dp[graph.valueField] == axis.minReal) {
// alert('test');
dp.markerType = "bubble";
dp.bulletSize = 8;
}
}
// set flag that we're done already
chart.minMaxMarked = true;
// take in updated data
chart.validateData();
}
</script>
You are correctly setting the size/type parameters for high/low data points in data.
However, your graphs are not set up to use those fields.
To make the graph look for bullet type in data use its bulletField property. For bullet size: bulletSizeField:
graph.bulletSizeField = "bulletSize";
graph.bulletField = "markerType";
// ...
graph1.bulletSizeField = "bulletSize";
graph1.bulletField = "markerType";
Solution posted martynasm !!! Thanks.
var chart;
var chartData = [
{"date": "2006", "value": 67, "value1": 83},
{"date": "2007", "value": 70, "value1": 90},
{"date": "2008", "value": 66, "value1": 56},
{"date": "2009", "value": 65, "value1": 50},
{"date": "2010", "value": 55, "value1": 90},
{"date": "2011", "value": 60, "value1": 89},
{"date": "2012", "value": 60, "value1": 52},
{"date": "2013", "value": 61, "value1": 63},
{"date": "2014", "value": 65, "value1": 74},
{"date": "2015", "value": 64, "value1": 53},
{"date": "2016", "value": 66, "value1": 61},
{"date": "2017", "value": 60, "value1": 76},
{"date": "2018", "value": 62, "value1": 65},
{"date": "2019", "value": 61, "value1": 51},
];
AmCharts.ready(function () {
// SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.dataProvider = chartData;
chart.dataDateFormat = "YYYY";
chart.categoryField = "date";
chart.addTitle("Graph Chart-Connects/ Disconnects");
chart.addListener("rendered", highlightY1);
chart.addListener("rendered", highlightY2);
// AXES
// category
var categoryAxis = chart.categoryAxis;
categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
categoryAxis.minPeriod = "YYYY"; // our data is daily, so we set minPeriod to DD
categoryAxis.gridAlpha = 0.1;
categoryAxis.minorGridAlpha = 0.1;
categoryAxis.axisAlpha = 0;
categoryAxis.minorGridEnabled = true;
categoryAxis.inside = true;
// value
var valueAxis = new AmCharts.ValueAxis();
valueAxis.tickLength = 0;
valueAxis.axisAlpha = 0;
valueAxis.showFirstLabel = false;
valueAxis.showLastLabel = false;
chart.addValueAxis(valueAxis);
// GRAPH
var graph = new AmCharts.AmGraph();
graph.title = "Connects";
graph.dashLength = 3;
graph.lineColor = "#00CC00";
graph.valueField = "value";
graph.bullet = "round";
//graph.bulletSizeField = "30";
// graph.bulletField = "value";
graph.balloonText = "[[category]]<br><b><span style='font-size:14px;'>Connects:[[value]]</span></b>";
chart.addGraph(graph);
// GRAPH
var graph1 = new AmCharts.AmGraph();
graph1.title = "Disconnects";
graph1.dashLength = 3;
graph1.lineColor = "#EF9B0F";
graph1.valueField = "value1";
graph1.bullet = "square";
//graph1.bulletSizeField = "30";
// graph1.bulletField = "bullet";
graph1.balloonText = "[[category]]<br><b><span style='font-size:14px;'>Disconnects:[[value1]]</span></b>";
graph1.fillToGraph = graph;
chart.addGraph(graph1);
// CURSOR
var chartCursor = new AmCharts.ChartCursor();
chartCursor.valueLineEnabled = true;
chartCursor.valueLineBalloonEnabled = true;
chart.addChartCursor(chartCursor);
// SCROLLBAR
var chartScrollbar = new AmCharts.ChartScrollbar();
chart.addChartScrollbar(chartScrollbar);
// HORIZONTAL GREEN RANGE
var guide = new AmCharts.Guide();
guide.value = 10;
guide.toValue = 20;
guide.fillColor = "#00CC00";
guide.inside = true;
guide.fillAlpha = 0.2;
guide.lineAlpha = 0;
valueAxis.addGuide(guide);
var legend = new AmCharts.AmLegend();
legend.marginLeft = 110;
// legend.data = [{markerType:"round",title:"Connects",color:"#EF9B0F"}, {markerType:"square",title:"Disconnects",color:"#00CC00"}]
chart.addLegend(legend);
// WRITE
chart.write("chartdiv");
});
function highlightY1(event) {
// get chart and value axis
var chart = event.chart;
// var axis = chart.valueAxes[0];
var graph = chart.graphs[0];
graph.bulletSizeField = "bulletSize1";
graph.bulletField = "markerType1";
if (chart.minMaxMarked)
return;
var connectsValue = new Array();
for (var i = 0; i < chart.dataProvider.length; i++) {
connectsValue[i] = chart.dataProvider[i][graph.valueField];
}
connectsValue.sort();
// find data points with highest and biggest values
connectsMax = parseInt(connectsValue[connectsValue.length - 1]);
connectsMin = parseInt(connectsValue[0]);
for (var i = 0; i < chart.dataProvider.length; i++) {
var dp = chart.dataProvider[i];
if (dp[graph.valueField] == connectsMax) {
console.log(dp[graph.valueField] + "<=>" + connectsMax);
dp.markerType1 = "triangleUp";
dp.bulletSize1 = 18;
}
if (dp[graph.valueField] == connectsMin) {
// alert('test');
console.log(dp[graph.valueField] + "<=>" + connectsMin);
dp.markerType1 = "triangleDown";
dp.bulletSize1 = 18;
}
}
// set flag that we're done already
//chart.minMaxMarked = true;
// take in updated data
// chart.validateData();
}
function highlightY2(event) {
// get chart and value axis
var chart = event.chart;
// var axis = chart.valueAxes[0];
var graph1 = chart.graphs[1];
graph1.bulletSizeField = "bulletSize2";
graph1.bulletField = "markerType2";
if (chart.minMaxMarked)
return;
var disconnectsValue = new Array();
for (var i = 0; i < chart.dataProvider.length; i++) {
disconnectsValue[i] = chart.dataProvider[i][graph1.valueField];
}
disconnectsValue.sort();
// find data points with highest and biggest values
disconnectsMax = parseInt(disconnectsValue[disconnectsValue.length - 1]);
disconnectsMin = parseInt(disconnectsValue[0]);
for (var i = 0; i < chart.dataProvider.length; i++) {
var dp = chart.dataProvider[i];
if (dp[graph1.valueField] == disconnectsMax) {
console.log(dp[graph1.valueField] + "<=>" + disconnectsMax);
dp.markerType2 = "triangleUp";
dp.bulletSize2 = 18;
}
if (dp[graph1.valueField] == disconnectsMin) {
// alert('test');
console.log(dp[graph1.valueField] + "<=>" + disconnectsMin);
dp.markerType2 = "triangleDown";
dp.bulletSize2 = 18;
}
}
// set flag that we're done already
chart.minMaxMarked = true;
// take in updated data
chart.validateData();
}
html, body {
width: 100%;
height: 100%;
margin: 0px;
}
#chartdiv {
width: 100%;
height: 100%;
}
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>

Resources