Develop Reference

D3.js combining filtering by column value and using brush for zooming

I am new to D3.js and have been following examples on this website:
https://www.d3-graph-gallery.com/line.html
I am specifically trying to include a dropdown to filter by a column value and also include a brush for zooming.
The data I am using is simply country, date and covid_cases and I am trying to have an initial monthly line chart that can be zoomed in, while also having the ability to filter by country.
I have taken the code directly from these examples:
https://www.d3-graph-gallery.com/graph/line_brushZoom.html
https://www.d3-graph-gallery.com/graph/line_filter.html
I successfully altered them to fit my data, but am unable to combine them to enable both interactions.
Does anyone have any advice on how I might do this?

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 programmatically srcoll to the extreme left point in Highcharts

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.

multi line chart nvd3 not shown properly

I am trying to show a many line charts in one chart.
What's happening is that, instead of showing them all at the same time, you need to disable one to show another one.
Here is my jsfiddle;
What do I need to change in my code so it shows all of the graphs together?
Thanks folks

Try not to give the same Key names for your charts. NVD3 by default merges the duplicate Key names together.
After I changed the Key Name from you chart it seems to pick All the line charts correctly.
Here is a Working Fiddle of your code
Hope it helps.

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.