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

How to render chart for 10,000+ records in EXT JS?

Currently I am facing issue while rendering chart for large data in EXT JS. Chart gets cut or overlapped.
For example, I have 500 names on x-axis to plot then chart displays only 15 to 20 of them and others get cut. According to my view there should be scroll bar to view whole chart rather cutting the legends. I have tried to found solution for having scroll bars for such large charts but I am not able to find it.
Any other way for viewing whole chart is also accepted.

One workaround I can think about is 'panzoom' interaction.
Please visit link given below to see an official example with 'panzoom'.
http://dev.sencha.com/extjs/5.1.0/examples/kitchensink/?charts=true#line-markers
With 'panzoom', you can zoom in to the chart and then scroll/pan. Zooming in to the chart would make the hidden coordinates visible.

It may look like this because you might have smaller space to render the chart as your data is too big. So you can try with 'pan zoom'. But I don't think so you will get a useful chart. It will still get junked.

Highcharts not rendering properly with too many series

luckily highcharts is been integrated to the application but the problem i am facing now is the rendering of the data..it works fine with the small amount of series but as the series goes on increasing the size of the graph displayed gets smaller n eventually nothing is visible..i am confused whether its a css problem or something else
here is how it looks:
any help I would be glad!!

That's not an issue with HighCharts but rather the way you are displaying your information. If your container/div has a certain size, HighCharts tries to figure out what would be the best way to display the information based on your parameters.
As you said, it looks fine with less data, so in that case, you just need to put in a scroll option in highcharts or a zoom in option, which allows you to display that information. Another option is to get rid of your legend, so you can see more of the chart (as long as your tooltip is being utilized), but after more data, the issue will reside again with that option.
Option 1 - Scrolling:
How to make highcharts scrollable horizontally when having big range in x-axis
Option 2 - Zooming:
chart: {
type: 'line',
zoomType: 'x'
}
Demo from Highcharts

Highcharts date tick position hiding removing

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.