I want to set Xaxis value to start from midnight i.e 00:00 on selecting any range selector button in highcharts i.e 1D/1W/3M/6M/ALL. The leftmost point of xaxis should start from last one month/week/.. date plus 00:00 time for any button but by default it shows last one month/week/.. date plus time which starts from current time i.e 18:30 (for example).
series: [
{
'name': '', 'data': [[]], 'type': 'line',
pointStart: Date.UTC(this.curDate.getUTCFullYear(), this.curDate.getUTCMonth(), this.curDate.getUTCDate()),
}
],
Related
I am currently working on a specific type of chart and I am trying to achieve the following behavior for example :
As you can see there's a gap between the series last point and the xAxis max value and the reason for this is i wanna have a fix max value and load the daily values of a specific currency as the day passes by. So for example in the morning this chart would be empty and by 18:30 it would be filled.
In my mock example i have the current chart:
and when I try to set a new xAxis max value ( i also tried softMax) to a future day (using epoch converter for unixtimestamp) i am getting this:
and i set the max by doing :
return {
endOnTick: false,
max:1631962355,
tickLength: 2,
gridLineColor: '#b9b9b9',
gridLineWidth: 0,
tickColor: '#808080',
labels: {
style: {
color: '#b9b9b9',
},
x: 0,
y: 12,
format: '{value:%d.%b}',
},
visible: true,
};
}
UPDATE
After implementing your response I get an even weirder behavior. I get the same initial start I had before (no difference) but now if i click and drag it to the right I go from this :
to this:
and If i click and drag it to the left, into this:
The transformation happens without animation, neither by wathching the drag and move motion happen. It just instantly transforms after i drag my cursor pointer for a while towards the sides i mentioned above
You need to use milliseconds instead of seconds:
xAxis: {
max: 1631962355000,
...
}
Live demo: https://jsfiddle.net/BlackLabel/herncjL5/
API Reference: https://api.highcharts.com/highstock/xAxis.max
I have here https://jsfiddle.net/ezhp5a4j/6/ an area and a stacked bar chart But I need to achieve something like : adding another series:column behind this actual but not stacked, starting from jan. 2010 and end dec. 2010 with a certain position in y axis, my need is quiet simple, but I don't know how achieve, I think I need another X axis ?
Actually I have:
xAxis: {
type: 'datetime',
ordinal: false
},
Maybe I need add array to this or so?
You could do this with a second axis, but it's not necessary.
If you add your new data series, with some additional parameters to control the size and spacing, it can all use the same x axis.
Example:
{
"name": 'Summary',
type: 'column',
grouping: false, <-- make sure they don't group with the other series
stacking: false, <-- make sure they don't stack on the other series
color: 'rgba(0,0,0,0.5)',
pointRange: 86400000 * 365, , <-- 1 year; set to desired time frame
pointInterval: 86400000 * 365, <-- 1 year; set to desired time frame
pointPadding: 0.01,
groupPadding: 0,
data: [10000, 15000, 9000, 13000]
}
Updated fiddle:
https://jsfiddle.net/jlbriggs/ezhp5a4j/15/
Output:
EDIT for comment:
To add a second axis, you change the xAxis object to an array of objects, like this:
xAxis: [{
type: 'datetime',
ordinal: false
},{
linkedTo: 0,
type: 'datetime',
ordinal: false
}]
If they are going to have different scales, I am not sure that it makes any sense to plot them together, but in that case, you would remove the linkedTo: 0
Then, in your data, you need to specify which data series are plotted on the second axis, by adding xAxis: 1 to the series options (you don't need to specify xAxis: 0 for the other series, as 0 is the default.
Since you have specified a pointStart in your plotOptions, if the series plotted on the second axis will have a different scale, you will need to specify a separate pointStart in that series options.
Update example fiddle:
https://jsfiddle.net/jlbriggs/ezhp5a4j/16/
We are working on creating a stock chart showing several items even counts and their relative per cent change over time. The data is monthly and we have a range selector set up to allow for 6 months, 9 months, 1 year, and all data. On initial load we are selecting the 6 month range. We are noticing some strange effects. Here is a sample jsFiddle representing the issues:
http://jsfiddle.net/wergeld/wq7eavq4/
The rangeSelector code:
rangeSelector: {
inputEnabled: false,
allButtonsEnabled: false,
buttons: [{
type: 'month',
count: 6,
text: '6 Months'
}, {
type: 'month',
count: 9,
text: '9 Months'
}, {
type: 'year',
count: 1,
text: 'Year'
}, {
type: 'all',
text: 'All'
}],
buttonTheme: {
width: 60
},
selected: 0
},
1) On initial load the 0% "start" occurs in the October 2014 data points and the relative per cent change is calculated from this point. However, the first point shown in the chart is actually September 2014. This has some per cent change from (I am guessing) October 2014.
2) When we change the selection to the 9 month range selector we see that the first point for June 2014 is the 0% value. Then if we click back to the 6 month range selector value you can see that now we have September 2014 as the 0% and the per cent differences for the later times are all different than on initial load.
My questions are:
a. Why are there 7 months shown when I set the count for that rangeSelector to 6 and why are there 10 months shown when I have it set to 9 months for the other range selector? Essentially for a given rangeSelector.count I am getting 1 more than I expect.
b. Why is the 0% point different on initial load than it is when I click out of that range and back into that range?
This is related to two bugs:
#966
#4147
And it's caused by setting extremes in core before chart is fully rendered. Possible workaround is to abandon selected option and create your own option to handle this: http://jsfiddle.net/wq7eavq4/6/
chart: {
events: {
load: function () {
var selected = this.options.rangeSelector.selectedAfter,
undefined;
if (selected !== undefined) this.rangeSelector.clickButton(selected, true); //set when defined
}
}
},
rangeSelector: {
selectedAfter: 1 // custom param
},
The only downside is missing initial animation.
I have a line chart with xAxis as follows:
'xAxis' : {
'type' : 'datetime',
'labels' : {
'rotation' : -90,
'align' : 'right',
'y' : 1
},
'dateTimeLabelFormats' : {
'day' : '%e-%b',
'week' : '%e-%b',
'month' : '%b-%y'
}
}
But it shows not only day/month but also hours. Is there a way to hide hours here?
I think you should consider minTickInterval to set it to one day - otherwise Highcharts will calculate interval, and set it for example to a half day (like you have in your case). If there wouldn't be 12:00 labels, then you will receive doubled labels. Of course other answer will resolve issue with displaying 12:00, but wouldn't prevent displaying extra labels.
Reference: http://api.highcharts.com/highcharts#xAxis.minTickInterval
What format do you want it in? You can put it in the format of 'day' of 'month' by doing something like this.
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%e of %b'
}
},
You can use label formatter and highcharts.dateFormat
I am using highstock control and I want to set a custom highlighted date range for a control via js. Example of task: load data for a week to control and highlight only data for last day since 16:00
I tried using this code when initializing chart control:
rangeSelector: {
buttons: [{
type: 'day',
count: 1,
text: '1d'
}],
selected: 0
}
But this code highlights whole timespan for last 24 hours, while I need to highlight last day from 16:00. How can I set this custom date?
Instead of using rangeSelector, use min and max for xAxis, for example:
xAxis: {
min: Date.UTC(2013, 6, 17, 16, 00), //previous day at 16.00
max: new Date().getTime() //get actual time
}