Develop Reference

Am charts v3 XY not working with logarithmic scale

I'm woking with angularJS and npm package amcharts3 "^3.21.15". I'm having a little issue with logarithmic scale in my XY chart. This is my chart without logarithmic scale:
Working Chart without logarithmic scale
ValueAxes code:
"valueAxes": [{
//"logarithmic": true,
"minMaxMultiplier": 1.2,
"position": "bottom",
"axisAlpha": 0,
"title": "Grupos"
}, {
//"logarithmic": true,
"minMaxMultiplier": 1.2,
"axisAlpha": 0,
"position": "left"
}
]
When I activate both log scale, the chart just get blank:
Not working blank chart
And when I activate only one scale (X or Y), the chart still not showing the data, only the respective axes lines and values:
Not working chart showing only one axes information
And there's no error in browser console.
Could someone help me, please?
Thanks.

Logarithimic scale only supports positive, non-zero values and will break if you have data that doesn't meet this condition, which your working chart screenshot seems to show. For zero values, you can use the treatZeroAs property to remap those values to a small decimal value; negative values need to be removed:
"valueAxes": [{
"logarithmic": true,
"treatZeroAs": 0.01,
"minMaxMultiplier": 1.2,
"position": "bottom",
"axisAlpha": 0,
"title": "Grupos"
}, {
"logarithmic": true,
"treatZeroAs": 0.001
"minMaxMultiplier": 1.2,
"axisAlpha": 0,
"position": "left"
}
]

Echarts bar graph - Is there a possibility of side scrolling?

Is there a way to side scroll (I mean, on x axis) eCharts graph bar? I have a huge amount of data that needs to be displayed, so it cannot "fit" only browsers width, because the whole graph will be very hard to read (Every column loses on width).
My echarts version: ^4.0.4
My chart

You can add the attribute called dataZoom inside the object called options then pass this obj to the .setOption.
dataZoom: [
{
show: true,
start: 94,
end: 100
},
{
type: 'inside',
start: 94,
end: 100
},
{
show: true,
yAxisIndex: 0,
filterMode: 'empty',
width: 30,
height: '80%',
showDataShadow: false,
left: '93%'
}
],
I saw this example but i don't know what you want precisely.
https://ecomfe.github.io/echarts-examples/public/editor.html?c=mix-zoom-on-value

I found this example that can help you:
Bar Chart with scrolling options

Here I have referred the open source javascript graph library for your slider chart requirement.
Plotly.js

Force Highcharts to use my min and max

Getting quite frustrated with highcharts. I have charts with 2 y axes. I want the zeros to be aligned for the chart to make sense. Highcharts doesn't have this functionality out of the box so I've built in my own logic to handle this, which calculates an appropriate min and max for both axes.
I use these calculated values to set config.yAxis.min and config.yAxis.max. Unfortunately highcharts tries to be smart and re-calculate new min and maxes. This is especially true when I resize the browser window.
I've looked everywhere and can't find a way to forcefully set min and max. Highcharts folks, is there no way to do this? Without this, charts with double axis become completely useless.
Here's a JSFiddle: jsfiddle.net/ashokraju/5c676o1j/8

It's possible if you use yAxis.tickPositions API like that :
"yAxis": [{
"id": "quantity",
"labels": {},
"title": {
"text": "Paying Customers",
"margin": 25
},
"max": 783,
"min": -401,
"opposite": false,
"gridLineColor": "#F7F6FC",
tickPositions: [-1000, -500, 0, 500, 1000, 1500]
}, {
"id": "ratio",
"labels": {
"format": "{value}%"
},
"title": {
"text": null
},
"max": 13450,
"min": -6725,
"opposite": true,
"gridLineColor": "transparent",
tickPositions: [-10000, -5000, 0, 5000, 10000, 15000]
}]
Fiddle
Edit :
You're calculating the min and max so maybe you will have to calculate the ticks too.

