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.
Related
I am drawing a line chart using chart.js to display system status (up or down).
I want to use the same series and display in red when status is down and green when status is up.
Chart fiddle here
dataset options:
"datasets": [
{
"label": "System",
"borderColor": "#66ff00",
"backgroundColor": "#66ff00",
"data": data,
"fill": false,
"tooltipName": "System",
"negative": false,
"pointRadius": 0,
"lineTension": 0
}
]
Output:
Expected :
How can I achieve this? Is there any callback I can add to dataset borderColor to set each point colour based on value?
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"
}
]
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 have an array of timestamps like [1485343314150, 1485343314150, 1485343314150, 1485343314300, 1485343314300, 1485343314400,1485343314450].
Here there are 3 values for 1485343314150, 2 values for 1485343314300 and 1 value each for 1485343314400 and 1485343314450
So while plotting on the graph
X = [1485343314150,1485343314300,1485343314400,1485343314450]
Y = [3,2,1,1]
I need a way to represent these X and Y such that Xs values are converted to a human readable datetime like 24-February 5:25 PM.
Can it be done via Chart.js or amCharts? I searched but couldn't find anything.
In AmCharts you can set parseDates to true in your categoryAxis (which is the same as the X axis) if you're using a serial chart (line, smoothed line, or column). AmCharts' XY chart can also handle dates as well by setting one of the valueAxes' type to "date", but the chart types available are limited to lines/bullets
When you enable parseDates, the chart will automatically format them to use readable date strings. You can adjust the format by specifying your own dateFormats array in the categoryAxis. You can find more information on that here.
Here's an example using a serial chart. Your data frequency is in incrments of milliseconds, so I set the categoryAxis' minPeriod to accommodate:
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"dataProvider": [{
"timestamp": 1485343314150,
"value": 3
},{
"timestamp": 1485343314300,
"value": 2
},{
"timestamp": 1485343314400,
"value": 1
},{
"timestamp": 1485343314450,
"value": 1
}],
"graphs": [{
"bullet": "round",
"type": "smoothedLine",
"valueField": "value"
}],
"categoryField": "timestamp",
"categoryAxis": {
"parseDates": true,
"minPeriod": "fff"
}
});
#chartdiv {
width: 100%;
height: 300px;
}
<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>
You can further format the axis' output through the dateFormats property as mentioned before. In this scenario, you'll want to change the string in the fff period. Depending on the amount of data, you may need to change the larger periods as well.
For some reason, this chart not show the last two data from the array.
var data = {
labels: ["Brasil", "Argentina", "Chile", "Paraguai", "Peru", "Bolívia", "México"],
datasets: [{
data: [ 9.19, 7.77, 6.80, 6.23, 6.00, 4.00, 4.00 ],
backgroundColor: backgroundColor
}],
};
http://codepen.io/marcelo2605/pen/PWWqJm?editors=0010
Anyone known why is this happens?
you need to set Y-Axis to start with 0, by default it start with the minimum value present in the data set which is 4 in your case. Due to this last 2 columns with value 4 are not visible.
yAxes: [{
ticks: {
beginAtZero: true
}
}]
updated Pen : http://codepen.io/anon/pen/LxxVBp?editors=0010
The y-scale on your graph has a minimum of 4.
The value of your last 2 points is 4, so they are not shown.
Set the min to 0, or at least less than 4 and they will show.