score:1
It's not that straightforward because Highcharts automatically determines the labels to use when the x-axis is of the type 'datetime':
To set labels like '10:33' you need to create your own categories. Luckily these can simply be derived from your data and the desired time interval.
Here's a working example: http://jsfiddle.net/Rt7ZV/
We just take the given start date, interval and number of points and build an array of the categories to be used as the x-axis labels.
function getTimes(numTimes, interval) {
var ms = (new Date(2012, 02, 30, 10, 33)).getTime();
var times = [];
var startDate = new Date(ms);
times.push(startDate.getHours() + ":" + startDate.getMinutes());
for (var i = 1; i< numTimes; i++)
{
ms += interval;
var nextTime = (new Date()).setTime(ms);
var nextDate = new Date(nextTime);
times.push(nextDate.getHours() + ":" + pad(nextDate.getMinutes(), 2));
}
return times;
}
function pad(num, size) {
var s = num+"";
while (s.length < size) s = "0" + s;
return s;
}
var data = [1, 2, 3, 4, 5, 3, 2, 5, 7, 6, 4];
var interval = 10*60*1000
var timeCategories = getTimes(data.length, interval);
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
zoomType: 'x',
spacingRight: 20
},
title: {
text: 'Time series'
},
xAxis: {
categories: timeCategories,
title: {
text: null
},
startOnTick: false
},
yAxis: {
title: {
text: 'Exchange rate'
},
startOnTick: false,
showFirstLabel: true
},
tooltip: {
shared: true
},
legend: {
enabled: false
},
series: [{
type: 'line',
name: 'time series',
data: [
1, 2, 3, 4, 5, 3, 2, 5, 7, 6, 4
]
}]
});
});
});
score:1
I found the tickPositions property on xAxis, which isn't documented on highcharts, only on highstock, but seems to work fine on both. With this property you can specify which values you want to hace a tick for, and work perfectly for my problem.
Source: stackoverflow.com
Related Query
- Highcharts, how can I start xAxis on an arbitrary time
- How can i hide all the Series in highcharts at a time
- Highcharts - How to start x axis from an arbitrary value
- How can I put xAxis in highcharts starting in the horizontal line when all values are in 0?
- HighCharts - How can i use the period separator in xAxis
- how can I use rangeselector and navigation in highcharts in the given code
- How can I get access to a Highcharts chart through a DOM-Container?
- HighCharts - How can I turn off the points?
- How can I change the colors of my highcharts piechart?
- How can I hide series from a HighCharts legend?
- How can I hide a series from initially being displayed in Highcharts
- How can I force multiple y-axis in Highcharts to have a common zero
- How can I fix Highcharts error #13?
- Highcharts datetime axis, how to disable time part (show only dates)?
- How can I remove the white border from HighCharts pie chart?
- How To Use Epoch Time With Highcharts Series Data?
- Highcharts solidgauge : How can I disable gradient fill?
- Highcharts - How can I remove starting and ending padding from area chart
- How can I delete all of the points from a highcharts series
- How can I force highcharts to show every x-axis label regardless of spacing constraints?
- how to set xAxis pointInterval(update: tickInterval) in highcharts
- Highcharts remove gap between start of xAxis and first value
- How to output JSON in python so it can be used for Geckoboard's Highcharts plugin
- How can i change highcharts data values by selecting from a dropdown list
- How can i keep the color the same in highcharts
- How can i force Highcharts to use same symbols in Legend and Series?
- How to change Highcharts xAxis label color individually?
- how to assign date time to highchart with intervals and date start
- Highcharts - How can I decrease space between categories?
- High chart - Column Range Chart with Time range. How to get tooltip as Start and End time
More Query from same tag
- MySQL Timestamp to JavaScript Date not converting correctly
- Highchart tick interval
- Can't change date format on Highcharts
- highcharts with angular, removing xAxis line
- How to disable certain option in the exporting option of Highcharts?
- Show 1st of every month on highcharts
- Highcharts live data update does not work
- how to set the interval of points if I have 2 Y axes
- Highcharts: chart with strange characters
- Size and offset for plotBackgroundImage in Highcharts
- How to dynamically add points to a bar/pie chart in a Vue context?
- Highstock: How do i display the series name along the line
- Highcharts - column stacked Y axis
- HIGHCHARTS Treemap update is not working with animation
- how to sum up all values with same keys in an object inside an array and get their average
- Rails 4 - Sprockets::FileNotFound in Welcome#index
- highcharts polar chart, move labels individually to fit small space
- add point to new series of some specific category
- highcharts: tooltip shows for spline but not scatter plot
- Highcharts : How to use setData with a string obtained by ajax?
- Highmaps Kentucky isn't highlighted when printing using US-All map
- Highcharts - applying background image to container div
- How can I update two highcharts with one dropdown menu?
- Highcharts rendering is taking lot of time in IE11
- Interactive charts in angularjs or highcharts
- Adding thousands separator for custom formatted highcharts tooltip
- Angular 4 using highcharts gauge
- how to get last value shown yAxis highcharts in current version in a simple way?
- Highchart Legend Alignment
- Highcharts y-axis unable to start from the given value