I have this little task to create a function graph using amCharts.
Thing is that I need the cursor enabled, but also the zoom disabled, so I can adjust the graph to a background image.
The documentation says that zoom is disabled with chart.zoomEnabled = false;, but it doesn't seem to work, and I don't know what could I be missing.
Thanks!
<style>
.graphContainer {
width: 500px;
height: 500px;
}
</style>
<script src="node_modules/ng"></script>
<script> let targetGroup =2; </script>
<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/plugins/forceDirected.js"></script>
<script src="https://cdn.amcharts.com/lib/4/plugins/piechart.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<div class = "graphContainer" id="divElasticidad"></div>
<script type="text/javascript">
let sensor = { "value": 85 };
let mostrarComoPorcentajes = true;
</script>
<script type="text/javascript">
am4core.ready(function() {
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
// Check if use percent or full value
let ejeX = "X";
let ejeY = "Y";
if (mostrarComoPorcentajes){
ejeX = "x";
ejeY = "y";
}
// Create chart instance
var chart = am4core.create("divElasticidad", am4charts.XYChart);
chart.paddingRight = 20;
chart.zoomEnabled = false;
// Add data
let A = 1;
let data = [];
for (let i = 0; i < 1001; i++) {
data.push({
"x": i / 10,
"X": 1715.2 * i / 10 / 100,
"y": A * i/10,
"Y": A * 1715.2 * i / 10 / 100
});
}
let sensor = { "value": 85 }
let dataSensor = [{
"x": sensor.value,
"X": 1715.2 * sensor.value / 100,
"y": A * sensor.value,
"Y": A * 1715.2 * sensor.value / 100
}];
chart.data = data;
/* Background Image */
var image = chart.createChild(am4core.Image);
image.align = "center";
image.href = "imagenFondoFuncionElasticidad.png";
image.isMeasured = false;
image.width = am4core.percent(100);
image.height = am4core.percent(100);
image.x = am4core.percent(50);
image.y = am4core.percent(50);
image.zIndex = -1000;
image.horizontalCenter = "middle";
image.verticalCenter = "middle"
// Create axes
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = ejeX;
categoryAxis.renderer.minGridDistance = 50;
categoryAxis.renderer.grid.template.location = 0.5;
categoryAxis.startLocation = 0.5;
categoryAxis.endLocation = 0.5;
categoryAxis.min = -100;
categoryAxis.max = 1500;
// Create value axis
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.baseValue = 0;
// Create series
var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.valueY = ejeY;
series.dataFields.categoryX = ejeX;
series.strokeWidth = 2;
series.tensionX = 0.77;
series.data = data;
var series2 = chart.series.push(new am4charts.LineSeries());
series2.dataFields.valueY = ejeY;
series2.dataFields.categoryX = ejeX;
series2.strokeWidth = 2;
series2.tensionX = 0.77;
series2.data = dataSensor;
let bullet2 = series2.bullets.push(new am4charts.Bullet());
let circle2 = bullet2.createChild(am4core.Circle);
circle2.width = 8;
circle2.height = 8;
circle2.horizontalCenter = "middle";
circle2.verticalCenter = "middle";
circle2.stroke = am4core.color("#999999");
circle2.strokeWidth = 2;
circle2.fill = am4core.color("#555555");
// bullet is added because we add tooltip to a bullet for it to change color
var bullet = series.bullets.push(new am4charts.Bullet());
bullet.tooltipText = "{valueY}";
bullet.adapter.add("fill", function(fill, target) {
if (target.dataItem.valueY < 0) {
return am4core.color("#FF0000");
}
return fill;
})
var range = valueAxis.createSeriesRange(series);
range.value = 0;
range.endValue = -1000;
range.contents.stroke = am4core.color("#FF0000");
range.contents.fill = range.contents.stroke;
chart.cursor = new am4charts.XYCursor();
chart.cursor.behaviour = "none";
});
</script>There is no such property called zoomEnabled. You might be thinking of mouseZoomEnabled, which is a v3 property.
If you want to disable cursor zooming in v4, set the cursor behavior to "none" as documented here. Note that the property name is using the American English spelling of behavior, which does not have the u.
chart.cursor.behavior = "none";