I've got a chart with data represented by timestamp/value combination, so I use 'datetime' for xAxis. On line chart it looks all great, but on column it shows empty space for days with no values.
Is there a way to use last value as filler or skip this empty space (e.g. after June 1s show tick for June 3rd)?
You can use breaks:
xAxis: {
breaks: [{
from: 3,
to: 9,
breakSize: 1
}]
}
Live example: http://jsfiddle.net/BlackLabel/xr9j7ybc/
API Reference: https://api.highcharts.com/highcharts/xAxis.breaks
Or oridinal property from Highstock:
xAxis: {
type: 'datetime',
ordinal: true
}
Live example: http://jsfiddle.net/BlackLabel/x0Ljh19v/
API Reference: https://api.highcharts.com/highstock/xAxis.ordinal
I'm feeding my Highcharts.js series object with data containing date and a number, for example: ["2017-1-22",262] which shows up correctly when hovering a point, but which is not displayed correctly in the xAxis. Below codes does not do much, probably because the date format is not what Highcharts expects? But what format is expected? Unixtime does not seem to work.
xAxis: {
type: 'datetime'
}
https://jsfiddle.net/80v2k0tv/
Highcharts expects time in the form of milliseconds since 1970.
See for example: https://api.highcharts.com/highcharts/series.line.data.x
The x value of the point. For datetime axes, the X value is the timestamp in milliseconds since 1970.
Unixtime is in seconds, so using unixtime * 1000 will give the correct highcharts time.
I'm new to High Charts and working on an example with the Data on the Y-axis as Date component with the Start and End Dates and the X Axis will be of type with the 'Bar' chart
Here is the link of my example jsfiddle
The series data would be something like this
'series: [{
name: '',
low: Date.UTC(2016, 07, 01),
high: Date.UTC(2017, 04, 04)
}'
Any helps on this would be highly appreciated
Updated on 03/04/2017 for the Image attachment
Here the bars going beyond the End Date time
I have a chart which displays goals between 1995 and 2030. I need the series to "stop" at the current year.
The x-axis:
xAxis: {
categories: ['1995', '1996', '1997', '1998', '1999', '2000', '2001', '2002', '2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2015', '2016', '2017','2018', '2019', '2020', '2021', '2022', '2023', '2024', '2025', '2026', '2027' , '2028', '2029', '2030'],
tickmarkPlacement: 'on',
title: {
enabled: false
}
},
The series:
series: [{
name: 'Consumption',
data: [5020, 4350, 3090, 2500, 2100, 800]
}],
If I do like this, the categories is automatically matched to the number of series data.
Is there any option where I can keep all the categories?
http://jsfiddle.net/zh4yukL8/1/
There are multiple ways to do this, but answer (2) may be the most useful in your case.
1) Using nulls for unknown data
If you have missing data for certain years (and you want to stop the graph intermittently), you can write unknown data as a 'null' in the series data (as #wergeld mentions in his comment above).
This is useful if you are programmatically filling in data for your graph and your program is working through each category in turn. If you only have data up until the year 2000, your program should work up to your end year (or any other end category), placing nulls in the series where there is no data available.
2) Using pointStart & max with a datetime chart
Seeing as you're dealing with years, you can make this chart more effective at displaying your series. You can select the start year (pointStart) and end year (max); with your data starting from the start year, and the series continuing until the end year.
Your xAxis will change to:
xAxis: {
type: 'datetime',
max: Date.UTC(2030, 0, 1)
}
And you'll need some plotOptions*:
plotOptions: {
series: {
pointStart: Date.UTC(1995, 0, 1),
pointIntervalUnit: 'year'
}
}
Example here: http://jsfiddle.net/zh4yukL8/5/ .
If you have missing data for some years, you can fill these with nulls in the series data as method (1) explains, but the graph will continue until the max year anyway.
*While playing around with this example, I discovered that the AngularJS Highcharts library (highcharts-ng) you're using expects plotOptions to be dealt with differently to native Highcharts JS. So the example above works with your library, but for everyone else you will need to have plotOptions outside of the 'options' object.
3) Using a function to work out the length of your series
If your chart doesn't just deal with years and/or you want a discrete series represented, you can use the max property on the xAxis and a clever function to work out how many categories you have. The best way I can see to include this function in Highcharts seems to be on the load event of the chart.
You'll need to adapt your chart* options to include the event:
chart: {
events: {
load: function () {
var totalValues = this.xAxis[0].categories.length;
this.xAxis[0].setExtremes(0 , totalValues - 1 );
}
}
}
Example here: http://jsfiddle.net/zh4yukL8/6/
*As with method (2), the 'chart' options when using the highcharts-ng library for AngularJS are inside the 'options' object.
I am rendering a category chart with time on the y-axis. This chart will show the completed time for each ticket.
`` http://jsfiddle.net/6oz3075d/14/
However, I am unable to show the date and time in DD:MM:YY format. Also the interval is in years. I tried using dateTimeFormat,tickInterval etc. Nothing seems to help.
You can use formatter and Highcharts.dateFormat
labels:{
formatter:function(){
return Highcharts.dateFormat('%d:%m:%Y', this.value);
}
},
http://jsfiddle.net/6oz3075d/15/