We Keep Coding

How to disable cursor zoom in amCharts?

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

amcharts4 bullets out of alignment

The bullets on my amchart4 chart are not on the line. Why are they out of alignment? How can I put them on the line? the code does not seem to have an option to realign? there are no obvious errors in the code? unless this is being caused from css or other code on website?
<script>
am4core.ready(function() {
am4core.useTheme(am4themes_animated);
var chart = am4core.createFromConfig({
"data": <?php echo $a?>
}, "chartdiv", am4charts.XYChart);
chart.dateFormatter.inputDateFormat = "yyyy-MM-dd";
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.valueY = "balance_amount";
series.dataFields.dateX = "balance_date";
var bullet = series.bullets.push(new am4charts.CircleBullet());
bullet.circle.strokeWidth = 2;
bullet.circle.radius = 4;
bullet.circle.fill = am4core.color("#fff");
var bullethover = bullet.states.create("hover");
bullethover.properties.scale = 1.3;
var range = valueAxis.createSeriesRange(series);
range.value = 0;
range.endValue = -1000;
range.contents.stroke = chart.colors.getIndex(4);
range.contents.fill = range.contents.stroke;
range.contents.strokeOpacity = 0.7;
range.contents.fillOpacity = 0.1;
chart.cursor = new am4charts.XYCursor();
chart.cursor.behavior = "panXY";
chart.cursor.xAxis = dateAxis;
chart.cursor.snapToSeries = series;
series.strokeWidth = 3; // 3px
series.tensionX = 0.8;
series.tensionY = 0.8;
valueAxis.renderer.grid.template.disabled = true;
dateAxis.renderer.grid.template.disabled = true;
chart.events.on("ready", function () {
dateAxis.zoom({start:0, end:1});
});
}); // end am4core.ready()
</script>

How to show percent value?

This sources is get data from Ajax. I hope that the percentage value with price value will appear in the same space. I made a percentage axis, but the difference with the price axis is too big. This is because the price value is very bigger than the percentage value. How to fix it ?
// Create axes
var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "year";
categoryAxis.numberFormatter.numberFormat = "#,###";
categoryAxis.renderer.inversed = true;
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.cellStartLocation = 0.1;
categoryAxis.renderer.cellEndLocation = 0.9;
var valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.opposite = true;
var valueAxis1 = chart.xAxes.push(new am4charts.ValueAxis());
valueAxis1.renderer.opposite = true;
valueAxis1.guides = data.margin_percent;
valueAxis1.min = 0;
valueAxis1.max = 100;
// Create series
function createSeries(field, name) {
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueX = field;
series.dataFields.categoryY = "year";
series.name = name;
series.columns.template.tooltipText = "{name}: [bold]{valueX}[/]";
series.columns.template.height = am4core.percent(100);
series.sequencedInterpolation = true;
var valueLabel = series.bullets.push(new am4charts.LabelBullet());
valueLabel.label.text = "{valueX}";
valueLabel.label.horizontalCenter = "left";
valueLabel.label.dx = 10;
valueLabel.label.hideOversized = false;
valueLabel.label.truncate = false;
var categoryLabel = series.bullets.push(new am4charts.LabelBullet());
categoryLabel.label.text = "{name}";
categoryLabel.label.horizontalCenter = "right";
categoryLabel.label.dx = -10;
categoryLabel.label.fill = am4core.color("#fff");
categoryLabel.label.hideOversized = false;
categoryLabel.label.truncate = false;
}
createSeries("year_sales", "sales");
createSeries("year_cost", "cost");
var lineSeries = chart.series.push(new am4charts.LineSeries());
lineSeries.dataFields.valueX = "margin_percent";
lineSeries.dataFields.categoryY = "year";
lineSeries.name = "margin";
lineSeries.stroke = am4core.color("#fdd400");
lineSeries.strokeWidth = 3;
lineSeries.tooltipText = "margin in {categoryY}: {valueX.value}";

AmChart percentage Clustered bar dynamic calculation

I am trying to put a percent calculation in each column. How can I do this?
I have this for now:
var legend = new AmCharts.AmLegend();
chart.addLegend(legend);
var qtd = 0;
var sum = 0;
for(i=0;i<datas.length;i++){
sum[i] += Object.keys(datas[i]);
qtd = (qtd < Object.keys(datas[i]).length - 1) ? Object.keys(datas[i]).length - 1 : qtd;
}
console.log(Object.keys(datas));
for(j=1;j<qtd+1;j++){
datas[j].share = Math.round(datas[j].expenses / sum * 100);
var graph = new AmCharts.AmGraph();
graph.valueField = "expenses"+(j);
graph.balloonText = "[[category]]: <b>[[value]]</b> ([[share]]%)";
graph.labelText = "[[share]]%";
graph.labelPosition = "inside";
graph.type = "column";
graph.fillAlphas = 0.8;
chart.addGraph(graph);
}
https://jsfiddle.net/dayaners3/933t512e/

How to create a eraser for a drawing html app?

I am new on EaselJS and I want to create an eraser as brush. This is what I am using for drawing but I want to do the same thing with transparent.
//brush tool
var brush = new createjs.Bitmap(app.loader.getResult('brush'));
brush.name = 'brush';
brush.x = 50;
brush.y = -34;
brush.addEventListener('click', this.brushHandler);
this.toolsContainer.addChild(brush);
this.brushSizes = new createjs.Container();
this.brushSizes.x = brush.x + 40;
this.brushSizes.y = brush.y - 20;
this.brushSizes.visible = false;
this.toolsContainer.addChild(this.brushSizes);
for(var p = 0; p < this.sizes.length; p++){
var size = new createjs.Shape();
size.name = 'size'+p;
size.graphics.beginFill('#FFFFFF');
size.graphics.drawCircle(0,0,this.sizes[p]);
size.addEventListener('click', this.brushHandler);
size.x = (p==1) ? p * 40 : p * 45;
this.brushSizes.addChild(size);
}