I am looking for a way to skip weekends while using date-time xAxis with Highcharts Gantt.
I have read a few posts about the
xAxis.ordinal
option for HighStock but I am using HighCharts
Also, I would need to stick to date-time because I plan on creating an interactive Gantt / planning and update a database with these interactions and I don't want to be able to Drag and Drop (or expanding) a task into a weekend. I believe I could prevent that with the drop event (I think there is one) but then, 2/7th of my graph would be "empty".
If anyone knows of a hack for this situation, I'm all for it !
PS:
As I type this, I realise that xAxis seems to always be datetime with Gantt, so the "hack" of defining every xValue myself was probably for a regular chart... Am I doomed to have weekends ?
Edit:
Here's a fiddle of where we're at right now. As you can see, we are able to hide all weekends using
xAxis: [{
breaks: [{
from: Date.UTC(2018, 11, 8),
to: Date.UTC(2018, 11, 10),
breakSize: 0,
repeat: 7 * 24 * 36e5 //every week/7 days
}]
}]
But, unfortunately, breaks don't seem to be compatible with the "draggable-points" module and causes dragged points/tasks to "resize" themselves when moved over a break (weekends in our case), flicker and, at some point, even disappear from the Gantt :/ (Also, some labels act weirdly when dragging)
I suppose I could "hide" the weekend labels using a custom formater and checking the X value but this would probably leave a blank, but existing, column in the graph and this is why I need to truly remove these dates.
I'll probably have to leave the weekends turned on and do checks/maths so that adding 2 days to a 5 workdays task doesn't "draw" the task over the weekend but actually adds 4 days to compensate (modulo for the win) but that's not ideal...
Should I report this (kinda) weird behavior between draggable-points and xAxis breaks as a bug ? Technically, the points don't change value (I mean, in this demo, using the buttons and console, you see that the xmax-xmin for each point stays the same) but, when drag-dropped onto a weekend, they disappear. That's what I'm trying to avoid.
tl;dr:
The breaks act as black-holes when a point is dragged near them (you can't drag a to less than... half a week of distance between your mouse and the break).
Edit: bug report
You can use breaks to hide weekends on the chart. Below you can find an example how to use breaks, but you can also create a function which would insert a break in every weekend:
xAxis: [{
breaks: [{
from: Date.UTC(2018, 11, 8),
to: Date.UTC(2018, 11, 10),
breakSize: 0
}]
}, {
visible: false
}]
Live demo: https://jsfiddle.net/BlackLabel/se1vL6mx/
API: https://api.highcharts.com/gantt/xAxis.breaks
Related
I have a live graph that updates every x time. Included below is an image using a dummy variable. What I would like is for Highcharts to only label the first, middle, and last. Or anything to where I don't spam my graph label with ticks.
Presently my xAxis looks like so:
xAxis: {
crosshair: true,
type: "categories",
categories: xaxis
},
Nothing out of the ordinary. I have tried adding a tickInterval, however, that does not really solve the issue over the long run. Essentially what I need is the opposite of a tickInterval, where ticks are removed after a certain interval. Not unlike the datetime API that highcharts currently has. The difference here is that this data cannot be generated by myself, but by an API that I am using, which spits out the as-shown x-axis label.
After a while, in case there is too much xAxis labels displayed on a chart, the number of them is automatically reduced (the first example). Although, if you want, you can use couple of solutions. The best way, would be to use tickPositioner to display only the first, the middle and the last labels and format them using Highcharts.dateFormat inside xAxis.labels.formatter (the second example). You could also set bigger step of xAxis.labels (the third example).
API Reference:
http://api.highcharts.com/highcharts/xAxis.tickPositioner
http://api.highcharts.com/highcharts/Highcharts.dateFormat
http://api.highcharts.com/highcharts/xAxis.labels.step
Example:
http://jsfiddle.net/vxjdwer7/ - default behaviour
http://jsfiddle.net/30t45zvq/ - using tickPositioner
http://jsfiddle.net/6g9uvokL/ - using step
I am putting together a barchart that shows 24 bars and how much production is done in each hour of the day.
Pretty simple.
I am using Highcharts.js version 4.0.1
However, I want to make this extra cool and make the current hour's bar have a different color (so you can see which bar you should look at for what hour).
So lets say:
you have 24 bars from left to right
It is 3PM in the afternoon
Therefore you want the "15th" bar in the series to be highlighted a certain color
Can anybody direct on this as I could not find this easily in the documentation.
Thank you.
You can just add a 'color' property to the series data. For example, the following has multiple points defining different colors, and a few that use the default bar color:
series: [{
data: [{y:10, color:'red'}, {y:20, color:'blue'}, {y:30, color:'#A84646'},
{y:40, color:'rgba(253, 134, 9, 0.7)'}, 50, 60]
}]
I am facing a strange problem with highcharts(highstock) datagrouping. I want to show grouped data in week or month and at the same time zoom the chart to a specific period (I am using chart.yAxis[0].min = ). When the width of the overall chart is high and when I set the the zoom level to a short period (say a few months), data is not grouped to the period I specify.
Refer to the fiddle link below. I have specified datagrouping as 'month' ({units:[['month',[1]]], enabled:true}) and yAxis[0].min as 29 Jul 2010. You will observe that data is not grouped in months.
Now try to reduce the width jsfiddle result panel by dragging the divider. When the size of the result area (or the chart) is reduced, datagrouping starts working.
http://jsfiddle.net/amit657/of1mv8yv/2/
Any idea how can I force datagrouping and at the same zoom the chart to show data for a specific period?
To force data grouping set forced in dataGrouping to true.
Example: http://jsfiddle.net/of1mv8yv/4/
...
dataGrouping: {
units: [
['month', [1]]
],
enabled: true,
forced: true
}
...
I have a highcharts column chart with an x-axis for an entire year. Its type is datetime and its min/max is from 2014-01-01 to 2014-12-31.
Why is the tick/label for Jan 2015 displayed?
Full source at http://jsfiddle.net/nkjm2691/1/
I tried a number of things like setting the end date to Date.UTC(2014, 11, 31, 23, 59, 59) and experimenting with tickInterval. What I need eventually is a monthly tick (i.e. irregular interval) and the labels centered between the ticks. Using some voodoo logic to calculate the offset only ever works if the chart has a fixed width.
Quite surprisingly doing more or less the same with a chart of type areaspline works fine: http://jsfiddle.net/fm86v8fe/
I also checked a number of related SO questions like Is there a reliable way to have a 1 month auto generated tick interval with high charts? and HighCharts xAxis - tickInterval for month but they don't solve my problem.
You posted this JSFiddle. Just changing from type: 'column' to type: 'line' removes he label. Why?
That is because any chart type that is "column like" has a pointRange. This is defined differently depending on context, but for your datetime x-axis it is (API):
On linear and datetime axes, the range will be computed as the distance between the two closest data points.
It is this pointRange that causes your column to have their specific width. They have a span across the x-axis. As you can see on your chart each column has a range of a week, not just a single millisecond (which is the case for line-charts, and similar).
From my understanding this causes Highcharts to take some extra space to somehow better suit the point range of the chart points.
There are several things you can do. You can manually override the pointRange like this:
series: { pointRange: 1, data: ... }
This will make each column only 1 millisecond thick, and removes the label. You can fix the width with pointWidth:
series: { pointRange: 1, pointWidth: 10, data: ... }
Note however that this is static, so if columns suddenly get too close they'll start overlapping. Here's a JSFiddle demonstration.
Also you could do nothing and just set the max to be far enough back in time for pointRange not to include too much extra space, like this:
xAxis: { min : Date.UTC(2014, 0, 1), max : Date.UTC(2014, 11, 28) }
Note here that Highcharts seems to add more space once you go over to the 29th of December. Unfortunately I'm not exactly sure how this spacing is chosen (the 29th is a Monday..?).
Sebastian suggested some solutions that don't involve this type of manipulation at all. The chosen "solution" depends on the other requirements and desired behavior of the chart.
Set a max date as 1.12, remove time and set maxPadding as 0 value. In case when you use a tiem (23:59:59) tick Interval cannot be calculated properly. Second solution is using tickPositioner
https://jsfiddle.net/nkjm2691/50/
I can't figure out why I have a gap between series. Here's example http://jsfiddle.net/rsboarder/dbGH7/. The gap is between 10th and 11th April.
I tried
connectNulls: true
But that didn't work for me. Is it possible to fix?
It's caused by using two separate series, which can't be connected. Right now multiple colors for one series aren't supported, but will be released in the near future as plugin for Highcharts (~Q3).
Right now what you can do is to add one more point for left or right series, so all series will have one shared point with the same timestamp.