Develop Reference

Zoom hides last point from series

I just found this strange behavior, I don´t know if it's a misused property or if it's some kind of bug.
If I zoom for a 6 months periods it seems to work, but if I scroll to the beginning of the series the last value of the column series is hidden. Here is a working example.
Highcharts.chart('container', {
rangeSelector: {
enabled: true,
},
scrollbar: {
enabled: true
},
chart: {
zoomType: 'x'
},
title: {
text: 'Zoom broken on 6m'
},
xAxis: {
type: 'datetime'
},
yAxis: [{},{}],
series: timeSeriesParser.map(set=> ({
...set,
})),
});

The issue occurs because the column needs additional space to be rendered. Another problem is that notice that for some particular data 6months means something different - for example in the case which you described the 6 months range starts on March 1, 2011, but ends on the Aug 31, 2011 - meanwhile the next column point starts on the Sep 1, 2011.
I have two ideas on how to solve this issue:
Set the pointPlacement to 'on':
Demo: https://jsfiddle.net/BlackLabel/Lze67jf3/
plotOptions: {
column: {
pointPlacement: 'on',
}
},
API: https://api.highcharts.com/highstock/series.column.pointPlacement
Or set the getExtremesFromAll to true:
Demo: https://jsfiddle.net/BlackLabel/78wte2hs/
API: https://api.highcharts.com/highstock/series.column.getExtremesFromAll

How do you position the x-axis labels along the line y=0 using Highcharts?

I'm trying to move the x-axis labels so that they appear along the line x=0. The scales are constantly changing, so I don't want to set the location using pixels, as y=0 may not be in the same location for each plot.
I tried looking up this question on this site and someone recommended using "crossing:0," as shown below, but that doesn't work.
xAxis: {
min: -20,
max: 20,
tickInterval: 1,
gridLineWidth: 1,
endOnTick: false,
crossing:0,
title: {
text: 'some value',
},
If someone could help me with this positioning, I would appreciate it.
Here's my JsFiddle: http://jsfiddle.net/z7eyv/35/

crossing is not an out-of-the-box feature of Highcharts.
Based on what I could find, it seems what you want is the "Crossing-Specific-Value" Highcharts plugin, which is located here: http://www.highcharts.com/plugin-registry/single/6/Crossing-Specific-Values
Update (July 5, 2016): To address the comments about your fiddle, you need to explicitly add the "Crossing-Specific-Value" plugin after your bring in the Highcharts library (see the third line below):
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="https://rawgithub.com/highslide-software/crossing-specific-value/master/crossing-specific-value.js"></script>
Now, adding the crossing variable to your x-axis will show the labels as in the demo.
I made a few tweaks to your fiddle (see http://jsfiddle.net/brightmatrix/z7eyv/38/) to better suit what you're asking.
1) Using the demo as the default, it seems that the plugin puts your labels above the axis line. I've seen instances where the labels are better ready below the line so I did the following:
xAxis: {
crossing: 0,
opposite: true,
min: -20,
max: 20,
tickInterval: 1,
gridLineWidth: 1,
endOnTick: false,
title: { text: '' },
labels: { y: 15 } // pushes the labels down below the crossing line
},
2) I then adjusted the plot line for the y-axis as follows:
yAxis: {
min: -20,
max: 20,
tickInterval: 1,
endOnTick: false,
title: { text: 'some value' },
plotLines: [{
value: 0.1,
width: 1,
color: 'black',
zIndex: 10 }] // moves the plot line above the axis gridline
},
The zIndex value of 10 means the line will show up on top of the normal gridline. Here's how this looks:
Please let me know if this better answers your question.

How to make yAxis start from a specific time with bar series in highchart?

I want to have bar chart start from a specific time (1.Apr)
So I implemented this in below sample:
(jsFiddle) sample with axis right but can the bar disappear
With the code below
yAxis: {
type: 'datetime',
min:Date.UTC(2010, 3, 1)
},
yAxis actually start from 1.Apr, but I can not see the bar itself .
If I remark the min line as below
yAxis: {
type: 'datetime'
//min:Date.UTC(2010, 3, 1)
},
Now I can see the bar appear, but the yAxis default show from 1.Jan.
Can anyone help me make the bar visible and yAxis starting from 1.Apr ?

