Develop Reference

Highchart yaxis categories crowded

I have a highchart heatmap with categories. Since there are numerous categories the map looks crowded. Even though I enabled y-axis scrolling the pixel per category is too less and the map is practically un-usable.
Could someone please tell me how to scale the y-axis so that each category gets a definite height and is properly visible ?
https://jsfiddle.net/Lxw7gtas/
Highcharts.chart('container', {
data: {
rows: [["Sun, 07 Nov 2010 00:00:00 GMT", 0.0, 0],...],
seriesMapping: [{x: 0, value: 1, y: 2}]
},
chart: {
type: 'heatmap'
},
title: {
text: null
},
navigator: {
enabled: true
},
rangeSelector: {
enabled: true
},
boost: {
useGPUTranslations: true
},
xAxis: {
type: 'datetime',
labels: {
align: 'left',
x: 5,
y: 14,
format: '{value:%B}' // long month
},
showLastLabel: false,
tickLength: 16
},
yAxis: {
title: {
text: null
},
labels: {
},
type: 'category',
categories: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30],
scrollbar: {
enabled: true
},
tickInterval: 1,
tickPixelInterval: 100,
legend: {
align: 'center',
layout: 'horizontal',
margin: 0,
verticalAlign: 'top',
floating: true,
/* y: 25, */
/* symbolHeight: 280 */
},
colorAxis: {
stops: [
[0, '#3060cf'],
[0.5, '#fffbbc'],
[0.9, '#c4463a'],
[1, '#c4463a']
],
labels: {
format: '{value}'
}
},
series: [{
boostThreshold: 100,
borderWidth: 10,
nullColor: '#EFEFEF',
turboThreshold: Number.MAX_VALUE // #3404, remove after 4.0.5 release
}],
plotOptions: {
series: {
dataLabels: {
overflow: 'none',
crop: true,
}
}
}
}});
Please see the picture
I want to increase spacing between categories

How to set a Maximum yAxis range for HighChart graph?

Below is a bar graph where the green bars never go over 100 and the red bars never go below -100.
However in the graph's yAxis you can see -150%.
I found this fix here, however it did not work. yAxis: {min: 0, max: 100}
Is there another way to accomplish this?
Here is the area where I add those bar graphs
function addSentimentSeries(name, data) {
var index = findTheIndex(name);
var color = name === 'Positive sentiment' ? '#009900' : '#FF0000';
if (index) {
chart.series[index].update({
showInLegend: false,
yAxis: 2,
type: 'column',
name: name,
color: color,
data: data,
dataGrouping: { enabled: false }
}, true);
} else {
chart.addSeries({
showInLegend: false,
yAxis: 2,
type: 'column',
name: name,
color: color,
data: data,
dataGrouping: { enabled: false }
}, true);
}
chart.hideLoading();
chart.redraw();
}
This is the 'fix' I implemented from the answer I found above, it did not do anything, my bar graphs still display -150%
vm.config.yAxis.push({
height: '30%',
top: '70%',
gridLineWidth: 0,
title: {
text: 'Sentiment',
style: { color: '#BFBFBF' }
},
yAxis: { min: 0, max: 100 },
offset: 0,
labels: {
formatter: function() {
return this.value + '%';
},
style: { color: '#BFBFBF' }
},
opposite: false
});

You should set the minPadding and maxPadding parameters as 0, then you reduce the spacing on a axis.
yAxis: {
minPadding: 0,
maxPadding: 0
}

High chart (spark line) displaying "Created with High charts 4.0.1 No data to display" instead of display graph?

High chart (spark line) displaying Created with High charts 4.0.1 No data to display instead of display graph?
title: {
text: ''
},
credits: {
enabled: false
},
xAxis: {
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
gridLineColor: 'transparent',
min: 0,
title: {
text: ''
},
categories: ['a','b','c']
},
yAxis: [{
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
gridLineColor: 'transparent',
title: {
text: ''
},
labels:
{
enabled: false
}
},
{
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
gridLineColor: 'transparent',
title: {
text: ''
},
labels:
{
enabled: false
}
}],
series: [{
name: ' ',
yAxis: 1,
type: 'spline',
data: [1,2,3],
pointStart: 0
},
{
name: ' ',
yAxis: 1,
type: 'spline',
data: [4,5,6],
pointStart: 0
}],
legend: {
enabled: false,
width: 100,
floating: true,
align: 'left',
x: 0, // = marginLeft - default spacingLeft
itemWidth: 60
},
chart: {
height: 30,
width: 100,
marginBottom: 10
},
tooltip: {
positioner: function () {
return { x: -180, y: -25 };
},
shape: "square",
backgroundColor: '#FCE9CE',
borderWidth: 1,
borderColor: '#F90',
formatter: function () {
var bpValue = [];
var serviceDate;
$.each(this.points, function (i, point) {
bpValue.push('<span>' + point.y + '</span>');
serviceDate = point.x;
});
var content = "<span><b>Service:</b>" + serviceDate
+ "</span><br /><span><b>BP Value :</b></span>";
bpValue = bpValue.join('/');
return content + bpValue;
},
shared: true
}
Sometimes It is not displaying any line or dot. instead of that simply showing alternate text that is Created with Highcharts 4.0.1. What would be the issue? how can resolve this?

Highcharts map gradients to y-axis?

