score:8
Highcharts has a built in way of plotting times or dates as the xaxis. Typically, in this case, your data would use a time value in milliseconds, and highcharts will plot it accordingly (see this example).
If you wanted to have a 24 hour day including your data, it might look something like this:
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
type: 'datetime' //ensures that xAxis is treated as datetime values
},
series: [{
data: [
[Date.UTC(2012, 5, 22, 8, 15), 14.8],
[Date.UTC(2012, 5, 22, 8, 20), 13.9],
[Date.UTC(2012, 5, 22, 8, 25), 12.8]
//and so on...
]
}]
});
You could then do something like use a custom xAxis formatter or date formatter to display the labels however you want.
score:33
you can try this code to make x-axis in 12hour time format
xAxis: {
title: {
enabled: true,
text: 'Hours of the Day'
},
type: 'datetime',
dateTimeLabelFormats : {
hour: '%I %p',
minute: '%I:%M %p'
}
},
Also for "tooltip" try this:
tooltip: {
formatter: function() {
return ''+
"" +
'Time: '+ Highcharts.dateFormat('%I:%M %p', this.x);
}
},
And of course series would be:
series: [{
data: [
[Date.UTC(2013, 3, 22, 1, 15), 12.7],
[Date.UTC(2012, 3, 24, 3, 20), 13.5],
[Date.UTC(2012, 2, 22, 2, 25), 18.8]
]
}]
Hope it could solve your problem. Thanks.
Source: stackoverflow.com
Related Query
- Displaying hours and minutes on x-axis with Highcharts
- Plotting seconds, minutes and hours on the yAxis with Highcharts
- Highcharts - best way to handle and display zero (or negative) values in a line chart series with logarithmic Y axis
- Highcharts blank chart with x and y axis
- Highcharts - Global configuration with common code and unique data & Headings
- how to show column and area charts with different y axis with same category and same x axis in highcharts
- Highcharts multiple x axis and yaxis. The width of the 1st x-axis is not in sync with browser resize
- Using hours and minutes as data in highcharts donut chart
- Displaying date on the x axis with Highcharts using ASP.NET MVC
- Highcharts with dual axis and stacking - R
- highcharts not displaying line when last point is before current x Axis minimum and next point is after current X Axis maximum
- Avoid displaying y axis label and points when there is no data: HIghcharts
- Highcharts not displaying with csv/json and Flask
- Highcharts Boxplot - box with lower, upper quartile and median is not displaying when min and max are null of a category
- Highcharts - Format X axis with 2 digit hours in 24 hour format
- min and max axis value not respected in HighCharts chart with a logarithmic axis
- Highcharts - show only hours and minutes in xAxis
- Highcharts treemap with drillnodes and color axis : do not display sub level colors in the main level
- Highcharts formatNumbers displaying labels and axis incorrectly
- highchart scatter with 24 hours time on y axis and the day of the transaction on x axis
- HighCharts - hide date on x-axis and have only hours and minutes
- Highcharts with date and time for x axis (from a database with format YYYYMMDDHHMM)
- Hide axis and gridlines Highcharts
- how to import highcharts with webpack and babel
- Highcharts data series issue with ajax/json and PHP
- Highcharts / jQuery - destroy and rebuild chart with original options
- Add a gap between the second and third series in a Highcharts column plot with four series displayed
- Flexdashboards and Leaflet and marker click with Highcharts
- Populate Highcharts X-Axis With Dates Given a From And To Date
- Using Highcharts and displaying a message over or on the chart when there is no data
More Query from same tag
- how do you make scrollbar work in highcharts
- Highcharts legend how to show multiple charts data category?
- Highcharts - Line breaks from node to node in sankey diagram
- Spline chart tooltip only snaps on x-axis
- how to get index of a point in Highcharts to use in an event?
- Convert hours and minute to millisecond using javascript or jQuery
- How to make legend color show up in Highcharts for a line graph under certain conditions?
- Highchart group by month from corresponding column data
- Highstock charts | How do I store a series start and end value in variables?
- Highchart drill up function now working in reactjs
- threshold between 3 color in line charts of highcharts
- Highcharts multiple rowsUrl in same charts
- Replicating a highcharts type
- Highcharts lines not being drawn until browser is resized
- Last label on xaxis disappears when resize
- How to get data in Highstock from PHP MySQL data on AJAX call
- Changing baseSeries dynamically for live chart
- Plot a Ganglia graph using AngularJS
- How to prevent my stacked series from being in reverse order?
- How to get rid of highcharts 13 error in angular?
- Highcharts display alternate x axis
- Visual difference between different charts
- 'ManyToOneRel' object has no attribute 'parent_model' error with django chartit
- Navigator in Highcharts
- Highcharts - chartanimation step by step
- Removing "Series 1" in legend and ordering legend
- Multiple series in drilldown
- HighCharts Axis Label Encoding
- Highchart pass values from draggable feature
- primefaces chart x axis