I have a live graph that updates every x time. Included below is an image using a dummy variable. What I would like is for Highcharts to only label the first, middle, and last. Or anything to where I don't spam my graph label with ticks.
Presently my xAxis looks like so:
xAxis: {
crosshair: true,
type: "categories",
categories: xaxis
},
Nothing out of the ordinary. I have tried adding a tickInterval, however, that does not really solve the issue over the long run. Essentially what I need is the opposite of a tickInterval, where ticks are removed after a certain interval. Not unlike the datetime API that highcharts currently has. The difference here is that this data cannot be generated by myself, but by an API that I am using, which spits out the as-shown x-axis label.
After a while, in case there is too much xAxis labels displayed on a chart, the number of them is automatically reduced (the first example). Although, if you want, you can use couple of solutions. The best way, would be to use tickPositioner to display only the first, the middle and the last labels and format them using Highcharts.dateFormat inside xAxis.labels.formatter (the second example). You could also set bigger step of xAxis.labels (the third example).
API Reference:
http://api.highcharts.com/highcharts/xAxis.tickPositioner
http://api.highcharts.com/highcharts/Highcharts.dateFormat
http://api.highcharts.com/highcharts/xAxis.labels.step
Example:
http://jsfiddle.net/vxjdwer7/ - default behaviour
http://jsfiddle.net/30t45zvq/ - using tickPositioner
http://jsfiddle.net/6g9uvokL/ - using step
Related
We have a request from customer and we need to trick the highcharts bar view.
The problem is our series contain timestamp vs value but business wise this value is corresponding to previous timestamp to that value's timestamp. So we would like to show the bars in between of these timestamps.
So is there an easy way to do this in highcharts w/o playing with the points in the series.
See images below;
Current Highchart Behaviour
Requested Chart Behaviour
You can use xAxis.tickPositioner in order to move ticks and xAxis.labels.formatter to change labels values.
Live example: https://jsfiddle.net/h9zjmqap/
Output:
I have a chart where two graphs/series have different units. Therefore the y-Axis is different and the extremes are calculated separately from each other.
Is there a way to tell Highcharts to use the same scale, despite the different units, across all graphs/series?
Below is the chart. Relevant y-axis are the ones on the right, as an example. The units are different: "W/m^2" and "kW/kWp", however I want the scale to be the same.
Of course, one way would be a manual approach: in my controller, to go through all the data series and check the overall minimum and maximum value of all data series and then apply the extremes manually via
chart.yAxis[i].setExtremes(min, max)
but I was wondering if Highcharts has any way, like a configuration option, to achieve this.
I didn't find anything in the docs so far.
Thanks.
There is an option to achieve that. You can link one axis to another via linkedTo property.
From API:
linkedTo : Number
Index of another axis that this axis is linked to. When an axis is linked to a master axis, it will take the same extremes as the master, but as assigned by min or max or by setExtremes. It can be used to show additional info, or to ease reading the chart by duplicating the scales.
http://api.highcharts.com/highcharts/yAxis.linkedTo
Example: http://jsfiddle.net/n8tokqru/
yAxis: [{
}, {
linkedTo: 0
}],
I have a situation where I need to remove all margins from a highchart and remove the x/y axis so it fills a series of columns in a table completely.
I did that, no problem. Chart goes to the extremes as needed.
What I need now is that pesky yaxis I already removed...but displayed in a table cell outside of the existing highcharts object.
It would seem easy, as though I could just set the overflow property of yaxis to 'visible' and play with the offset...which would work however this would only work if I wanted to re-position the axis within the boundaries of the highchart object. I want him in a different cell entirely.
Is there anyone who has had experience in this situation? Is it going to require me to have a secondary highchart with only a y-axis?
Best answer gets a green check.
EDIT :: I now have dispersed each 'day' into their own column (more bars coming per day [scheduled,actual,etc...]). In order to keep the scales lined up, I manipulate the yAxis:max property and set them all to a derived value.
In the open column (currently w/ text Hourly Trends) is where I would put an additional highchart module with no series data but with the same min/max/tickInterval.
The next big leap will be to see the data is alive and changes w/ schedule. May have to start another thread for that one, no?
Create a new HC object with no data but only the yAxis (making sure it is the right scale, etc). Perhaps add the same series of data to it but hide the series? Add it to the location you want. This seems kludge and not very good practice. Each business use is different but why would you want this?
EDIT based on comment of business rules:
Why not come at this from a different direction and have the individual chart elements (the bars/points/etc) be a single point chart. This way you have one chart per column. You can then set up the yAxis to be text and not worry about the position. If we could see an example of the page layout and the desired result that would help.
Hello I'm original using highcharts
because my clients has need to see different view based on time,
like 1day,2day,3day,7day,1month, so I figure out highstock is more resemble
to this, but using highstock is missing some feature.
while I successfully figure out how to add legend(legend), change point display
(tooltip:formatter), change xaxis display and navigator display(dateTimeLabelFormats),
I see the display of line just like stock, which means:
it doesn't consider the absolute value of which too much, like I have connected terminals varying from 8-10, registered terminals varying from 2-3, unfornately it will draw registered terminals above connected terminals, which doesn't quite make sense, (besides the yAxis display is not correct, when it draw 5, the point above which actually says 4..), I also tried
plotOptions: {series: {compare: 'percent'}},
and
plotOptions: {series: {compare: 'percent'}},
but doesn't work, the y Axis is still quite confusing,
does anybody has a good solution? Thanks.
Had the same issue recently. It basically come from leaving useless parts of the example code in :D
Taking out the
plotOptions: {series: {compare: 'percent'}},
part should make it use the absolute values.
I assume taking out the compare parameter alone should be enough as well but since its the only thing you set from the plotOptions there is no need to keep the rest.
I am using a Highcharts Stock graph to show a percentage with respect to time.
http://jsfiddle.net/michaelchart/yYmPR/1/
At certain zoom levels (in this case, when zooming to a timespan of between about 6 and 12 years) the plot strangely turns from a line to sporadic points.
Any ideas as to why this might be? Or is it a bug with Highstock?
You can see an example of a working Highstock graph here http://www.highcharts.com/stock/demo/basic-line.
After posting on the Highstock forum and consequently having an issue posted on github, I found that it was because of the default value of the gapSize option. According to the docs;
gapSize : Number
Defines when to display a gap in the graph. A gap size of 5 means that if the distance between two points is greater than five times that of the two closest points, the graph will be broken.
In practice, this option is most often used to visualize gaps in time series. In a stock chart, intraday data is available for daytime hours, while gaps will appear in nights and weekends.
Defaults to 5.
Setting gapSize to null fixes the problem.
In my particular case, the reason of this problem was bad data output.
Within "series" property, within the "data" array there was a "false" value.
Example:
series : {
"type":"column",
"name":"Test",
"data":[541,784,false,251,353]
}
Corrected the problem in the backend so "false" was interpreted as 0, and everything works now.