Plot xrange graph in x axis not in the middle - highcharts

I'm using highcharts to chart a graph to monitor during the 24 hours when a printer is printing and when a printer is doing nothing.
I've accomplished it using the xrange type, and everything is ok.
The only issue i'm having is that graph is plotted in the middle of the graph and i'd like it to be drawed in the bottom. What should i check?
This is the code i use to create the graph
Highcharts.chart('chart', {
chart: {
type: 'xrange'
},
plotOptions: {
series: {
pointPlacement: 'on',
colors: ["#00e205"],
}
},
xAxis: {
type: 'datetime',
plotBands: bands,
startOnTick: false
},
yAxis: {
min: 0,
startOnTick: false,
categories: ['Stampa'],
labels: {
enabled: false
}
},
legend : {
enabled: false
},
tooltip: {
formatter: function() {
return "Inizio stampa: "+moment(this.x).format('H:mm:ss')+" <br />Fine stampa:"+moment(this.x2).format('H:mm:ss')
}
},
title: {
text: 'Plotter'
}
});


You can disable startOnTick property and set proper min value for yAxis:
yAxis: {
min: 0.45,
startOnTick: false
},
Live demo: http://jsfiddle.net/BlackLabel/o3kxbcum/
API Reference: https://api.highcharts.com/highcharts/yAxis.min

Related

High Charts xAxis first label repeating on all ticks

I am using Highchart to create a chart. I am using xAxis type: 'datetime'
my first xAxis label is showing repeatedly. When i add tickInterval all graph ticks overlaps on one and another, So i used pointInterval instead. All graph options are working except first xAxis label which is showing repeatedly.
here is my options js:
$(function () {
$('#container').highcharts({
chart: { type: 'area'},
title: {text: null},
exporting: { enabled: false },
xAxis: {
type: 'datetime',
pointInterval: 24 * 3600 * 1000,
labels: {
padding: 0,
step: 1,
formatter : function() {
var dayStr = Highcharts.dateFormat('%a ',this.value);
return dayStr;
}
},
startOnTick: true,
endOnTick: false
},
yAxis: {
min: <?php echo $this_min;?>,
max: <?php echo $this_max;?>,
title: { text:'mmHg' }
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{showInLegend: false, name:'diastolic', data:[[1464998400, 130], [1465171200, 125], [1465344000, 120], [1465430400, 122]]}, {showInLegend: false, name:'systolic', data:[[1464998400, 90], [1465171200, 85], [1465344000, 80], [1465430400, 82]]}],
tooltip: {
formatter: function() {
var s = [];
$.each(this.points, function(i, point) {
s.push('<span style="font-weight:bold;">'+point.y +'<span>');
});
return s.join('/')+' mmHg';
},
shared: true
},
credits: { enabled: false}
});
});

I rewrote your code in jsFiddle.
The timestamp [1464998400, 1465171200, 1465344000, 1465430400] that you used in series is pointing to the same date which is Jan 18 1970 and that's why your x-axis label seems repeating. Check out my modified code #line#54 and the label is working fine now.

pointInterval is no longer available in the new version of Highchart. You should use tickInterval instead.

How to use highstocks navigator on a highchart

I have a highcharts datetime spline graph, and I would like to add the navigator from highstocks (highstocks is already on the page) without changing anything else about the graph.
Switching from a highchart to highstocks also changes of lots of default behaviour which I'd like to forego (axis settings, legend settings… all sorts). I just want the navigator.
So I'd either like to add just the navigator to my highchart, or be pointed to a comprehensive list of options that I can pass to highstocks to make it match the highcharts defaults (if one exists).
Thanks!

By replacing highcharts.js with highstock.js you won't change default behavior:
Highcharts: http://jsfiddle.net/pq7o66as/
Highstock: http://jsfiddle.net/pq7o66as/1/
Now simply enable navigator:
http://jsfiddle.net/pq7o66as/2/
navigator: {
enabled: true
},
Note:
Don't change constructor from: $('#container').highcharts(options); to $('#container').highcharts('StockChart', options);.
And default options for Highstock:
chart: {
panning: true,
pinchType: 'x',
inverted: false // "true" is not supported in Highstock
},
navigator: {
enabled: true
},
scrollbar: {
enabled: true
},
rangeSelector: {
enabled: true
},
title: {
text: null,
style: {
fontSize: '16px'
}
},
tooltip: {
shared: true,
crosshairs: true
},
legend: {
enabled: false
},
plotOptions: {
line: {
marker: {
enabled: false,
radius: 2
},
states: {
hover: {
lineWidth: 2
}
}
},
column: {
shadow: false,
borderWidth: 0
}
},
xAxis: {
startOnTick: false, // only when navigator enabled
endOnTick: false, // only when navigator enabled
minPadding: 0,
maxPadding: 0,
ordinal: true,
title: {
text: null
},
labels: {
overflow: 'justify'
},
showLastLabel: true,
type: 'datetime' // in Highstock only supported type
},
yAxis: {
labels: {
y: -2
},
opposite: opposite,
showLastLabel: false,
title: {
text: null
}
}

high charts - how do I get a stacked graph to the full width?

