Develop Reference

How can I prevent Highcharts from displaying decimal intervals in between x-axis ticks?

When the chart loads, instead of just having the points on the x-axis of 1, 2, 3, etc. it includes 0.2, 0.4, 0.6, etc in between each integer point. I can't figure out how to get rid of the in-between tick marks.
Chart:
new Highcharts.chart('<some id>', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'bar'
},
title: {
text: '<some label>'
},
plotOptions: {
bar: {
stacking: 'normal'
}
},
xAxis: {
categories: categories,
// tickInterval: 1,
tickPositions: [0, 1, 2, 3, 4],
labels: {
step: 1
}
},
yAxis: {
min: 0,
max: 4,
title: {
text: '<some title>'
}
},
series: seriesData
})
It seems like it's just ignoring my tick mark settings. I've tried tickInterval w/out the positions specified, and nothing has even somewhat altered the x-axis from the default look. Even if I remove all the settings other than the category data, it looks the same. And yes, my interval is always [0,4] so there's no unbounded worries there.
Any ideas?
edit: It seems dependent on page size and the chart width... but how do I turn this setting off? As I increase and decrease the size of the page, it should never show decimals in between the integer tick marks.

I've reproduced your example and I believe you wanted to add your tickPositions property to the yAxis (in the bar series yAxis is horizontal by default, so you may have missed it).
yAxis: {
tickPositions: [0, 1, 2, 3, 4]
},
Live Demo: https://jsfiddle.net/BlackLabel/v1f2d5mp/

Highcharts multiple series force xAxis start point

I'm trying to have multiple optically synchronized charts. There is no problem with single series chart. But If I mix column and area chart, it starts to behave strangely.
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container1',
height: 200,
},
xAxis: {
startOnTick: false,
minPadding:0,
ordinal: false,
crosshair: true,
endOnTick: false,
min:1532767826000,
max:1532789426000,
type: 'datetime',
},
series: [{
type: 'area',
name: 'Serie1',
data: [ [1532767826000, 0],[1532789426000, 0] ]
},
{
type: 'column',
name: 'Serie1',
data: [ [1532767826000, 0],[1532789426000, 0] ]
}]
});
Example http://jsfiddle.net/fpnayfuq/49/
I'm not able to force area chart to have same x-axis start point as the other single series charts.

If you force all series to have the same pointPlacement, it should work:
plotOptions: {
series: {
pointPlacement: 'on'
}
},
Working example: http://jsfiddle.net/ewolden/fpnayfuq/58/

High chart area range graph with different border color

I am using high chart to draw graphs.currently using area range graph.I want to give different color to border of area range graph.and fill the interior with white.How can i achieve this.Current graph looks like below.I want to fill it with white and different border color.
name: 'Data',
pointInterval: 3600 * 1000,
data: noData,
type: 'arearange',
lineWidth: 0,
linkedTo: ':previous',
color : '#D2D2D2',
zIndex: 0,
enableMouseTracking: false

Its pretty simple to achieve. These properties can be controlled form the plotOption settings.
plotOptions: {
arearange: {
lineColor: 'blue',
fillColor: 'grey'
}
},
Here is a working jsfiddle for your reference.
Hope this is what you are looking for.
Edit:
If you are having multiple arearange then you can do as shown below
series: [{
name: 'Temperatures',
data: data,
fillColor: 'grey',
lineColor: 'red'
},{
name: 'Humidity',
data: data2,
fillColor: 'grey',
lineColor: 'red'
}]

Based on you question and the comments from the other answer:
You could add a border for plot area and remove x axis edge padding for series plot like in this demo:
JSFiddle demo: http://jsfiddle.net/u17h0h9b/
$(function() {
var chart = Highcharts.chart('container', {
chart: {
plotBackgroundColor: '#afa',
plotBorderColor: '#f0f',
plotBorderWidth: 2
},
xAxis: {
minPadding: 0,
maxPadding: 0
},
series: [{
type: 'area',
color: '#f0f',
fillColor: 'rgba(0,100,200,0.3)',
data: [1, 2, 3, 4, 5, 6, 7]
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>

Highcharts Chart with Two Axis Not Scaling Correctly

I'm a bit stumped. A little new to Highcharts. I have a watered down version of the chart I'm making with the issue I'm seeing.
I have three values on two y-axis. The second y-axis is linked to the first to ensure they share the same scale.
However, when the first y-axis gets a value much larger than the second, the chart doesn't auto re-size and the data point goes off the chart.
http://jsfiddle.net/L8x4a7x1/
In this example, if you look at this series:
{
name: "Vals 0",
type: 'column',
yAxis: 1,
data: [10, 200]
}
The value 200 is off the chart, as the scale seems to only care about the spline y-axis.
Any idea why this is the case and what can be done to fix it?
Thanks!

When an axis is linkedTo another it takes the extremes from the master. Since your master (first yAxis) is assigned to splines, you have 12 as max in master axis. So make the y-Axis with largest extremes the master.
series: [{
name: "Vals 0",
type: 'column',
yAxis: 0,
data: [10, 200]
}, {
name: "Vals 1",
type: 'spline',
yAxis: 1,
data: [4, 6]
}, {
name: "Vals 2",
type: 'spline',
yAxis: 1,
data: [3, 1]
}]
http://jsfiddle.net/6evnttmg/

Highcharts polar chart - zero at centre

I feel this must be easy but I'm just not seeing it. In the following, I want the 0 to be the very centre of the plot.
http://bit.ly/1LE6Cvr
I presumed this could be achieved with the "min" option but it does not work as expected. Instead, the zero point is created at half the charts radius.
Can someone please put me out of my misery? Thanks.

Your problem lies in the data your putting into the chart.
Because all of your plot points are 0 highcharts is adjusting the axis in order to make the data display in a readable manner.
If you adjust the data to a wider spread of numbers 0 becomes the center of the chart.
http://jsfiddle.net/3w8hq9tg/
$(function () {
$('#container').highcharts({
chart: {
polar: true
},
title: {
text: 'Highcharts Polar Chart'
},
pane: {
startAngle: 0,
endAngle: 360
},
xAxis: {
tickInterval: 45,
min: 0,
max: 360,
labels: {
formatter: function () {
return this.value + '°';
}
}
},
yAxis: {
min: 0
},
plotOptions: {
series: {
pointStart: 0,
pointInterval: 45
},
column: {
pointPadding: 0,
groupPadding: 0
}
},
series: [{
type: 'line',
name: 'Line',
data: [10, 0, 1, 5, 1, 6, 6, 2]
}]
});
});

I think I may have found a solution myself.
It would seem only way to have to plot point sitting neatly at 0 is to have a "max" value. See example.
But of course in most cases, you cannot just decide on an arbitrary max value if your series is being generated dynamically.
The trick is to determine from the API what the max value for the chart's yAxis dataset is, which if 0, you know there is no data to show, so you then set it dynamically.
See solution