Develop Reference

Chart's width is impacting to my second x axis labels in Highcharts

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.)

Highcharts: some x-axis labels are disappearing after using setExtremes()

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

Dynamic Highcharts with maximum xaxis points

I try to create dynamic highcharts. I use series.addPoint. It works fine but my chart adds points and doesn't move like here - jsfiddle. It can be with 100 points on the screen.
How can I make only 10 points on the screen and hide old points?

http://api.highcharts.com/highcharts#Series
Series.addPoint()'s third argument is a boolean that enables shifting. If your series is not shifting, try setting the third parameter to true.
As for the second part, are you sure you want to "hide" old data? Generally old data should be shifted off the end in a real time graph (which I assume is what you're going for). If you have too many points, you can make your x-axis smaller via Axis.setExtremes(). http://api.highcharts.com/highcharts#Axis

Flot.js Circle Data points render as square

I'm using Flot.js to make a simple line chart on my page; the problem I'm currently faced is that, without any clear cause, the data points which I've chosen to render as circles will occasionally render as squares. Most of the time, it appears normally. However, occasionally after a refresh of the page the chart will simply decide to appear differently. It's unclear what the cause of this is.
One thing which I've noticed however is that, when this bug occurs, another chart I have (this one a pie chart) stops properly rendering the radial hole in the center. One always occurs at the same time as the other; resizing the chart area (using the resize plugin) doesn't help and refreshing causes it to display properly only some of the time.
Here's a list of plugins I'm loading:
Flot core
Navigate
Pie charts
Resize
Selection
Threshold
Time
Note that not all of these are used for all of the charts; navigate, selection, threshold, and time are all used only for the line chart, and resize is used for everything.

Adding additional information to Highstock point

I am using the Highstock library (not Highcharts) and I'm running into an issue I'm sure can be solved.
I need to add some dynamic information to each point on a series. Highstock has a built in tooltip that displays limited information about a point onHover.
I have tried adding a new property to the point at the time of creation; however, this new property is not available in the tooltip.
What's interesting is this exact functionality is available in the Highcharts library, but I would like to stick with Highstock if at all possible.
Here is a fiddle showing the desired result in Highcharts.
I have started looking around inside the Highstock javascript file looking for a way to expand the properties of the points that actually get added to the series and I have had some limited success.
I have added the property to the block beginning on line 8319 and again on ll320. This does seem to work, but only when the chart is zoomed in... very odd.
Has anyone tried this before, or have some insight on what I may be overlooking?

You can simply add own custom properties, then in tooltip you have access to them via:
this.points[x].point.options.your_property;
See: http://jsfiddle.net/dWDE6/199/
There is only one limitations which you should be aware of: when dataGrouping is affected all points are created as new one, so you don't have access to that custom properties.