I'd like to create a custom xAxis in Highstock.
The picture below show 3 examples of what I'd like to do.
Is that possible?
Thx!
You will need three xAxis to achieve that, or you will resign from ticks above axis line. This is full example how to create this: http://jsfiddle.net/3bQne/478/
xAxis options:
xAxis: [{
// force first axis to display one unit
dateTimeLabelFormats: {
hour: '%H:%M',
day: '%H:%M',
}
}, {
dateTimeLabelFormats: {
hour: '%e. %b',
day: '%e. %b',
},
// use default positioner, but with offset for labels
tickPositioner: function(min, max) {
var ticks = this.getLinearTickPositions(this.tickInterval, min, max),
tLen = ticks.length;
for(var i = 0; i < tLen; i++){
// translate axis labels by half day to position label between ticks
ticks[i] += 12 * 3600 * 1000;
}
ticks.info = {
higherRanks: [],
unitName: 'day',
totalRange: max - min
};
return ticks;
},
tickWidth: 0,
tickInterval: 24 * 3600 * 1000,
linkedTo: 0,
offset: 0,
labels: {
y: -4
}
}, {
// for ticks only
tickPosition: 'inside',
tickLength: 10,
tickInterval: 24 * 3600 * 1000,
linkedTo: 0,
offset: 0,
labels: {
enabled: false
}
}],
Related
i want to show each day date , but im getting alternative dates ,like
1 feb and 3 feb and 5 feb i need full date like below without missing any dates n y axis.tried tickinterval 1 but its showing x and y values both.
1-feb-2020
2-feb-2020
xAxis: {
tick,
type:'datetime',
dataLabels: {
align: 'right',
rotation: 45,
shape: null
}
},
You need to set tickInterval to one day and use the formatter function:
xAxis: {
...,
tickInterval: 1000 * 60 * 60 * 24,
labels: {
formatter: function(){
return Highcharts.dateFormat('%e-%b-%Y', this.value);
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4815/
API Reference:
https://api.highcharts.com/highcharts/xAxis.tickInterval
https://api.highcharts.com/highcharts/xAxis.labels.formatter
Setting the xAxis to the under config is a solution which you are looking for:
xAxis: {
type: 'datetime',
tickInterval: 24 * 3600 * 1000,
dateTimeLabelFormats: {
day: '%e-%b-%Y'
}
},
Demo: https://jsfiddle.net/BlackLabel/qmro0was/
API: https://api.highcharts.com/highcharts/xAxis.dateTimeLabelFormats
API: https://api.highcharts.com/highcharts/xAxis.tickInterval
I have this chart
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 300px"></div>
var seriesOptions = [],
seriesCounter = 0,
names = ['MSFT', 'AAPL', 'GOOG'];
/**
* Create the chart when all data is loaded
* #returns {undefined}
*/
function createChart() {
Highcharts.stockChart('container', {
plotOptions: {
series: {
gapSize: 5 * 24 * 3600 * 1000,
gapUnit: 'relative'
}
},
rangeSelector: {
selected: 5
},
yAxis: {
labels: {
formatter: function () {
return (this.value > 0 ? ' + ' : '') + this.value + '%';
}
},
plotLines: [{
value: 0,
width: 2,
color: 'silver'
}]
},
plotOptions: {
series: {
compare: 'percent',
showInNavigator: true
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
valueDecimals: 2,
split: true
},
series: seriesOptions
});
}
$.each(names, function (i, name) {
$.getJSON('https://www.highcharts.com/samples/data/' + name.toLowerCase() + '-c.json', function (data) {
if (i==0) {
var first = [], last = [];
first.push.apply(first, data.slice(0,1)[0]);
last.push.apply(first, data.slice(0,1)[0]);
first[0] = first[0] - 1900 * 24 * 3600 * 1000;
last[0] = last[0] - 130 * 24 * 3600 * 1000;
data = [];
data.push(first);
data.push(last);
}
seriesOptions[i] = {
name: name,
data: data
};
// As we're loading the data asynchronously, we don't know what order it will arrive. So
// we keep a counter and create the chart when all the data is loaded.
seriesCounter += 1;
if (seriesCounter === names.length) {
createChart();
}
});
});
and as you can see there are three stocks shown. If you hover the chart with the mouse and go to the beginning you'll notice MSFT stock which has only 2 points and that's intentional. After MSFT there should be about 6 year gap, however on the chart it's shown in a few pixels.
How can I configure stockChart to show real gaps? In other words, I want to see the gap of 6 years so from 2005 till 2011 there will be empty space proportional to the whole chart?
The discussion in the comment section of the first answer reveals that OP wants to hide no-data periods only in some cases.
The solution here might be to set ordinal to false (as #ewolden) suggested and use breaks instead:
xAxis: {
breaks: [{
breakSize: 24 * 3600 * 1000,
from: Date.UTC(2017, 0, 6),
to: Date.UTC(2017, 0, 9)
}],
ordinal: false
},
series: [{
data: [
[Date.UTC(2017, 0, 2), 6],
[Date.UTC(2017, 0, 3), 7],
[Date.UTC(2017, 0, 4), 3],
[Date.UTC(2017, 0, 5), 4],
[Date.UTC(2017, 0, 6), 1],
[Date.UTC(2017, 0, 9), 8],
[Date.UTC(2017, 0, 10), 9],
[Date.UTC(2017, 6, 1), 4],
[Date.UTC(2017, 6, 2), 5]
]
Example: http://jsfiddle.net/BlackLabel/ocg0dujg/
In the above demo I was able to hide the weekend (7 and 8 Jan) and maintain the space between January and July.
API reference: https://api.highcharts.com/highstock/xAxis.breaks
What you are after is ordinal.
In an ordinal axis, the points are equally spaced in the chart regardless of the actual time or x distance between them. This means that missing data for nights or weekends will not take up space in the chart.
Setting ordinal to false, like this, will give you the gap you are after:
xAxis: {
type: 'datetime',
ordinal: false,
},
There are some other issues with your code, if you look in console, you are getting error 15 which states that highcharts requires data to be sorted. You get this because of how you add the series data to your MSFT series. You add both the x and the y to a single 1D array, which means highcharts tries to plot both your x and y values on the x axis.
I did a workaround that gives it the right format in this fiddle: http://jsfiddle.net/2cps91ka/91/
I want to compare two interval of a data series (eg. this year and last year), so I need dual x axis, and two series.
xAxises: [
{
min: Date.parse('2014-01-01 00:00'),
max: Date.parse('2014-12-31 23:59'),
type: 'datetime',
dateTimeLabelFormats: {
day: '%Y.%m.%d.',
minute: '%H:%M',
}
},
{
min: Date.parse('2015-01-10 00:00'),
max: Date.parse('2015-12-31 23:59'),
type: 'datetime',
dateTimeLabelFormats: {
day: '%Y.%m.%d.',
minute: '%H:%M',
},
}
]
I see the series, I can zoom in, but zoom out and reset zoom not working by the second series/x axis. How can I plot this two series using Highchart?
Thanks!
(A demo is here: https://jsfiddle.net/e1o3jov3/)
I want to set the xAxis pointInterval in highstock.
I'm formatting the xAxis:
xAxis: {
type: 'datetime',
labels: {
formatter: function () {
var someDate = new Date(this.value);
return Myfunction(new Date(someDate));
}
}
},
I have searched and found some ways but they were not worked for me! In order to set the pointInterval for a day( 24 * 3600 * 1000 // one day ) I set it when I was adding a series:
chart.addSeries({
name: my name,
data: my data,
id: my id,
type: 'spline',
pointStart:start date,
pointInterval: 24 * 3600 * 1000 // one day
});
but It didn't work. so I tried to do sth else:
plotOptions: {
spline: {
pointStart: start date,
pointInterval: 24 * 3600 * 1000 // one day
}
},
It also did not work.
I've tested:
chart.xAxis[0].setCategories([data])
but this code makes the CPU working a lot and the browser crashes!
Actually I've seen these examples. but when I try them they aren't useful!
http://jsfiddle.net/larsenmtl/SJSwt/1/
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/xaxis/labels-overflow/
Please help me!
Thank you
UPDATE: my data is formatted like this:
series: [{
data: [
[Date.UTC(2010, 0, 1), 29.9],
[Date.UTC(2010, 0, 2), 71.5],
[Date.UTC(2010, 0, 3), 106.4],
e.g. jsfiddle.net/bahar_Agi/J6H7f
Pointstart only really applies if you haven't specified x values for your data or are using categories. As you have specified x and y values for each point, you should use the tickInterval option on the x-axis like this:
xAxis: {
type: 'datetime',
labels: {
style: {
fontFamily: 'Tahoma'
},
rotation: -45
},
tickInterval: 24 * 3600 * 1000
},
The highcharts api guide mentions this for datetime axis: http://api.highcharts.com/highcharts#xAxis.tickInterval
In this example, I set the tickInterval to 1 day, which may be a bit too small for your data, but you can change that to whatever interval you want.
I think you want to use tickInterval option for xAxis, see:
xAxis: {
tickInterval: 24 * 3600 * 1000,
type: 'datetime',
labels: {
style: {
fontFamily: 'Tahoma'
},
rotation: -45
}
},
jsFiddle: http://jsfiddle.net/J6H7f/1/
In my chart, I try to display end of month performances over one year (at 31 Jan, 29 Fev, ..., 31 Dec). X-axis is defined as follow:
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
month: '%b %Y'
}
}
}
The issue is that the scale automatically adjust to the appropriate unit (Months) and display the first day of the Month. As a result, my first element (at 31 Jan) is displayed above "Feb 2012" (same issue for other elements).
I was wondering if I could rather display the end of month day on my x-axis. Any idea?
Thanks,
Example
You can define a custom xAxis.tickPositioner with the positions at which the tick should appear as follows
xAxis: {
type: 'datetime',
tickPositioner: function() {
var ticks = [
Date.UTC(2012, 0, 31),
Date.UTC(2012, 2, 31),
Date.UTC(2012, 4, 31),
Date.UTC(2012, 6, 31),
Date.UTC(2012, 8, 30),
Date.UTC(2012, 10, 30)];
//dates.info defines what to show in labels
//apparently dateTimeLabelFormats is always ignored when specifying tickPosistioner
ticks.info = {
unitName: "month", //unitName: "day",
higherRanks: {} // Omitting this would break things
};
return ticks;
}
}
Customize tick positions | Highchart & Highstock # jsFiddle