We have a chart with two datetime series to display stock development over past years.
First series is a line chart with a data item for each month.
Second series is a column chart with a data item for every year.
I've put together an example: http://jsfiddle.net/kaiw/8E9nJ.
...
xAxis: [{
type: "datetime"
}]
...
We would now like to place the lables on the x-Axis between the ticks, like you can do for a category axis.
We have to work with datetime values and can't use categories because of the different number of data items per series.
Is there any other way how we can place the label between ticks?
According to documentantion tickmark is avaiable only for categorized axis. You can use x parameter for labels and set hardcoded value like in the example: http://jsfiddle.net/8E9nJ/3/
xAxis: [{
id: "xAxis",
type: "datetime",
title: null,
labels:{
x:40
}
}],
Related
I have a chart that looks like the below. The line is a rolling average of the third column from each category. I would like to position the marker for the line in the middle of the green/yellow column rather than the middle of the black, for each category. Is this possible?
Use pointPlacement property:
series: [..., {
pointPlacement: 0.2,
...
}]
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4810/
API Reference: https://api.highcharts.com/highcharts/series.line.pointPlacement
I have some list of dates as categories for xAxis.
Example of collection : 2018-01-01, 2018-01-03, 2018-01-10, 2018-01-17, 2018-01-29;
I want to display on chart dates in format MMM yy (Jan 18)
So I've tried to group all this dates by this date format. As result I received only 1 item in collection which is logically. But on chart I saw labels like this
Jan 18, 1, 2, 3, 4
How to "group" values on chart to display only month labels?
Example what I have now https://jsfiddle.net/phwgo4jz/7/
You could use the dateTimeLabelFormats option of xAxis to format the label. Or simply set the type of xAxis to datetime. Highcharts scales the axis and inserts appropriate labels as required.
Here is the highcharts documentation : https://api.highcharts.com/highcharts/xAxis.dateTimeLabelFormats
Also a sample codepen with similar functionality as your requirement. Have a look
https://codepen.io/samuellawrentz/pen/XYVyNR?editors=1010
categories are basically just an information how to display labels and position ticks - the axis still behaves like a "normal" linear axis. Highcharts will fill the axis labels up with subsequent integers if you don't provide categories for all y positions.
You can use xAxis.labels.formatter to filter categories out:
formatter: function() {
return Number.isInteger(this.value) ? '' : this.value;
}
Live demo: https://jsfiddle.net/BlackLabel/ytoj9ng2/
API reference: https://api.highcharts.com/highcharts/xAxis.labels.formatter
Is there a way to create an empty point for the dates which are not included in the data?
Tried to use pointInterval: 24*3600*1000, but doesn't have any result.
In this example we have a gap between 31th July and 7th August which I would like to fill with empty points.
http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/stock/demo/candlestick/
You need to set ordinal: false as an option on the xAxis. Like this:
xAxis: {
ordinal: false
}
API on xAxis.ordinal: https://api.highcharts.com/highstock/xAxis.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.
Defaults to true.
Working example: http://jsfiddle.net/phLz68r9/
We have a requirement to display the x-axis labels in different formats depending on the timeframe. User has the ability to change the timeframe using navigation bar (or zoom bar) that appears beneath the chart.
For example,
for less than 1 day timeframe, the labels should be in hours and mins - "09:45", for 1 day to 1 month timeframe, the labels should be month and date - "Jul 21", etc.
I am using 'tickPositioner' to return the right number of ticks, calculated using min and max values. Now I want to use 'formatter' to display the ticks in the format we need, but it doesn't look like I can access min/max values from within this function. Is that correct? If yes, how can I do the custom formatting like we want to?
Thanks.
You can find the min and max of the axis through the formatter like this:
xAxis: {
type: 'datetime',
labels: {
formatter: function() {
console.log(this.axis.min);
console.log(this.axis.max);
return this.value; // Default. Return something relevant instead
},
}
}
See the API (or console.log) for all values of this in the formatter. The axis might here be the y-axis as well. You can always access the x-axis through this.chart.xAxis[0] if necessary.
Note however that unless you want to be very specific with your formatting you might want to consider customizing dateTimeLabelFormats (API).
I am trying to make a chart using Highcharts which shows no of days in the x-axis if the chart is for a week or month.
Now i want to split the x-axis by "hours" if the chart is for single day.
See the fiddle here
var checkin_failures_stats = {
xAxis: {
type: 'datetime'
},
You need to use tickPositioner and calculate your ticks dynamically.
http://api.highcharts.com/highcharts#xAxis.tickPositioner
It sounds like you just need to look at the tickInterval property:
http://api.highcharts.com/highcharts#xAxis.tickInterval
You'll need to know the time span of your chart - you can either specify this directly, or you can get the min and max values from the getExtremes function, and calculate the length of the time of the chart, and set your tickInterval accordingly.
http://api.highcharts.com/highcharts#Axis.getExtremes