I have created a high chart but would like to have a similar voting style to youtube; with positive vs negative. My issue is getting the bar to stay the full width of the graph, I know percentages can fix this but I want whole numbers.
http://jsfiddle.net/u6H3b/
$(function () {
$('#container').highcharts({
chart: {
type: 'bar',
marginLeft:0
},
title: {
text: 'votes'
},
credits: {
enabled: false
},
xAxis: {
categories: ['Apples'],
title: {
enabled: false
}
},
exporting: {
enabled: false
},
yAxis: {
min: 0,
max:23,
title: {
enabled: false },
gridLineColor: '#fff',
lineColor: '#fff'
},
legend: {
backgroundColor: '#FFFFFF',
reversed: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'Yes',
data: [20]
},{
name: 'No',
data: [3]
}]
});
});

One option is to use 'endOnTick':
yAxis: {
endOnTick: false,
http://jsfiddle.net/f3eFd/
If you want the end tick (23) to show, you could also add:
tickInterval:23,
http://jsfiddle.net/bLDpg/
If you really want to get fancy, you can define each tick you need. In the following code, it prints ticks at 0, 3 and at 23.
tickPositioner: function () {
var positions = [0, 3, 23];
return positions;
},
http://jsfiddle.net/aSHz3/

I think, all you need to set is endOnTick: false and maxPadding: 0, see: http://jsfiddle.net/u6H3b/1/
The only problem is that last tick is not displayed, if this is issue for you, use tickPositioner as suggested by SteveP.

Highcharts: Area chart: fill in space between 0 and first point

http://jsfiddle.net/gabrielesandoval/efHq7/
Is there a way to fill in the gap between the y-axis and the first point. The first point on my chart should be "25 years" and i would like the area between 0 and 25 to be filled in as well. Even if the tooltip doesn't work for that point, I would just like to visually show that the values between 0 and the first point.
I tried adding a point with a x value of zero but that didnt work. The only area charts I have seen where there is no gap between the two axis and the area are examples where the chart is inverted. Is there a proper way to do this?
Current Code:
$(function () {
$('#container').highcharts({
chart: {
type: 'areaspline'
},
title: {
text: 'Monthly Comparison'
},
subtitle: {
text: '1 vs 2'
},
xAxis: {
min: 0,
categories: [0, '25 years', '30 years', '35 years', '40 years', '45 years']
},
yAxis: {
labels: {
formatter: function() {
return '$' + this.value;
}
},
min: 0,
title: {
text: 'Cost'
}
},
tooltip: {
shared: true,
valuePrefix: '$'
},
credits: {
enabled: false
},
legend: {
enabled: false
},
plotOptions: {
area: {
lineWidth: 1,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
}
}
},
series: [{
type: 'area',
name: 'series1',
data: [['',60],['25 years',60], ['30 years',60], ['35 years',60], ['40 years',60], ['45 years',60]]
}, {
type: 'area',
name: 'series2',
data: [['',90], ['25 years',100], ['30 years',175], ['35 years',300], ['40 years',400], ['45 years',400]]
}]
});
});

You should set minPadding/maxPadding as 0, but these parameters doesn't work with categories. So you need to use numeric xAxis, instead of categories.

DateTime xAxis Label Not Displaying Correct

I have a data set which is loading correctly but the xAxis label is not displaying the same as JSFiddle using the format specified. The JSFiddle share below is the exact code I am using and it displays perfect with the day of the week Sun - Sat. However, when I run it in my application it displays 00:00 and 12:00 repeated for each the 7 days. The only code change in JSFiddle was the data loading from eval(data.d.Histogram) to the actual array.
http://jsfiddle.net/ddelella/bZmtT/
$(function () {
Highcharts.setOptions({
global: {
useUTC: false
}
});
$('#container').highcharts({
chart: {},
credits: { enabled: false },
title: { text: null },
legend: { enabled: false },
plotOptions: {
series: { borderWidth: 0, pointPadding: -.3 }
},
xAxis: {
tickLength: 2,
minPadding: 0,
maxPadding: 0,
type: 'datetime',
dateTimeLabelFormats: {
day: '%a'
}
},
yAxis: {
title: { text: null },
allowDecimals: false,
min: 0,
gridLineWidth: 0
},
series: [{
data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,2,2,2,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,5,5,5,5,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,3,3,3,3,3,3,3,3,3,3,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,3,3,2,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,5,5,5,5,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,3,3,3,3,3,3,3,3,3,3,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,3,3,2,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,5,5,5,5,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,3,3,3,3,3,3,3,3,3,3,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,3,3,2,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,5,5,5,5,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,3,3,3,3,3,3,3,3,3,3,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,3,3,2,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,5,5,5,5,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,3,3,3,3,3,3,3,3,3,3,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
type: 'column',
name: 'Tractor Quantity',
pointStart: Date.parse("12/31/1899 00:00"),
pointInterval: (24/288) * 3600 * 1000
}]
});
});

It is caused by other date formats, which are default ones, for example, set hour: '%a' and probably will work.
See fixed example for one graph, and one with reproduced issue: http://jsfiddle.net/bZmtT/1/

Resources