I want the dates on the X-axis to follow without missing dates (i.e. 1, 2, 3, 4, and so on). When I know exactly how many columns there will be in the chart, I can solve the problem by calling setScaleMinima(_:scaleY:):
But when I have a large number of dates, with the same scale minima, the dates start to be grouped:
How can I make do that, regardless of the number of dates, all numbers without grouping are displayed on the X axis?
You can use setVisibleXRangeMinimum(minXRange:) and setVisibleXRangeMaximum(maxXRange:) to set the minimum and maximum number of chart columns. But these methods will only take effect if there is data in the chart (thx to this answer), so for convenience I call them every time the data changes:
public class MyChartView: BarChartView {
override public var data: ChartData? {
didSet {
self.setVisibleXRangeMinimum(2.0)
self.setVisibleXRangeMaximum(8.0)
}
}
}
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
When I have less Categories than Series on my highcharts, the categories array autofills itselft with the index of every item from the series.
I.E:
series = [10,30,54,20,30,40,50,60,07,80,30,20]
categories = [125,250,500]
but when I plot the graph this is what I get:
series = [10,30,54,20,30,40,50,60,07,80,30,20]
categories = [125,250,500,3,4,5,6,7,8,9,10,11,12]
I dont want the 4, 5, 6 ... categories to be shown, I just need the ones specified in the categories array, so each category will have more than one single point.
Heres te JSFiddle of an example that happens something like the problem that i'm having.
http://jsfiddle.net/pc4na4fk/
EDIT:
:
This is the type of graph that I need
I could solve it this way:
If I want the first category to be filled, I need to set the x property on the series object from 0.0 to 0.999.. range, and the second category 1.0 to 1.999 range and etc..
here's the JSFiddle that show's how I made it work:
data: [[0,29.9],[0.1,39.9],[0.2,19.9],[0.3,25.9],[0.4,13.9],[1,55.9],[1.1,22.9],[1.2,23.9],[1.3,43.9],[2.1,26.9],[2.2,13.9],[2.3,19.9],[2.4,10.9]]
http://jsfiddle.net/p4fokmw3/2/
If you know how many values will be in your categories array before you define your chart options, you can set the max attribute in your x-axis to limit how many items are shown on that axis.
The value of max should be the total number of items in the categories array, minus 1. So, three items = max: 2; two items = max: 1; etc.:
xAxis: {
categories: ['125', '250', '500'], max: 2
},
Here's an updated version of your fiddle with this fix: http://jsfiddle.net/brightmatrix/pc4na4fk/2/
I hope this is helpful for you!
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 use the highstock graph. I want to update the xAxis labels according to the range which is selected from the rangeselector. eg. if it's a 1-year graph, i want the ticks to be at the end of each month with labels as Jan-12,Feb-12 etc.(by default it shows each month as the beginning of that month). And if it's a monthly graph i want the labels to be positioned at each friday ie. at an interval of 7 days.
Is there a way i can dynamically change which labels are displayed on the axis based on the extremes?
You can use tickPositioner (http://api.highcharts.com/highcharts#xAxis.tickPositioner) or formatter to change labels name http://api.highcharts.com/highcharts#xAxis.labels.formatter