I've used AddPoint repeatedly on a scatter Highchart to show some data evolution, using
setinterval()
When the chart updates the axes' ranges as a consequence of the presence of new data points, the chart sometimes "twitches" as the data distribution is not longer well balanced around the origin:
http://jsfiddle.net/dhigger/qfxe87tr/
I would like to keep the redrawing of the axes to accommodate various data distributions, so one solution would be to keep the origin at the centre of the graph at all times, and scale positive and negative of an axis together, and always scale up. But I can't see how to achieve these.
Is there a way to avoid the twitch?
Those "twitches" are coming from Highcharts' native axis auto-scaling. You can fix the xAxis so your chart won't move anymore. For example, I managed to have your JSFiddle working by adding min: -15 for the xAxis:
xAxis: {
plotLines: [{
color: '#FA5858',
width: 1,
value: 0,
zIndex: 2
}],
minRange: 30,
min: -15,
gridLineWidth: 1
}
See the JSFiddle working with not "twitches" here.
After setting the limits of the axes (per #Kabulan0lak's answer), I found that I could monotonically increase both positive and negative axis limits by keep track of the largest-magnitude data values and then re-set the max and min limits of the axes manually using setExtremes (manual).
e.g. chart.xAxis[0].setExtremes(min_x,max_x);
Updated jsfiddle: http://jsfiddle.net/dhigger/qfxe87tr/3/
Related
I am trying to build a waterfall chart which will have heavily skewed data(max 45000, min 4), to make the smaller values look significant amount and I am trying to break the yaxis to achieve that. However I am unable to find a generic logic as where exactly to break the yaxis so that the graph looks good for any data. Below is my code.
yAxis: {
title: {
text: 'USD'
},
// calculate percentage of first value for breaking
breaks: [{
from: data[0]*0.05, // break starts at 5% of 7311
to: data[0] * 0.97 // and ends at 97% of 7311
}],
events: {
pointBreak: pointBreakColumn
}
},
http://jsfiddle.net/Saibabu276/4cdrqnbj/61/
Also I am getting axis broken on the second bar in below case for the reason I couldn't figure out. Please Help!!
Setting the yAxis.type to logarithimic is the best way to work with skewed data.
Logarithmic axes can be useful when dealing with data with spikes or large value gaps, as they allow variance in the smaller values to remain visible.
More information with type scale use in charts, you can read on the Highcharts blog.
I am using Apexcharts to display a heatmap, which works fine.
However, i'm struggling with positioning the xAxis ticks and labels to align with the beginning of a cell in the heatmap.
Currently the behaviour is as follows:
Each series has 7 values, therefore 7 ticks which are spread equally along the xAxis which causes the offset.
What i want is to have a tick and value at the beginning of each cell in the heatmap (basically for a series with 7 values, 8 ticks along the xAxis) so that the ticks are aligned with the cells like this:
How can this be achieved?
I found a workaround to achieve this for integer x-values, even though I think this is not the optimal solution.
Apparently setting the tickAmount as well as the range property to the length of the series, delivers the desired solution if combined with an incrementation of every x value by 1.
Add this to the chart options:
xaxis: {
axisTicks: {
show: true
},
tickAmount: 7,
range: 7,
labels: {
show: true
}
}
And increase every x value of the series by 1.
I have certain requirement where I need to override the auto calculated values for Y axis in highcharts. For eg.
Here, the gridlines plot area is equally divided into 100. I wanted to override this so that the negative plot area should be at a max of let's say 50 and the positive ones can remain the same. Even if I try the max, min, softMax, softMin, ceiling and floor properties, the result is the same. I was thinking of using a secondary axis but then there is only one data in the series which would render the second one useless. I don't think using setExtremes() will be helpful either. I'm hoping to avoid modifying the library itself to add a certain option but it'll be helpful if such an option already exists in highcharts. Any suggestions?
Use tickPositions or tickPositioner property:
yAxis: {
tickPositions: [-50, 0, 100, 200, 300, 400]
}
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4883/
API Reference:
https://api.highcharts.com/highcharts/yAxis.tickPositions
https://api.highcharts.com/highcharts/yAxis.tickPositioner
I'm trying to implement a heatmap in highcharts with a logarithmic colorAxis, however, I keep getting highcharts error #10 (can't plot zero or subzero values on a logarithmic axis).
As I'm trying to apply the logarithmic property to the color axis and not the actual axis themselves, I believe my problem is caused by some of my bins having a frequency of zero (A heatmap colors by the frequency in each bin).
How can I get around this? Can I create a default function so that when a frequency is zero it assigns that bin a default color? I can't find any solutions in the docs.
Currently, my colorAxis object looks like this
colorAxis: {
type: 'logarithmic',
minColor: '#EEEEFF',
maxColor: '#000022',
stops: [
[0, '#EFEFFF'],
[0.67, '#4444FF'],
[1, '#000022']
]
}
My solution was to iterate through my data and change all the zeros to an extremely small number then set a min property on the colorAxis so the extremely small numbers would not interfere with the color scheme. This is obviously not the best solution because if the third dimension was measuring something other than frequency and this other thing could be a fraction less than 1 then the extremely small value could overlay with actual data and throw off the color scheme. Hopefully someone comes along and provides a better solution, but for now this is all the insight I have to give.
Logarithm doesn't have any value in 0 so your solution seems pretty neat. You need to apply some offset to the values that equal 0 - there's no other way.
If you want to be more consistent you can apply the offset to all the values. Then apply formatters(tooltip, data labels, color axis' labels) so that the user sees the value without the offset.
Live demo: http://jsfiddle.net/kkulig/jdf5wrdL/
I've been trying for two days to find a way to set the maximum value of the yAxis on Highcharts.
I got a percentage column graphic, but the highest value in the series is 60, so it adjusts the axis to top at 70, I found a way to choose the start point, but no way to choose the end point.
What I really need is to set the yAxis from 0 to 100, so the data will be more accurately viewed as percentage
Try this:
yAxis: {min: 0, max: 100}
See this jsfiddle example
Alternatively one can use the setExtremes method also,
yAxis.setExtremes(0, 100);
Or if only one value is needed to be set, just leave other as null
yAxis.setExtremes(null, 100);
Taking help from above answer link mentioned in the above answer sets the max value with option
yAxis: { max: 100 },
On similar line min value can be set.So if you want to set min-max value then
yAxis: {
min: 0,
max: 100
},
If you are using HighRoller php library for integration if Highchart graphs then you just need to set the option
$series->yAxis->min=0;
$series->yAxis->max=100;