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
- Highchart - give to series-marker other zIndex then to the series-lines
- linecap property in highchart doesn't work
- use highchart as a template with different title and different values multiple times
- How to create Chart Data using SQL query
- Highcharts Pie chart export, labels are rendered twice
- Grouping x axis labels for histogram in high charts
- Using HighCharts styledMode in Angular 8 application
- Highchart: Tickmark placement for datetime axis
- how can I get the index of point hovering in Highcharts?
- Plotbands in the Highcharts .net wrapper do not show
- Highcharts - How to separate the functionality of the navigator from the graph
- Highcharts: Set y Axis Max and Min dynamically, and not at creation
- Highcharts/highstock set yAxis Min and Max with Scroll
- Highcharts series name with '<' not rendered in tooltip
- How to dynamically invoke a highcharts menu item function?
- Is it possible to combine two column charts in a single Highcharts chart?
- Issue with increasing the size of the highlighted area
- HighCharts starts zooming when scrolling in a 3D chart
- Highcharts C# To JSON - Structuring Series Data
- Highstock on load graph displays just one point
- What's the code in Highcharts such that the bars (columns) in the same group use the same color?
- Getting error when try to use external parameter to generate chart
- Highcharts x axis label text wrapping lost on setting label step
- how to import JSON data into highstocks candlestick type graph?
- Different Array(s) in Chrome Dev Tools
- Highcharts showing extra lables multiple times in x-Axis
- highcharts group series click event to get all data in catagory
- Highcharts: Not rendering on getJSON
- How to display last 7 days data
- how do you create a link on highcharts to open up pop up window with another chart