After updating Highcharts to newer versions (e.g. 9.0.0+/10.3.2), min value for yAxis for area chart is always set to 0 and for large values the chart looks like stright line without extremes. For line chart type, chart looks ok.
Please see example - https://stackblitz.com/edit/angular14-standaone-components-highcharts-vwctmh?file=src%2Fapp%2Fapp.component.ts
On version 7.2.2 for area chart, min value was automatically calculated based on input data.
Is it a bug?
How can I set options to force min value to be automatically calculated?
You need to set threshold property to null.
From Highcharts API:
threshold: number, null
The Y axis value to serve as the base for the area, for distinguishing
between values above and below a threshold. The area between the graph
and the threshold is filled.
If a number is given, the Y axis will scale to the threshold.
If null, the scaling behaves like a line series with fill between the graph and the Y axis minimum.
If Infinity or -Infinity, the area between the graph and the corresponding Y axis extreme is filled (since v6.1.0).
Defaults to 0.
series: [{
...,
threshold: null
}]
Discussion about softThreshold: https://github.com/highcharts/highcharts/issues/15061
Live demo: http://jsfiddle.net/BlackLabel/9cnmxqks/
API Reference: https://api.highcharts.com/highcharts/series.area.threshold
Area chart with softThreshold on Highcharts 7.2.1 has the yAxis starting point as auto-calculation value (the same as Line chart) but from 8.2.2 and higher yAxis Area chart always starts from 0
Highcharts.chart('container', {
chart: {
type: 'area'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug',
'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
softThreshold: true,
data: [9990, 9150, 10640, 12920, 14400, 17600, 13560, 14850, 21640,19410, 9960, 9440]
}]
});
7.2.1 example: https://jsfiddle.net/6v7gd8m0/5/
8.2.2 example: https://jsfiddle.net/b0tz3dfq/
Does anyone know how to make yAxis of an Area chart start with auto-calculation value and not always with 0?
======================
EDIT ======================
From 8.2.2 and higher softThreshold seems to work opposite so with softThreshold set to false
Example: https://jsfiddle.net/0keanhs2/
Does anyone understands why in that case softThreshold seem to have opposite result when switching from version 7 to 8?
Related
I have the following chart I would like to render the working times intervalls as columnrange and palcing the charts close to the xAxis.
with this part of code in the code below
chart: {
spacingTop: 0,
paddingTop: 0,
zoomType: 'x',
},
I am getting the following charts:
https://jsfiddle.net/62jq6zsd/
But I am not getting the right result.
Putting your code into a fiddle, I can see that nothing is plotted:
http://jsfiddle.net/jlbriggs/3d3fuhbb/225/
Looking at your data, the reason is apparent. You have your data set up as;
{
x: 1483358580000,
y: 1
}
But the columnrange series type requires the data elements of low and high, with an optional/inferred x value.
In addition, you have points with null values for x, which does not work for Highcharts - there must always be an x value, whether set or inferred.
It's also unnecessary - use of null points to break a line series is needed because lines are meant to be continuous; the columnrange type already has the breaks built in.
And finally, you have your x and y mixed up - since you are inverting the chart, the axes swap places - x is the vertical axis, and y is the horizontal.
If your values are time, as in the 1483358580000 above, you need to specify two timestamps - one for the start, and one for the end of each bar segment.
Example from the Highcharts demo:
data: [
[-9.7, 9.4],
[-8.7, 6.5],
[-3.5, 9.4],
[-1.4, 19.9],
[0.0, 22.6],
[2.9, 29.5],
[9.2, 30.7],
[7.3, 26.5],
[4.4, 18.0],
[-3.1, 11.4],
[-5.2, 10.4],
[-13.5, 9.8]
]
(in this example, the x value is determined by the order of the data points, and does not need to be set explicitly. In your case, you will need to specify the x value, since you want them all on the same line)
Demo Fiddle:
http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/columnrange/
{{ EDIT }}
Using your chart as a base, here is an updated version.
Code (data based on yours, edited for demonstration)
xAxis: {
categories: ['', 'Woring time'],
title: {
text: null
},
gridLineWidth: 0
},
yAxis: {
type: 'datetime'
},
series: [{
data: [
[1,1483337940000,1483337950000],
[1,1483337970000,1483337990000],
[1,1483338000000,1483338010000],
[1,1483338030000,1483338070000]
]
}]
Fiddle:
http://jsfiddle.net/jlbriggs/qdza1032/
{{ Edit again for comments }}
To reduce space between the series, you have a variety of options
1) reduce the height of your chart
2) increase the width of your bar
1/2) do both!
3) work with your axis min/max and minPadding/maxPadding settings, if you want one side of the series and not the other.
Option one, in a fiddle:
http://jsfiddle.net/jlbriggs/qdza1032/1/
Option three:
http://jsfiddle.net/jlbriggs/qdza1032/2/
Consider the following chart toy example which contains a missing value:
$('#container').highcharts({
chart: {
type: 'scatter',
},
plotOptions: {
scatter: {
lineWidth:1,
}
},
series: [{data:[[-3.8,0.4],[-3.3,-0.2],null,[-4.9,-0.7],[-4.8,-0.3]]}]
});
The points lie in the left side on the chart and don't span all its width, as it happens when you remove the missing point from the data series. In other words, the automatic min and max x-axis values seems to not be correctly computed.
In another one of my real examples the issue is more dramatic: all the data points are accumulated on a tiny strip on the left while the remainder of the chart area is completely empty.
What's wrong? It's a bug? There's a solution or a workaround?
You can't have a null x value in Highcharts.
If you want the null point to work as you've described, you need to provide an x value in order to tell the chart where the null y value is.
You've supplied your data in [x,y] pairs, so you must do that for all data points, including the null value.
Updated example, using [-3,null]:
http://jsfiddle.net/jlbriggs/2rNzr/69/
Whenever I set the categories for X, Y data in highcharts it shifts the categories so that the first one appears on the zero. For example, if I have x and y data that go from one to ten as in [[1,1],[2,2],... then the categories only show up on the 1 through 9 numbers and are shifted by one as if the first item appears on the zero category.
Is there any way to address this?
Here is the fiddle
I am using the command :
chart.xAxis[0].setCategories(['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct']);
The problem is that you are assuming Highcharts will start from 1, while they start from 0. If you will remove all x-values from data, you will see that are starting from 0. Unfortunately this is part of Highcharts logic (based on Javascript arrays) and won't be changed.
And just in case - don't try to use logarithmic axis with categories.. ;)
Is it possible to align the y axis tick "outside" on a highstock graph, so that it aligns with the gridline, rather than being "inside" and sat on top of the gridline. The documentation for highstock suggests that it should be placed "outside" by default, but looking at every example of a highstock graph, they always appear to be "inside".
tickPosition: String. The position of the major tick marks relative to the axis line. Can be one of inside and outside. Defaults to "outside".
Highchart example (what I want): http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/line-basic/
Highstock example (what I get): http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/stock/demo/basic-line/
Many thanks in advance.
Update - a solution of sorts
I came to the realisation that a Highcharts.StockChart is just a pre-configured version of Highcharts.Chart in the highstock.js file.
HighCharts.Chart has all the features of a Highcharts.StockChart - not just the features of a Highcharts.Chart in the highcharts.js file.
As a result, I have just used a highstock.js Highcharts.Chart with the configuration I require, and this places the yAxis labels in the correct position.
You can use offset parameter for yAxis.
http://api.highcharts.com/highstock#yAxis.offset
EDIT:
http://jsfiddle.net/Z4zwr/1/
yAxis : {
labels:{
align:'right',
x:-10
},
lineWidth : 1,
offset : 30
},
I've found a solution (jsfiddle): Add labels: { align: 'left' } to your yAxis options, like so:
yAxis: [{
labels: {
align: 'left'
}
}]
This tells Highcharts to align the left end of the labels with the y-axis.
Updated jsfiddle: http://jsfiddle.net/r4wrf63u/
I am using logarithmic axes on HighCharts and sometimes the chart will not render due to issues such as negative or 0 values which is totally understandable but it also fails if the axis label happens to be 0 or less as well. My question is: is there a way to capture or detect this issue during rendering so that I can dynamically change to linear axes as a fallback and render a message to notify the user why it failed?
Here is an example of a failed curve rendering due to a 0 label on the x-axis:
http://jsfiddle.net/axl163/Eqc5G/1/
Here are some more details on the HighCharts error:
http://www.highcharts.com/errors/10
I would appreciate any suggestions.
Thanks!
in your series add pointStart:1 and it should work. example:
series: [{
data: [0.001,1,1.2,1.4, 2,30],
pointStart: 1
}]
I addressed this issue by checking the values that go into HighCharts and if there are unacceptable values, the axes will automatically be changed to linear.
I resolved the problem setting the pointStart and min attribute of yAxis.
Here an example:
yAxis: {
min: 1
},
series: [{
data: [0.001,1,1.2,1.4, 2,30],
pointStart: 1
}]