I think I found what you're searching.
There's an option in yAxis called min, it's used to set the lowest value of your axis. Like that :
yAxis: {
type: 'datetime',
min: Date.UTC(2010, 3, 1)
}
Hope it's what you're searching. Chears from a bear.

Let me explain how datetime axis works. In general, datetime axis is based on number of milliseconds since 1970-01-01 00:00:00. That means, setting y: 3600 * 1000 will render column from 1970-01-01 00:00:00 to 1970-01-01 01:00:00. You want to start chart as 1st of April, but your data doesn't reflect that. In other words, you need provide such info, for example:
series: [{
name: 'UP',
color: 'lime',
data: [{
x: 1,
y: Date.UTC(2015, 5, 1, 1, 0, 0) // 2015-06-01 01:00:00
// or:
// y: 1433120400000
// is the same as above use for Date.UTC()
}]
}]
Live demo: http://jsfiddle.net/v9582phy/4/

Thanks for your replying, it helps. And I had extended the code yours with further enhancement as below
yAxis: {
type: 'datetime',
labels: {
formatter: function () {
var x=new Date(Date.UTC(2015, 3, 1)+this.value*1000*60)
return moment(x).format('MMM/DD HH:mm:ss')
}
}
},
with series data as
series: [{
data: [{
status:'studying',
color: 'lime',
x: 1,
y: 5
}, {
status:'playing guitar',
color: 'yellow',
x: 2,
y: 10
}, {
status:'exam',
color: 'red',
x: 2,
y: 23
}]
}]
And I got stacked bar which each bar present how many minutes for lasting status
Live demo: http://jsfiddle.net/v9582phy/11/

Highcharts Speedometer, dataLabel for mileage counter

There are several examples with the Speedometer in Highcharts.
Is there a way, to show an additional dataLabel only, without dial in the gauge?
It could show a trip recorder, mileage counter or day counter.
I tried additional series and dataLabels, but could not get it running.
http://jsfiddle.net/uqa0t3xw
series: [{
name: 'mileage counter',
data: [],
dataLabels: {
x: 0, y: 20,
format: '{y:.0f} km',
}
}]

If you want to have an additional data label by adding another series and hiding the dial you can do so by setting the color of the dial to "transparent" (JSFiddle):
series: [
// Our "hidden" series
{
name: 'mileage counter',
data: [0],
dataLabels: {
x: 0, y: 50,
format: '{y:.0f} km',
},
dial: {
backgroundColor: 'transparent'
}
},
// ... Other series
]
Also note how the y value has to be big enough to not overlap with the other data labels. If it overlaps it will be hidden, since gauge has allowOverlap: false by default. Alternatively you could set that to true, but overlapping might not be pretty.
It should be noted that this can also be solved by creating your own div and placing it in the correct spot or perhaps copying the data label from the first series and moving it slightly.

highcharts.js: static ticks spaced equally apart

Is it possible to have static tick marks equally apart even though the difference between the tick marks are not equal? For example here is how I have my yAxis set up in a column chart:
yAxis:
{
min: 0,
title:
{
text: 'Velocity (in/sec)'
},
labels:
{
overflow: 'justify'
},
tickPositions: [0.01, 0.10, 1.00, 10.00]
}
I want 0.01-0.10 to take up 33% of the graph, 0.10-1.0 to take up 33%, and 1.0-10.0 to take up the remaining 34%, with the columns falling into place according to their values.
I have some JPGraphs that have this functionality and am hoping it can be transferred to highcharts.js.

Sounds like you just want a logarithmic axis.
yAxis: {
type: 'logarithmic',
min: 0.01,
max: 10
},
Here's a fiddle example.

AFAIK Highcharts does not support automatic creation of histograms, but you can add a category to the xAxis with the desired labels, and then create arrays of data to match these.
xAxis: {
categories: ['0.01', '0.10', '1.00', '10.00']
},
series: [{
data: [10, 52, 1, 0]
}]
http://api.highcharts.com/highcharts#xAxis.categories