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/
Related
I need to add graphic annotations in a chart on the date (x) axis, so I added a new series with a constant value of 0 (x: date, y: 0), with custom image markers. Annotations look like this:
The problem with this approach is that the constant 0 value in the annotation series is messing around with the automatically placed ticks (on the right), which then stretch the whole Y range from 0 onwards, instead of the min and max of other series, as it is by default. That drastically affects the display of other series, whose value are far away from 0, making them look less diverse.
Highcharts comes with an annotation module, bit I didn't find an option to pin it to the axis and use a different graphic.
Is it possible to either:
a) Prevent the annotation series to influence the Y axis ticks?
b) Make customized annotations on the X axis without adding new constant series?
The easiest solution here I think would be to create a new yAxis, and have your constant series use that yAxis. Like this:
yAxis: [{
...//original yAxis
}, {
visible: false //this hides all axis lines, ticks, and labels
}]
Then in the series, you would set:
series: [{
... //Real data series
}, {
yAxis: 1, //constant series
...
}]
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/
If I am setting the rangeSelector to All, and clicking on a series in the legend. It seems like some series data gets lost or wont be displayed.
I cant figure out the problem, am I displaying too much data? I guess there wont be a problem with the json data structure (I am using the same structur as in all the demos (on the highcharts website)) - mostly it is a 2dim/3dim array.
I will attatch some screenshots of the given problem:
seems like a general highstock problem: http://jsfiddle.net/ZqqsE/1/ just added to the given demo from the highstock demos (http://www.highcharts.com/stock/demo/compare) a legend and if you select "All" and hide one of the 3 series, the other series are truncated.
legend: {
align: "right",
layout: "vertical",
enabled: true,
verticalAlign: "middle"
},
http://jsfiddle.net/eKQcK/1/
I am pretty sorry, but i cant provide example data, because my datasets are quite big - as I said - I am using the same datastructure like the examples on highcharts.com.
[[[series1 timestamp, series1 value],[series1 timestamp, series1 value],[iteminformation]],[[series2 timestamp, series2 value],[iteminformation]],[[series3 timestamp, series3 value], [series3 timestamp, series3 value],[iteminformation]]]
as you can see in my jsfiddle code, I am using an array called informationarray, which provides information about the series as an array element.
e.g.
[seriesname, series max value, series min value]
I just added this element at the end of every series array
On hiding both the series using legends, and then clicking one of the series shows xAxis starting from '-1', when ideally it should show only not null categories.
Using 'ignoreHiddenSeries: false' solves the purpose but again on hiding both the series using legend and then enabling other series tends to overlap both the series. Although on window resize event, series get aligned properly.
chart: {
type: 'column'
// ignoreHiddenSeries: false
},
Example for reference: http://jsfiddle.net/t88rc/
You can simply set for xAxis min:0, see: http://jsfiddle.net/t88rc/2/
Grouped column charts work best with equal number of data points per series.
Best solution I have found for this is to fill any missing data points with null values:
http://jsfiddle.net/jlbriggs/t88rc/1/
data: [49.9, 71.5,null,null,null,null,null,null]
I have an odd request. My boss wants me to improve an existing chart with a second axis.
The blue area must define the scale of the second axis, like a percentage of completion for the reading of the green area. The 100% value must be at the maximum of the blue area. I can collect the highest value of the blue area without any trouble, but I don't know how to set the properties of the second axis according to this value. The thing is that the second axis does not have any data associated, therefore, he isn't shown...
Any idea ?
PS : I tried to be as clear as possible, but maybe that was not the case. Don't hesitate to tell me if you need more explanations.
You can use axis.linkedTo to get a second axis and data formatters to get the data formatted as percentages.
I'm not modifying the series data, only changing the text shown in the second yAxis scale, the tooltip and the data labels.
yAxis: [{
// Default options
}, {
linkedTo: 0,
opposite: true,
labels: {
formatter: function () {
return formatPercent(this.value);
}
}
}]
Example on jsFiddle: http://jsfiddle.net/uPHZx/