I'm trying to get the gradients to map to my y-axis. I have a min of 90 and a max of 150. I want a yellow gradient from the top down to 120 and I want it to be consistent across browsers. Can I do this? Here's my code:
$('#ao_vs_ppv').highcharts({
chart: {
backgroundColor:
{
linearGradient: [0, 215, 0, 220],
stops: [
[0, 'rgb(255,255,50)'],
[1, 'rgb(255,255,255)']
]
},
type: 'scatter'
},
title: {
text: 'Air Overpressure Vs. Peak Particle Velocity'
},
xAxis: {
min: .010,
max: 10,
type: 'logarithmic',
title: {
text: "Peak Particle Velocuty (in/sec)"
},
labels: {
overflow: 'justify'
},
tickmarkPlacement: 'on',
gridLineWidth: 1
},
yAxis: {
min: 90,
max: 150,
title: {
text: 'Air Overpressure (dBL)'
},
tickInterval:10,
labels: {
overflow: 'justify'
}
},
plotOptions: {
scatter: {
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: 'AO: {point.y}dBL<br>PPV: {point.x}in/sec'
}
}
},
legend: {
layout: 'horizontal',
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true
},
series:formatHighChartsScatter(data[i]['x_data'],data[i]['y_data'], seismoNames)
});

Change from backgroundColor to plotBackgroundColor, and use object format, not pixel, see: http://jsfiddle.net/92Nw8/1/
$('#ao_vs_ppv').highcharts({
chart: {
plotBackgroundColor: {
linearGradient: {
x1: 0,
x2: 0,
y1: 1,
y2: 0
},
stops: [
[0, 'rgb(255,255,50)'],
[1, 'rgb(255,255,255)']
]
},
type: 'scatter'
}
}

HighCharts JS Ajax Data Guage

Could someone please assist me on modifying the code from HighCharts Angular Gauge demo to load data from a comma-separated values file?
The comma-separated values column should be specifiable. i.e: data[0], data[1], data[2]
$(function () {
$('#container').highcharts({
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Speedometer'
},
pane: {
startAngle: -150,
endAngle: 150,
background: [{
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#FFF'],
[1, '#333']
]
},
borderWidth: 0,
outerRadius: '109%'
}, {
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#333'],
[1, '#FFF']
]
},
borderWidth: 1,
outerRadius: '107%'
}, {
// default background
}, {
backgroundColor: '#DDD',
borderWidth: 0,
outerRadius: '105%',
innerRadius: '103%'
}]
},
// the value axis
yAxis: {
min: 0,
max: 200,
minorTickInterval: 'auto',
minorTickWidth: 1,
minorTickLength: 10,
minorTickPosition: 'inside',
minorTickColor: '#666',
tickPixelInterval: 30,
tickWidth: 2,
tickPosition: 'inside',
tickLength: 10,
tickColor: '#666',
labels: {
step: 2,
rotation: 'auto'
},
title: {
text: 'km/h'
},
plotBands: [{
from: 0,
to: 120,
color: '#55BF3B' // green
}, {
from: 120,
to: 160,
color: '#DDDF0D' // yellow
}, {
from: 160,
to: 200,
color: '#DF5353' // red
}]
},
series: [{
name: 'Speed',
data: [80],
tooltip: {
valueSuffix: ' km/h'
}
}]
},
// Add some life
function (chart) {
if (!chart.renderer.forExport) {
setInterval(function () {
var point = chart.series[0].points[0],
newVal,
inc = Math.round((Math.random() - 0.5) * 20);
newVal = point.y + inc;
if (newVal < 0 || newVal > 200) {
newVal = point.y - inc;
}
point.update(newVal);
}, 3000);
}
});
});
An Example of comma-separated values data being loaded into Highcharts Demo - Ajax loaded data, clickable points.
$(function () {
// Register a parser for the American date format used by Google
Highcharts.Data.prototype.dateFormats['m/d/Y'] = {
regex: '^([0-9]{1,2})\/([0-9]{1,2})\/([0-9]{2})$',
parser: function (match) {
return Date.UTC(+('20' + match[3]), match[1] - 1, +match[2]);
}
};
// Get the CSV and create the chart
$.get('/samples/highcharts/demo/line-ajax/analytics.csv', function (csv) {
$('#container').highcharts({
data: {
csv: csv
},
title: {
text: 'Daily visits at www.highcharts.com'
},
subtitle: {
text: 'Source: Google Analytics'
},
xAxis: {
type: 'datetime',
tickInterval: 7 * 24 * 3600 * 1000, // one week
tickWidth: 0,
gridLineWidth: 1,
labels: {
align: 'left',
x: 3,
y: -3
}
},
yAxis: [{ // left y axis
title: {
text: null
},
labels: {
align: 'left',
x: 3,
y: 16,
formatter: function() {
return Highcharts.numberFormat(this.value, 0);
}
},
showFirstLabel: false
}, { // right y axis
linkedTo: 0,
gridLineWidth: 0,
opposite: true,
title: {
text: null
},
labels: {
align: 'right',
x: -3,
y: 16,
formatter: function() {
return Highcharts.numberFormat(this.value, 0);
}
},
showFirstLabel: false
}],
legend: {
align: 'left',
verticalAlign: 'top',
y: 20,
floating: true,
borderWidth: 0
},
tooltip: {
shared: true,
crosshairs: true
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
hs.htmlExpand(null, {
pageOrigin: {
x: this.pageX,
y: this.pageY
},
headingText: this.series.name,
maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) +':<br/> '+
this.y +' visits',
width: 200
});
}
}
},
marker: {
lineWidth: 1
}
}
},
series: [{
name: 'All visits',
lineWidth: 4,
marker: {
radius: 4
}
}, {
name: 'New visitors'
}]
});
});
});
Many Thanks,

First of all I see that you have empty series.data which doesn't exists. In case when you download data by ajax, you push your data to series or use i.e setData() / addPoint() functions. All of them are documented here: http://api.highcharts.com/highcharts
I advice to familiar with article about preprocessing data http://docs.highcharts.com/#preprocessing