Develop Reference

How to start column of waterfall chart from zero

I have a waterfall chart working, but I need that penultimate column start at zero.
I think I need to create a dummy point that hide and set Axis.min on the second point y position, but I can't put this working.
chart: {
type: 'waterfall'
},
title: {
text: ''
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
//colors: ['#DADBDF', '#ED4D5F','#ED4D5F','#ED4D5F','#ED4D5F','#ED4D5F','#D7EAFD','#D7EAFD','#D7EAFD' ],
xAxis: {
lineColor: '#FFFFFF',
lineWidth: 0,
gridLineColor: '#DADBDF',
categories: [],
},
yAxis: {
lineColor: '#FFFFFF',
lineWidth: 0,
gridLineColor: '#DADBDF',
plotBands: [{
color: '#000000',
from: 0,
to: 0
}],
title: {
text: ''
},
},
legend: {
enabled: false
},
plotOptions: {
column: {
dataLabels: {
enabled: true,
color: '#000000'
},
colorByPoint: true,
pointWidth: 150
},
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y}'
},
turboThreshold: 0,
label: {
enabled: false
}
}
},
series: [{
data: [],
showInLegend: false,
}],

You can add another waterfall series with defined x values:
Highcharts.chart('container', {
chart: {
type: 'waterfall'
},
...,
plotOptions: {
series: {
grouping: false
}
},
series: [{
data: [...]
}, {
data: [{
y: 569000,
x: 5
}, {
y: 1569000,
x: 6
}]
}]
});
Live example: https://jsfiddle.net/BlackLabel/qc07y5kf/
API Reference: https://api.highcharts.com/highcharts/series.waterfall.data

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 can I remove the extra space around my Highcharts scatter plot?

I'm trying to build an NBA shot chart generator using Highcharts. So far I've managed to gather the data and plot it, but I'm unable to overlay a court diagram over the chart to finish the job because of the extra space at the right and bottom of the chart.
Here's an Imgur gallery demonstrating what I have now and what I'm trying to achieve.
This is the code I'm using to generate the charts:
var drawChart = function(made, missed) {
$(function () {
$('#container').highcharts({
chart: {
type: 'scatter',
width: 500,
height: 470
},
title: {
text: ""
},
xAxis: {
title: {
enabled: false
},
lineWidth: 0,
gridLineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
labels: {
enabled: false
},
minorTickLength: 0,
tickLength: 0
},
yAxis: {
title: {
enabled: false
},
lineWidth: 0,
gridLineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
labels: {
enabled: false
},
minorTickLength: 0,
tickLength: 0
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 250,
y: 400,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
borderWidth: 1
},
credits: {
enabled: false
},
plotOptions: {
scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x} ft, {point.y} ft'
}
}
},
series: [{
name: "Made",
color: 'rgba(223, 83, 83, .5)',
data: made
}, {
name: "Missed",
color: 'rgba(119, 152, 191, .5)',
data: missed
}
]
});
});
}
I've tried fiddling with various spacing and margin options but haven't had any luck.
Thanks.

HighCharts not plotting decimal values in x-axis

I'm trying to plot decimal values on my x-axis, but each of my data points gets placed only on my major tick marks (at whole numbers). I'm using an array of [x,y] paired data, e.g. [[35,1500], [35.21,2000], [35.72,3500], [36.32,4000]]
What is happening, is the first item get's placed over the starting value (35), the second value (x 35.21) is being placed directly over 36, the next value (x 35.72) gets placed over 37, etc. It's as if the x-value in my data is being ignored.
Here is the chart's setup attributes:
chart: {
zoomType: 'x',
spacingRight: 10,
type: 'area'
},
title: {
text: null
},
xAxis: {
allowDecimals: true,
tickInterval: 1,
minorTickInterval: 10,
labels: {
step: 1
},
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'total$'
}
},
tooltip: {
shared: true
},
legend: {
enabled: false
},
plotOptions: {
area: {
pointStart: 35,
lineWidth: 1,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [
{
//index: 1,
name: 'trajectory$',
data: progressUpdateData,
}
]
How do I get the x-values plotted properly?
Thanks

Here's a fiddle showing your points in-between whole numbers
http://jsfiddle.net/LLExL/2462/
plotOptions: {
area: {
pointStart: 35,
pointPlacement: 'between',
lineWidth: 1,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
}
You might want to look at http://api.highcharts.com/highcharts#plotOptions.area.pointPlacement as maybe you have this set to "on" instead of "between" somewhere?

Will's answer didn't work for me. However, setting a min and a max to yAxis did. If you have these values [[35,1500], [35.21,2000], [35.72,3500], [36.32,4000]], you simply set a minimum of 35 and a maximum of 37.
This
yAxis: {
min: 0,
title: {
text: 'total$'
}
},
became this
yAxis: {
min: 35,
max: 37,
title: {
text: 'total$'
}
},

How to position axis label in highcharts

I have the attached chart output.
How can I put the name of the axis exactly on the axis instead of positioning it between the axis (ie: N, E, S, W).
The JS code is given below:
window.chart = new Highcharts.Chart({
chart: {
renderTo: 'container2',
polar: true,
type: 'column'
},
title: {
text: '24-Hours Wind Speed and Direction Chart'
},
pane: {
startAngle: 0,
endAngle: 360,
size: '85%'
},
legend: {
reversed: true,
enabled: false,
align: 'right',
verticalAlign: 'top',
y: 100,
layout: 'vertical'
},
xAxis: {
type: "",
categories: sorted_names,
labels: {
formatter: function () {
return this.value + '°';
}
}
},
yAxis: {
min: 0,
endOnTick: true,
showLastLabel: false
},
plotOptions: {
series: {
// pointStart: 0,
// pointInterval: 90
// pointPlacement: 'between'
},
column: {
pointPadding: 0,
groupPadding: 0
}
},
series: series
});
Is there anyone who can help me to fix this. Thanks in advance.

I believe you are looking for a combination of the tickMarkPlacement option and the pointPlacement option.
xAxis: {
tickmarkPlacement: 'on', // add this!
type: "",
categories: sorted_names,
labels: {
formatter: function () {
return this.value + '°';
}
}
},
And in the plot options:
plotOptions: {
series: {
pointPlacement: 'on' // add this !
},
column: {
pointPadding: 0,
groupPadding: 0
}
},
Here's a fiddle demonstration.