I was developing a solution for another question here on Stack Overflow (see Highcharts : selection) that has some simple slider elements (using input type="range") to change the categories shown in a column chart. Whenever the user changes the range in either slider element, the chart is redrawn using setExtremes().
I noticed that, in some instances, some of the x-axis labels disappeared, even when I moved the sliders back to their original positions. I've tinkered with a number of x-axis settings, including minPadding, startOnTick, and tickInterval, and none of them seem to solve "The Case of the Missing Labels."
The first screenshot below shows the chart when it's first loaded. All of the x-axis labels are present.
The second screenshot below shows the chart when I change one of the sliders. Some of the x-axis labels are now missing. It looks like they're being staggered.
Here's where the plot thickens: if I adjust the sliders to some other values, all of the labels come back:
Here's the fiddle I developed so you can see a live example of this behavior: https://jsfiddle.net/brightmatrix/uvat8u05/
I'm curious to know why this is happening, and what settings I could use to ensure that all x-axis labels are shown, regardless of what values the user chooses in the sliders.
Thank you very much!
Update: The responses from both Max Uppenkamp and Grzegorz Blachliński are valid and helpful solutions. What I also discovered by chance was that explicitly setting the slider values to integers using parseInt() solved this issue as well. It also helps in comparing both values to make sure a user doesn't choose an end date that is earlier than the start date.
This seems to be intended behavior of Highcharts, however inconsistent it may be.
According to this this should be fixed in current versions of Highcharts, but you might as well try this tick formatter solution.
Edit: If the above doesn't work for you, you might be able to solve the issue by rotating your labels:
http://www.highcharts.com/demo/column-rotated-labels/grid
Related
I was building a chart in HighCharts with logarithmic axis type. Here is a link to the code in JSfiddle.
https://jsfiddle.net/PowerHouse/ekwoupcy/15/
I'm consuming data from Google sheets and at the moment, the values are plotted exactly as in Google Sheets. I however wanted to plot the changes over time instead, something similar to this image. Ignore the left percentages (labels), the ones on the right are the workable ones or rather where my focus is on.
I have tried applying the plotOptions and specifying the compare: 'percent', but still I get the chart not showing the change over time but the exact stock value instead. Is there a way I could get the percent changes instead of the values themselves? I will appreciate any assistance. Thanks!
In the application I'm working on I have a chart with two x axes. Both are of category type (but I think that's irrelevant) and all the series have to be attached to the first axis, so the second has no related data.
The problem is that depending on the width of the chart, the second axis labels are rendered or not. I want always to render them (because it is completely related to the first one). I have tried many things:
To apply linkedTo axis property on second axis. Not valid becuase the representation of the axis is wrong.
To assign a series to the second axis. Not valid because the representation of the data is not real and even if it comes with no data, we have the same problem with the axis.
I've been playing with chart margins with no success.
I have created an example in jsfiddle. There you can see how the second axis just renders its horizontal line. If you modify the css class highcharts-figure, by narrowing the element, for instance, setting a width of 800px and render again the chart, you can see the labels for both axes. That's my goal. But I want it for any size of the chart.
This example runs with Highcharts in v6.1.0 because is the version installed in my app, but this issue happens with the latest version as well.
Do you have any idea why is this happening?
This must be a bug? I found that removing width altogether from CSS allows it to render properly at all widths, but unfortunately the initial render is still wrong.
It seems like a bug to me also. Could you report it on Highcharts Github issue channel?
As a temporary workaround, you can do an update on this additonal xAxis and "force" chart to show this axis again. See demo.
chart: {
events: {
load(){
this.xAxis[1].update({
visible: true
})
}
}
},
API
https://api.highcharts.com/highcharts/chart.events.load
https://api.highcharts.com/class-reference/Highcharts.Axis#update
The bug is published in the highcharts github and there is another workaround for this issue.
Basically, it consists on assign to the second axis a fake series, as simple as:
{
showInLegend: false,
xAxis: 1
}
Here you have the full example: workaround.
(In my original post I said that I tried a similar solution -to add empty series to the second axis- and that it didn't worked for me. The most likely is that I was wrong, becuase I've tried this workaround and it's working fine.)
I'm using n3-chart/line-chart (https://github.com/n3-charts/line-chart) in my angular project.
I'm wondering if there is any way of displaying thresholds in the chart? Ideally this could be done by enabling the grid option, and set a color for the grid on certain y-axis values. However, I haven't found any information if that is possible or not.
The only work around I could think of is to create a "threshold series" that only has two measurements, one for the min x value and one for the max x value. The chart in this codepen example demonstrates this: http://codepen.io/ulrikl/pen/rOXNdd
So, my question is: Is this the only way of achieving thresholds?
n3-charts creator here, symbols are now supported so take a look at http://n3-charts.github.io/line-chart/#/docs, jump to the Symbols section and you'll be all set, hopefully !
I am new to Highcharts so please pardon me.
Actually, I am using Highcharts (type: column) and the scrollbar is enabled. My requirement is to programmatically select a column which might have already scrolled to the extreme left.
I am able to select the column but now i need to manually scroll there in order to see the selection. Although, I tried setting the extremes using setExtremes() method and redrawing the chart using chart.redraw(). This works fine and I get the selected column in the display area.
But, I would like to know is there a better way of doing the same, so that I need not redraw the entire chart every time.
Please let me know if you need any further details.
I have tried using all sorts of combinations of tickInterval, tickPixelInterval label formatter and tickPositioner and I haven't been able to solve this issue.
I have a chart builder that pulls in different feeds and allows the user to modify the date range of those feeds before shooting this data into highcharts and spitting out the chart.
The problem is that some of the time, the first and/or last dates get cut off. Here is an example:
Without adjusting the margins of the chart (which causes the chart to take up less space), how do I prevent this from happening?
If I was able to determine the pixel location of the ticks and their labels, I could in theory, hide the specific ticks and their corresponding labels which were located outside the graph / cut off. Thoughts?
Without looking at your code - there are a few things you can do.
Rotate your labels
Play around with the x/y axis labels
Align them to the right
Hopefully one of these would help your cause.