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/
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!
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.
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 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";
}
}