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
Related
Fiddle: http://jsfiddle.net/8gr4z6et/
I am trying to set the dates, of my data array, in the xAxis, as shown in multiple questions. However, this makes the series data invisible. If I remove the new Date it gives me an invalid date.
Any clue on this?
Thanks!
In Highcharts v2.2.4 it is required to use dates as timestamps in milliseconds. In newer versions it is allowed to use the format you have set: http://jsfiddle.net/BlackLabel/xdrk9j78/
series: [{
name: '',
data: [
[
new Date("2019-07-15T00:00:00.000Z").getTime(),
0
],
[
new Date("2019-07-16T00:00:00.000Z").getTime(),
1
]
]
}]
Live demo: http://jsfiddle.net/BlackLabel/93obkhsd/
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 have a few years of sample data that I'd like to break at year end (12/31) of every year. Trying to implement this code from example from API
breaks: [{ // break on last day of year
from: Date.UTC(2008, 12, 31, 58),
to: Date.UTC(2008, 12, 31, 59),
repeat: 24 * 36e5 // not sure how to use this
}],
is there a way to ignore the year in Date.UTC()? Also I'd like to repeat this every year. Tied numerous combos to no avail. Heres my jsfiddle
Adding null value point will create a gap in a series plot if connectNulls is set to false (by default it is false).
Example: http://jsfiddle.net/c9e9ao2L/1/
I'm trying to get Highcharts to display the daily usage statistics for e.g. a company's ressource. The opening days of the company are from monday to friday.
My dataseries look like this:
[Date.UTC(2012, 8, 6),17.5], (Thu)
[Date.UTC(2012, 8, 7),42.5], (Fri)
-- weekend
[Date.UTC(2012, 8, 10),20], (Mon)
[Date.UTC(2012, 8, 11),20], (Tue)
[Date.UTC(2012, 8, 12),40], (Wed)
[Date.UTC(2012, 8, 13),30], (Thu)
...
In the time series chart there are inserted two labels for the missing two weekend-dates (2012, 8, 8 and 2012, 8, 9), but I don't want those labels to be displayed because there are no values for these labels and so the adjacent dates will be connected via a line but this is wrong.
Is it possible to turn off this 'date interpolation' and show only the values I've inserted?
Thanks with regards, Phil
It may be possible using a scatter series and customizing the tickPositioner callback for the x-axis and filtering of x series data (dates) thats not a weekday.
I've created a fiddle at http://jsfiddle.net/hkskoglund/6jNGg/
To allow for missing weekends days null should be pushed for the y-value in the series data (as mentioned in comment above)
Another option without using a datetime axis is to use a category axis where you push the dates in the series you have data for. This will allow to have a continous plot. Take a look at the new fiddle: Areaspline with categories as dates
xAxis: {
labels: {
formatter: function() {
// http://api.highcharts.com/highcharts#Highcharts.dateFormat()
return Highcharts.dateFormat('%d %b', this.value);
}
},
categories : [
Date.UTC(2012, 8, 6),Date.UTC(2012, 8, 7),
Date.UTC(2012, 8, 10),Date.UTC(2012, 8, 11),
Date.UTC(2012, 8, 11)]
},
series: [{
name : 'resources',
data: [17.5,42.5,20,25,20]
}]
As far as I can understand using datetime on the x-axis using your requested plot-configuration is not possible without changing the source/rendering of Highcharts series. It seems like discontinuties with null values is separated into socalled segments.
Have you tried to set oridinal as false?
http://api.highcharts.com/highstock#xAxis.ordinal
I know this is an old question, but did you try formatting your dates as Strings before inserting them? If so, you can then use a category axis. This should work as long as you don't have any entry for date vs having a null.
I use Highcharts embedded in JasperReports, but this allows us to get your desired behavior.