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"
}
]
Related
I draw a default OHLC chart. Then add a simple scatter series to it.
I set chart level config to share tooltips.
tooltip: { shared: true }.
But two series won't share tooltips at all.
Another big problem is that I cannot control the mouse hover effect on the new series. If you try the demo below, after clicking the AddSeries button at the bottom, the newly added series will be highlighted on mouse hover. I try to remove the mouse over effect and control it with the lineWidthPlus parameter, but there is no effect on the newly added series. Can anyone shed some light on this?
"hover": {
"enabled": false
},
https://jsfiddle.net/2t7fg9rc/
What do you think about adding the line series instead of scatter? I cannot see the hover issue that you described while using the line series.
var seriesConfig = {
"data": [
[1557322200000, 50.72],
[1566999000000, 51.03],
[1577197800000, 70.73],
[1588858200000, 75.93],
[1601040600000, 108.43],
[1620394200000, 130.85]
],
"type": "line",
"id": "Indicator",
"name": "Indicator",
"yAxis": 0,
"color": "rgb(256,0,0,0.75)",
"marker": {
enabled: true,
"symbol": "circle",
"radius": "2"
},
"showInNavigator": false,
"showInLegend": true,
"states": {
"inactive": {
"opacity": 1
},
"hover": {
"enabled": false
},
"stickyTracking": false
}
};
Demo: https://jsfiddle.net/BlackLabel/hfzwd8Lc/
I want to create a columnrange chart type using highcharts.
I have tried something like below:
I want to implement the below chart with the following custumization:
Height of the bars same as the gap between Y axis values as shown in
image
Remove the gap between bars.
You can achieve the desired behavior by fiddling around with pointRange in your series
series: [{
name: 'Temperatures',
data: [
[-9.9, 10.3],
[-8.6, 8.5],
[-10.2, 11.8],
[-1.7, 12.2],
[-0.6, 23.1],
[3.7, 25.4],
[6.0, 26.2],
[6.7, 21.4],
[3.5, 19.5],
[-1.3, 16.0],
[-8.7, 9.4],
[-9.0, 8.6],
],
pointRange: 2
}]
In the example I have set it to 2, as that closes almost the whole gap between bars.
Here you can find the working JSFiddle.
Set pointPadding, groupPadding and borderWidth to 0.
series: [{
pointPadding: 0,
groupPadding: 0,
borderWidth: 0,
name: 'Temperatures',
...
}]
live example: https://jsfiddle.net/smqrhn09/
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
I've implemented a regular AmSerial Chart to visualise number of users using an app per month. The library, however seems to rescale by changing the min value on Value Axis to larger values as the highest value keeps increasing. What we want is to set Value axis' starting value to 0 and also be able to change the magnitude of increments along the axis, for example, [0, 1000,2000,...] or [0,5000,10000,...]
I've tried to look at the docs on their site and the only thing that let me customise Value axis was ValueAxesSettings, but it doesn't let me do the above.
For the record, ValueAxesSettings is a feature for Stock Chart product and is completely ignored by regular serial charts.
To set the scale to start from 0 for value axis, use its minimum setting.
As far as increments go, you have several options.
Option 1: Manipulate grid count
If you know the range of your values, you can set both minimum and maximum properties of the value axis, then set autoGridCount: false as well as gridCount so that range divides up into increments that you need.
For example, if you have a range of values from 0 to 1000 and want to display a label/grid line at every 1000, you could do something like this:
"valueAxes": [{
"minimum": 0,
"maximum": 10000,
"autoGridCount": false,
"gridCount": 10
}]
Option 2: Use guides
If you need absolute control over which labels are placed, you can disable value axis' labels (labelsEnabled: false) and grid (gridAlpha: 0) and use guides.
Those are horizontal lines with labels, placed at values you specify:
"valueAxes": [ {
"labelsEnabled": false,
"gridAlpha": 0,
"guides": [{
"value": 5000,
"label": "5000",
"inside": false,
"lineAlpha": 0.5
}, {
"value": 10000,
"label": "10000",
"inside": false,
"lineAlpha": 0.5
}, {
"value": 15000,
"label": "15000",
"inside": false,
"lineAlpha": 0.5
}]
} ]
The above will place lines and labels at values 5000, 10000 and 15000.
In AmChart I needed to display rotated values in X axis.
Do i do it by this way:
"categoryField": "DATE",
"categoryAxis": {
"gridPosition": "start",
"autoRotateAngle": 20,
//"gridPosition":"start",
//"minHorizontalGap": 20,
"minVerticalGap": 50,
//"autoWrap": true,
"position": "bottom",
"fontSize": 8,
"labelRotation": 320,
"axisAlpha":0,
"tickLength":0
}
Problem is that labels are now in chart instead of the under the chart (See image below). So i would like to ask how can i do it?
In documentation of CategoryAxis I found nothing about positioning :
http://docs.amcharts.com/3/javascriptcharts/CategoryAxis
Thanks for any advice.
Remove "labelRotation": 320, or set "labelRotation": 0,
If you have many record, You should set "labelRotation": 30 :D