We Keep Coding

Highstock remove unwanted space from chart

I have a highstock area spline chart with categories on the Y-axis. No points on the chart will ever go over the Top category, but I have an unwanted space above the top category 'Alarm'.
My Y-axis contains min and max which I use to always display all of the categories. If I set the max to 8 I lose the Alarm Category and the empty line is still there.
Here is my Y-Axis code
yAxis: {
categories: ['Unknown', 'State 1', 'Disarmed', 'Armed', 'Service Timed', 'Unauthorised', 'Alert', 'Watch', 'Alarm'],
min: 0,
max: 9,
title: {
useHTML: true,
text: 'Alert Type'
},
opposite: false,
labels: {
x: 0,
y: 8
},
},
Is there anyway which I can only display enough 'lines' for my Y-axis categories and no unwanted lines which will never be used?
All help is appreciated.

HIghcharts Heatmap Overload with Too Much Data?

$(function() {
$('#container').highcharts({
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 80,
plotBorderWidth: 0.5
},
title: {
text: 'Number'
},
xAxis: {
categories: [ .......... ]
},
yAxis: {
categories: [ .......... ],
title: null
},
colorAxis: {
min: 0,
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
symbolHeight: 280
},
tooltip: {
formatter: function() {
return '' +
this.series.xAxis.categories[this.point.x] +
'<br>' +
this.series.yAxis.categories[this.point.y] +
'<br>' + this.point.value;
}
},
series: [{
name: 'Sales per employee',
borderWidth: 1,
data: [ .......... ],
http://jsfiddle.net/Slate_Shannon/0mvgmhLb/6/
This is a heatmap chart. The chart looks okay as-is, but should have more data. However, if I add any additional data, the chart breaks.
Note that a large part of the data is commented out. This starts with the data that begins with
[50,0,null],
[50,1,8380],
[50,2,37430],
(note that I removed the axis labels and the data in the code shown above.)
If you change the position of the beginning of the comment tag to so that the "50" data gets charted, then the chart fails.
Is this just too much data, or is there a way to create a heatmap that needs to be approx 20 x 90 cells?

Set turboThreshold to 0, from the Highcharts API:
When a series contains a data array that is longer than this, only one dimensional arrays of numbers, or two dimensional arrays with x and y values are allowed. Also, only the first point is tested, and the rest are assumed to be the same format. This saves expensive data checking and indexing in long series. Set it to 0 disable. Defaults to 1000.
http://api.highcharts.com/highcharts/plotOptions.heatmap.turboThreshold
Example: http://jsfiddle.net/0mvgmhLb/7/
series: [{
name: 'Sales per employee',
borderWidth: 1,
turboThreshold: 0,
...

Try loading the Highcharts Boost module.
The boost.js module is a module to allow quick loading of hundred
thousands of data points in Highcharts.
Instead of relying solely on SVG to display the graph, this module does the following to boost performance:
... drawing the graph on a canvas, then copying over the contents to
an image tag inside the SVG, using a data URL.
Link to official blog post.
Just load the module after highcharts.js (lib/modules/boost.js).

This can be solved by providing the colorAxis with a min and max value. Highcharts has issues with calculating the max value with extremely large data sets.

Highcharts time range

is it possible to set highcharts to show data only in specific time range, like 2 hours for example, without any zooming.
For example at the beginning i have data for 2 hours from now. And is it possible not to show some points if they do not fit 2 hours from now?
for example, on the highcharts x-axis labels will be always constant like: [12:00, 12:30, 13:00, 13:30, 14-00] even without any data that is related with this time.
And when the new data comes, labels of time shift to new values like: [12:30, 13:00, 13:30, 14:00, 14:30]
I tried to do like:
this.chart = new Highcharts.Chart({
chart: {
reflow: false,
type: 'line',
renderTo: newSensor.get('id')
},
title: {
text: newSensor.get('name')
},
xAxis: {
minRange : 1
},
yAxis: {
title: {
text: 'Values'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
series: dataToChart,
plotOptions: {
series: {
lineWidth: 1,
turboThreshold: 0,
threshold: null
}
}
});
But minRange is not right property for this.

I think you should set min and max for xAxis. Then, when new point is added (using addPoint() ) you should set new extremes using
chart.xAxis[0].setExtremes( newMin, newMax )

"endOnTick" and "stopOnTick" seems to be ignored in highcharts scatter graph

I want to trim in extra edges from the xAxis .
I am using end on tick and start on tick to achieve that but somehow it seems that highcharts is ignoring that.
Here is the (fiddle)
Options Set
xAxis: [{
gridLineWidth: 2,
lineColor: '#000',
tickColor: '#000',
gridLineDashStyle:'ShortDash',
categories:xAxisCategories,
gridLineColor:'#000',
tickmarkPlacement:'on',
endOnTick: true,
startOnTick: true,
labels: {
rotation: -45,
align: 'right',
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
title: {
text: null
}
}],
labels: {
enabled: false
},
title: {
text: null
}
}],

I think you mean startOnTick. Anyway, that works exactly as should - note, you are using categories, that means plotting area is divided for categories equally (docs). One tick = one category = one part of plotting area (for example width = 20px).
You have two options:
don't use categorized axis (quite a lot of questions on SO are mentioning this - search for start/endOnTick or min/maxPadding with categories)
set start/endOnTick to false, min to (-0.5), max to (categories.length-0.5) and should work (-0.5 etc. may be different a little).

Highcharts : Display the labels (min, max, median etc.) in boxplot

I have created a basic boxplot using highcharts and it shows me the values for maximum, max quartile, median, min quartile and minimum when I hover the mouse over the box plot. I want to somehow display these values in the plot itself beside each of the lines.
I checked out the api and found that "dataLabel" would help but this is not supported for the boxplot. Could someone enlighten me on how to achieve this?
Thanks.

Not possible out of the box, but as mentioned by Steve Gu achievable by scatter. You can even ignore the formatter and disable the marker alltogether:
{
series: [
{
type: 'scatter',
tooltip: {
enabled: false
},
dataLabels: {
format: '{key}',
enabled: true,
y: 0,
},
data: [{ x: 0, y: 975, name: '975'}],
marker: {
enabled: false,
}
}
]
}
just disable marker and set format to key.

Add another data series, which is a type of "Scatter" and apply the data labels to this series using Marker. The trick is to use the same fill color as your background color and 0 line width so the marker will not be visible and only the label will be shown.
{
name: 'Outlier',
color: 'white',
type: 'scatter',
data: [ // x, y positions where 0 is the first category
{
name: 'This is my label for the box',
x:0, //box index. first one is 0.
y:975 //it will be bigger than the maximum value of of the box
}
],
dataLabels : {
align: 'left',
enabled : true,
formatter : function() {
return this.point.name;
},
y: 10,
},
marker: {
fillColor: 'white',
lineWidth: 0,
lineColor: 'white'
}
}

Unfortunately this option is not supported, only what you can do is use renderer to add custom text inside chart, but I'm aware that it can be not comfortable solution. http://api.highcharts.com/highcharts#Renderer.text()
Obviosuly you can reqest your suggestion in our user voice system http://highcharts.uservoice.com/