My Y-Axis array :
["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24"]
The chart doesn't show all number, it only shows 1, 3, 5, and so on. 2, 4, 6 is getting skipped. How do I force Highcharts to show all labels?
JFiddle
What you want is to set the label.step to `:
labels: {
step: 1
}
This forces highcharts to render a label for every category/tick.
The default behavior is to remove ticks if they are too close to one another. You can force all ticks by using a tickPositioner, rather than specifying categories:
yAxis: {
title: null,
tickPositioner: function () {
return [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24];
}
},
Note the quotes were removed, i.e. the returned array contains numbers (rather than string literals as was the case in the original question). Not sure why it doesn't work with string literals.
See also http://api.highcharts.com/highcharts#yAxis.tickPositioner
Related
When I want to create chart, I found that there is something weird.
The value sequence is correct, but xAxis categories aren't as my expectation.
I want to know how to fix this problem.
If need another information, please let me know.
In the category type axis, the first column is placed on the x=0 at the xAxis, which corresponds to the first value of the categories array. If you set the first series.data x to 1, it takes the second value from the categories array. You can easily fix that, by setting null as the first value:
xAxis: {
categories: [null, 1, 2, 3, 4, 5, 6]
},
Demo:
https://jsfiddle.net/BlackLabel/aemvthz6/
API Reference:
https://api.highcharts.com/highcharts/xAxis.categories
I am using Apexcharts to display a heatmap, which works fine.
However, i'm struggling with positioning the xAxis ticks and labels to align with the beginning of a cell in the heatmap.
Currently the behaviour is as follows:
Each series has 7 values, therefore 7 ticks which are spread equally along the xAxis which causes the offset.
What i want is to have a tick and value at the beginning of each cell in the heatmap (basically for a series with 7 values, 8 ticks along the xAxis) so that the ticks are aligned with the cells like this:
How can this be achieved?
I found a workaround to achieve this for integer x-values, even though I think this is not the optimal solution.
Apparently setting the tickAmount as well as the range property to the length of the series, delivers the desired solution if combined with an incrementation of every x value by 1.
Add this to the chart options:
xaxis: {
axisTicks: {
show: true
},
tickAmount: 7,
range: 7,
labels: {
show: true
}
}
And increase every x value of the series by 1.
I have a category axis where categories are shown on the y-axis. The labels displayed are automatically chosen by highcharts from the categories array. The index of the category determines what label is shown on the axis. The index is calculated automatically by highcharts and it does a fairly good job with it. But sometimes the next index exceeds the length of the categories array and when this happens the index number is shown on the axis. This makes it look bad among the other labels.
Using steps
labels: {
step: <number>
}
helps prevent this issue but I prefer highcharts automatic calculation , is there anyway I can avoid showing the index which exceeds the length of the categories array?
I think this is caused by yAxis.endOnTick which is set to true by default: https://jsfiddle.net/ky40k1mk/3/ vs https://jsfiddle.net/ky40k1mk/2/
Of course, instead of removing last tick (so the chart will end in nowhere), we can replace last tick, using xAxis.tickPositioner, see demo: https://jsfiddle.net/ky40k1mk/4/ (or: https://jsfiddle.net/ky40k1mk/5/ )
And tickPositioner:
tickPositioner: function() {
var ticks = this.tickPositions,
last = ticks.length - 1;
if (ticks[last] > this.dataMax) {
ticks.splice(last, 1, this.dataMax); // replace last tick with current max
}
return ticks;
}
I've been trying to add some custom yAxis labels to highcharts but I've not been able to so far. I've tried using formatter from a predefined array of strings and I've tried addAxis method but that doesn't get me the results I'm looking for.
Basically I have some numbers (lets say 4 and 4000) and I want to have these as my yLabels. However, I do NOT want the giant space between them. They need to be one right after the other and in ascending order. I cannot figure out how to do this leaving them as integers and I cannot figure out how to dynamically add them to highcharts as strings. I'm not even sure if this is possible
Any help would be greatly appreciated.
Here is the Y-axis label formatter documentation from Highcharts you're probably looking for. I wrote this fiddle to simulate the custom y-axis functionality you were wanting, although I'm not sure how you want to map those values to the x-axis data. This should give you a good starting point.
Code for reference:
$('#container').highcharts({
yAxis: {
categories: ['4', '4000', 'Foobar'],
labels: {
formatter: function () {
return this.value;
}
}
},
series: [{
data: [0, 1, 2]
}]
});
This stackoverflow question may also help although I noticed some dead links.
I'm using Highcharts for a project in which I have to display two series with about a thousand points each. The x-axis represents a date, and the y-axis a quantity. In addition, each point has an associated list of namesMy data is day-by-day without gaps, with a structure such as
var mydata = [ ...
{x: theDate, y: theValue, names: theNames},
... ]
where theNames is an array of strings. I can access these in the tooltip formatter through this.points.point.names, given that the range displayed on the chart is small enough. If I change the x-axes so that the start date and end date are more than roughly a year apart, then the tooltip is not rendered at all.
One of the possible avenues that I have tried but failed with so far is setting the turboThreshold limit to the length of the longest series plus 1. Setting this lets me at least display a graph when mydata.length > 1000 (the default value). However, this only displays the tooltip if the x-axis range is less than 261. Otherwise, the tooltip disappears entirely, as does the point.data object where I'm getting the name from.
I'm also not great at JavaScript, but I was wondering if there were a way to separate the names of the points from the array containing them (in my examples, myData1 and myData2) and somehow access those names from the tooltip function without going through the current point.
Here is the link to the jsFiddle demonstrating this issue.
All help is appreciated!
The problem is in dataGrouping, when disabled works fine: http://jsfiddle.net/34tfg/1/
DataGrouping is method in Highcharts to approximate points and display them when width of the chart is not enough, e.g. how to display 10 000points in a chart of width 1 000px -> 10 points in a one pixel..? And when dataGrouping is used, new points are created, so all your custom options like 'names' etc. are lost (at least not accessible).
Code:
plotOptions: {
line: {
dataGrouping: {
enabled: false
},
turboThreshold: 10000
}
},