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!
Related
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
I am trying to create a simple chart where xAxis is the date the user selected an attribute while yAxis is the attribute the user selected.
Each attribute corresponds to a value starting from 0. So for example, attribute0 has a value of 0 and so on.
What i would like to do is to not display yAxis grid lines for attributes that were not selected by the user.
As can be seen in the screenshot the user has selected attributes 3,4,5 and 9. The problem is that i don't want to show yAxis grid lines for the rest of the attributes(1,2,6,7 and 8) while preserving the value of the displayed attributes. This means that i want attribute 9 to have a value of 9 even if it is displayed in line 4 in this example(assuming that there is a way to skip empty gridLines)
The end result i would like to be like this for this example.
If the user selects a new attribute the next day, one that does not already exists in the graph, this attribute should be added in the same way.
Any ideas?
I hope i am explaining my self correctly.
Thank you in advance.
You can do this by using categories on the y axis.
Your y values then need to be the category index of the selected value, rather than the value itself.
So, in your example, you would have:
categories = ['3','4','5','9']
And the y values for that would be 0,1,2,3 instead of 3,4,5,9.
Something like (random x value used):
data: [[100,0],[100,1],[100,2],[100,3]]
Example:
http://jsfiddle.net/3d3fuhbb/62/
I have a column range chart with a set of text category labels - I am trying to figure out how I can determine the maximum number of categories and values to display without Highcharts automatically hiding some category labels because there is not enough room to display them. In other words, I don't want to see a chart with 40 values but only 32 category labels visible. How can I get the actual number of displayed labels programmatically so I can reduce my data set to that number of values?
You can use tickPositions on the Axis you want:
xAxis: {
tickPositions: [0, 1, 2, 4, 8, ...]
}
This will tell the chart which points to show as labels: http://jsfiddle.net/cfad2vvL/
There is also tickPositioner which takes a function and you can do whatever you want with the labels.
I trying to use HighCharts to display the number of males and females in the various age groups for 3 cities.
I thought a Bubble chart would be perfect.
x-axis: Male, Female
y-axis: Age groups (0-10 years, 11-20 years, 21-30 years and above 30)
series: the 3 cities
bubble size: number of people
The problem is that both x and y axis require numbers for the axis intervals and not text.
So I changed my chart data to return 0 & 1 for female and male
and numbered each Age Group (where 1 = 0-10 years, 2 = 11-20 years etc.)
Now the chart works fine but off course the axis interval labels are meaningless.
Is there a way that I can change the labels to text?
So for the purpose of generating the chart, I can use 0 & 1 but for the interval labels I would like it to display "female" and "male".
I searched quite a bit, but could only find ways to customize the tooltip.
Without seeing your chart code, it's not easy to say the best way to solve this.
The first option I would look at is using x-axis categories.
An alternative option may be to do this using the axis labelformatter function (http://api.highcharts.com/highcharts#xAxis.labels.formatter).
For your case, you could do something like:
function() {
if (this.value === 1) {
return "female";
} else {
return "male";
}
}