Try this:
"max":783,
"min":-401,
"startOnTick": false,
"endOnTick": false,
https://api.highcharts.com/highcharts/yAxis.endOnTick
The tick options force a series to start or end at the specified min/max values.

You can also try zero-align y-axes Highcharts plugin:
https://www.highcharts.com/products/plugin-registry/single/42/Zero-align%20y-axes

Bar Chart slow zoom In/out - AmCharts

While zooming my Bar amchart is rendering very slow when data is large, that is, 2975 points. Although, rendering is fine but it is lagging while zooming in/out using drag icon. The code is as below:
for(var i=0; i<title.length; i++) {
var graphElem = {
"title":title[i],
"valueField":valueFields[i],
"valueAxis":"v1",
"type": "column",
"fillAlphas": 0.8,
"lineAlpha": 0.2
};
graph.push(graphElem);
}
var chart = AmCharts.makeChart(graphType, {
"type": "serial",
"theme": "light",
"pathToImages": "/grm/images/",
"legend": {
"equalWidths": false,
"position": "bottom",
"spacing": 3,
"markerSize":8,
},
"dataProvider": dataProvider,
"valueAxes": [ {
"id":"v1",
"axisThickness": 1,
"gridAlpha": 0,
"axisAlpha": 1,
"position": "left",
"integersOnly" : true
} ],
"columnSpacing" : 0,
"graphs": graph,
"chartScrollbar": {
"dragIconHeight" : 25,
"dragIconWidth" : 25
},
"chartCursor": {
"cursorAlpha": 0,
"cursorPosition": "mouse",
"categoryBalloonDateFormat": "MMM DD, YYYY JJ:NN"
},
"categoryField": "linkTimestamp",
"categoryAxis": {
"parseDates": true,
"axisColor": "#000000",
"minPeriod": "mm"
},
"dataDateFormat": "YYYY-MM-DD HH:NN:SS"
} );
chart.addListener("dataUpdated", zoomChart);
zoomChart();
function zoomChart(){
chart.zoomToIndexes(chart.dataProvider.length - 20, chart.dataProvider.length - 1);
}
if i use graph other than the bar(column) chart, zoom in/out is fast but it is lagging only in case of "type": "column". Please help where am i making mistake. Thanks

Try to only allow the re-rendering to happen after the zoom by setting updateOnReleaseOnly to true.

Try to remove animations, it worked for me.

how to make the category field smaller

I am a beginner in Amcharts and this is my working code pen demo
Here I have kept the
"categoryField": "country"
to draw the column chart.As you see I have the big names of the countries and they overlap each other.Is there a way to set the font of these to smaller size in Amcharts?Any help is appreciated.

if the goal is to display the labels properly
"categoryAxis": {
"gridPosition": "start",
"gridAlpha": 0,
"tickPosition": "start",
"tickLength": 20,
"labelRotation": 45
},
Pen :https://codepen.io/anon/pen/rWRKLy
or if you want to decrease font size only.
"categoryAxis": {
"gridPosition": "start",
"gridAlpha": 0,
"tickPosition": "start",
"tickLength": 20,
"fontSize" : 6
},
Pen: https://codepen.io/anon/pen/zobaKz
But i will suggest go for the first one
To know more about all the available properties, methods of categoryAxis
https://docs.amcharts.com/3/javascriptcharts/CategoryAxis

Add the "autowrap" to your "categoryAxis" to avoid the countries name overlap each other.
"categoryAxis": {
"gridPosition": "start",
"gridAlpha": 0,
"tickPosition": "start",
"tickLength": 20,
"autoWrap": true
}

https://www.amcharts.com/kbase/auto-wrap-long-category-axis-labels/ This is the option to wrap the text.

You can use media queries for this purpose and can write your own css for different screens. Check updated code
[https://codepen.io/junaid_jedi/pen/yVwEeO]
You can change it according to your requirement.