I got a little problem in HighStocks: I have two area series which are stacked. The problem: In the navigator at the bottom, just the first series is shown, not the resulted stacked chart.
(see http://jsfiddle.net/Je8eG/)
window.chart = new Highcharts.StockChart({
chart: {
renderTo: 'container'
},
plotOptions: {
area: {
stacking: 'normal'
}
},
series: [{
name: 'Series 1',
data: [
[Date.UTC(2010, 0, 1, 10), 53.5],
[Date.UTC(2010, 0, 1, 10, 30), 59.5],
[Date.UTC(2010, 0, 1, 11), 53.5],
[Date.UTC(2010, 0, 1, 12), 28.5],
[Date.UTC(2010, 0, 1, 13), 55.2]
],
type: 'area'
}, {
name: 'Series 2',
data: [
[Date.UTC(2010, 0, 1, 10), 29.9],
[Date.UTC(2010, 0, 1, 10, 30), 29.9],
[Date.UTC(2010, 0, 1, 11), 29.9],
[Date.UTC(2010, 0, 1, 12), 61.5],
[Date.UTC(2010, 0, 1, 13), 53.4]
],
type: 'area'
}]
});
Is there a fix or workaround?
Something like this is not supported. You can set specific series to a navigator, so I advice to sum on your own stacked series, and then pass to navigator, see: http://api.highcharts.com/highstock#navigator.series
Related
I have a chart with two yaxis but can't get the second data series to scale to the second axis. What am I missing?
Example: https://jsfiddle.net/32yugp6m/2/
Now I see where the problem is. You have set the series.yaxis to 1 and 2, meanwhile, it needs to be set as series.yAxis 0 and 1. Notice that Axis must be started with capital letter.
Demo: https://jsfiddle.net/BlackLabel/8u2rhegv/
series: [{
name: 'Deg F.',
type: 'line',
yAxis: 0,
data: [
[Date.UTC(2020, 1, 22, 12, 2), 70.8],
[Date.UTC(2020, 1, 22, 12, 1), 70.8],
...
],
},
{
name: 'RH',
type: 'line',
yAxis: 1,
data: [
[Date.UTC(2020, 1, 22, 12, 2), 33.4],
[Date.UTC(2020, 1, 22, 12, 1), 33.4],
...
],
}
]
API: https://api.highcharts.com/highcharts/series.line.yAxis
I have some data that was taken every minute. But there are irregular gaps in it. I'm using stockchart (v6.0.5) with the 'line' chart type and my xAxis is 'datetime'. I want that the gaps don't cut the xAxis in pieces but rather reflect the time that has passed as in http://jsfiddle.net/VwkHu/177/ .
I don't really want to fill in Null values in my dataset as the gaps can be large.
How can I get this behavior with stockchart?
BTW:
If I change in the upper mentioned fiddle to stock chart by adding StockChart the following way
...
$('#container').highcharts('StockChart',{
...
then the gaps don't reflect the size of the actual gap in the data but are constant or equal the gapsize.
Using highstock, you need to set ordinal: false to keep missing times in the chart.
In an ordinal axis, the points are equally spaced in the chart regardless of the actual time or x distance between them. This means that missing data for nights or weekends will not take up space in the chart.
Like this:
xAxis: {
ordinal: false,
...
},
$(function() {
$('#container').highcharts('StockChart',{
chart: {
type: 'line'
},
title: {
text: 'Snow depth at Vikjafjellet, Norway'
},
subtitle: {
text: 'Irregular time data in Highcharts JS'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
month: '%e. %b',
year: '%b'
},
title: {
text: 'Date'
},
ordinal: false
},
yAxis: {
title: {
text: 'Snow depth (m)'
},
min: 0
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x:%e. %b}: {point.y:.2f} m'
},
series: [{
name: 'Winter 2007-2008',
gapSize: 5,
//connectNulls: true,
// Define the data points. All series have a dummy year
// of 1970/71 in order to be compared on the same x axis. Note
// that in JavaScript, months start at 0 for January, 1 for February etc.
data: [
[Date.UTC(1970, 9, 27), 0],
[Date.UTC(1970, 10, 10), 0.6],
[Date.UTC(1970, 10, 18), 0.7],
[Date.UTC(1970, 11, 2), 0.8],
[Date.UTC(1970, 11, 9), 0.6],
[Date.UTC(1970, 11, 16), 0.6],
[Date.UTC(1970, 11, 28), 0.67],
[Date.UTC(1971, 0, 1), 0.81],
[Date.UTC(1971, 0, 8), 0.78],
[Date.UTC(1971, 0, 10), 0.98],
[Date.UTC(1971, 0, 27), 1.84],
[Date.UTC(1971, 1, 10), 1.80],
[Date.UTC(1971, 1, 18), 1.80],
[Date.UTC(1971, 1, 24), 1.92],
[Date.UTC(1971, 2, 4), 2.49],
[Date.UTC(1971, 2, 11), 2.79],
[Date.UTC(1971, 2, 15), 2.73],
[Date.UTC(1971, 2, 25), 2.61],
[Date.UTC(1971, 3, 2), 2.76],
[Date.UTC(1971, 3, 6), 2.82],
[Date.UTC(1971, 3, 13), 2.8],
[Date.UTC(1971, 4, 3), 2.1],
[Date.UTC(1971, 4, 26), 1.1],
[Date.UTC(1971, 11, 9), 0.25],
[Date.UTC(1971, 11, 12), 0]
]
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
Working JSFiddle example: http://jsfiddle.net/ewolden/VwkHu/183/
I have been trying this for hours and still have no idea.
Here is the config that I am using
chart: {
type: 'xrange',
height: 800,
},
title: {
text: 'Patient Sessions Overview'
},
xAxis: {
title: 'Time of the Day',
type: 'datetime',
tickInterval: 3600*1000,
tickPixelInterval: 200,
labels: {
formatter: function () {
return Highcharts.dateFormat('%H:%M', this.value);
},
},
min: Date.UTC(2016,1,1),
max: Date.UTC(2016,1,2),
},
yAxis: {
title: 'Day of the Month',
type: 'datetime',
tickInterval: 3600*1000*24,
//tickPixelInterval: 100,
min: Date.UTC(2016,1),
max: Date.UTC(2016,2) - 3600*1000*24
//min: 0,
//max: 31
},
plotOptions:{
series: {
pointPadding: 0,
groupPadding: 0
}
},
series: [{
name: 'Sessions',
//pointStart: Date.UTC(2000,0,1),
//pointInterval: 3600*1000,
//pointPadding: 10,
// groupPadding: 0,
borderRadius: 5,
pointWidth: 20,
data: [{
x: Date.UTC(2016, 1, 1, 0),
x2: Date.UTC(2016, 1, 1, 9),
y: Date.UTC(2016,1,4)
}, {
x: Date.UTC(2016, 1, 1, 12),
x2: Date.UTC(2016, 1, 1, 15),
y: Date.UTC(2016,1,5)
}, {
x: Date.UTC(2016, 1, 1, 8),
x2: Date.UTC(2016, 1, 1, 9),
y: Date.UTC(2016,1,14)
}, {
x: Date.UTC(2016, 1, 1, 8),
x2: Date.UTC(2016, 1, 1, 9),
y: Date.UTC(2016,1,20)
}, {
x: Date.UTC(2016, 1, 1, 8),
x2: Date.UTC(2016, 1, 1, 23),
y:Date.UTC(2016,1,25)
},],
}]
Here is the jsfiddle link
I need to remove the chart to make full use of the plot area without leaving a huge white space on both ends.
It is problem with unsorted data. In fact, you can not sort your data as Highcharts would expect, because some of the points are starting before previous one are ended. However, for such case, series.pointRange = 1 resolves all issues, take a look: http://jsfiddle.net/umndydLL/1/
Use following in your chart config:
spacingBottom: 0,
spacingTop: 0,
spacingLeft: 0,
spacingRight: 0,
margin:0,
padding:0
I have a need with HighCharts graphs to display a line chart with 3 series and triangle markers on the same line. I have this a JSFiddle that seems to be working ok, but if the points are too close together a whole series becomes invisible.
$(function () {
$('#container').highcharts({
title: {
text: null
},
chart: {
type: 'line',
plotBackgroundImage: null,
backgroundColor: 'transparent',
width: 350,
height: 520,
borderWidth: 0,
marginTop: 0,
marginBottom: 50,
marginLeft: 140,
},
legend: {
align: 'left',
verticalAlign: 'top',
layout: 'vertical',
x: 0,
y: 20
},
xAxis: {
type: 'datetime',
lineWidth: 2,
lineColor: "#FF0000",
label: {
enabled: true,
format: "{value}"
}
},
yAxis: {
labels: {
enabled: false
},
gridLineColor: '#197F07',
title: {
text: null
}
},
plotOptions: {
series: {
marker: {
radius: 8,
symbol: "triangle"
}
},
line: {
lineWidth: 0
}
},
series: [{
data: [
[Date.UTC(2010, 0, 1), 0],
[Date.UTC(2010, 5, 1), 0],
[Date.UTC(2010, 11, 1), 0]
],
color: "#FF0000",
name: 'Group 1',
}, {
data: [
[Date.UTC(2010, 2, 1), 0],
[Date.UTC(2010, 3, 1), 0],
[Date.UTC(2010, 8, 1), 0]
],
color: "#00FF00",
name: 'Group 2'
}, {
data: [
[Date.UTC(2010, 1, 1), 0],
[Date.UTC(2010, 6, 1), 0],
[Date.UTC(2010, 9, 1), 0],
[Date.UTC(2011, 5, 1), 0]
],
color: "#0000FF",
name: 'Group 3'
}]
});
});
In this case, on the jsfiddle, the green triangles are invisible unless you hover over them. If the chart width is set to 550, the green triangles become visible.
I'd like to find a way to make these visible at all times. Thanks!
I'm not sure why this problem occurs originally, but it seems to be solved by explicitly stating enabled: true for plotOptions.series.marker. Like this:
plotOptions: {
series: {
marker: {
enabled: true, // Added
radius: 8,
symbol: "triangle"
}
},
line: {
lineWidth: 0
}
}
See this updated JSFiddle demonstration.
I use line / area chart to display datetime data.
see example : http://jsfiddle.net/YFERb/
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
type: 'datetime'
},
series: [{
data: [
[Date.UTC(2010, 0, 1), 29.9],
[Date.UTC(2010, 0, 3), 106.4],
[Date.UTC(2010, 0, 5), 75],
[Date.UTC(2010, 0, 6), 129.2],
[Date.UTC(2010, 0, 10), 176.0]
]
}]
});
});
But I want to fill empty day to 0.
see example : http://jsfiddle.net/RSPNU/
so below day is filled 0.
2010.0.2,
2010.0.4,
2010.0.7,
2010.0.8,
2010.0.9
I insert 0 in empty day.
But it is very heavy.
So I want to display like 2nd example except inserting 0 or null data.
If you have other way, please reply this.
thank you.
To avoid points you can set it's value to null.
When you do it your chart will have a gap between null points, so you have to set connectNulls to true.
series: [{
data: [
[Date.UTC(2010, 0, 1), 29.9],
[Date.UTC(2010, 0, 2), null],
[Date.UTC(2010, 0, 3), 106.4],
[Date.UTC(2010, 0, 4), null],
[Date.UTC(2010, 0, 5), 75],
[Date.UTC(2010, 0, 6), 129.2],
[Date.UTC(2010, 0, 7), null],
[Date.UTC(2010, 0, 8), null],
[Date.UTC(2010, 0, 9), null],
[Date.UTC(2010, 0, 10), 176.0]
]
}],
plotOptions: {
series: {
connectNulls: true
}
}
demo
In general, how Highcharts should know that you want to put 0 every day, not every hour, or maybe every second? If you know how is your data cropped you can set pointInterval and pointStart for a series. Then you can update each of the points which should have different value, see example: http://jsfiddle.net/YFERb/3/