We Keep Coding

Properly scaling xAxis with time in chart.js

Using chart.js, I have a bar chart with datapoints spread across many years:
If you look closely near the x-axis, you can see some grey bars. Here's a line chart with the same data for reference:
While using a line chart for this example could make sense, it makes the charts with less data a bit awkward:
and with bars instead of lines
Is there an option that could be used on bar charts to improve the readability when large x-axis are involved? I am representing occurrences of events over-time, another adapted kind of chart could be acceptable too.
Thanks.

I am not sure there will be an option on chart.js.
One way to deal with it is to render line charts initially and then switch the type to 'bar' when zoomed into certain date ranges.
Depending on the type of data, you could also group up the data by summing (or averaging) the data by day (or week or month). Then pass it into the chart and the time series option should be able to display the x axis dates in a more sensible manner.
Otherwise you will have to look into more power charting libraries that can handle and manipulate bigger datasets like amCharts: https://www.amcharts.com/demos/stock-chart-candlesticks/
Or look into using D3 that is highly customisable, but a bit more complex to work with.

adjust x-axis labels flot js

Is there any way to limit the number of x axis values that will be displayed given that there are many points to be displayed on the graph? Otherwise,the x-axis labels overlap if you don't zoom. For example, please see the fiddle I've created http://jsfiddle.net/ggggg/jx3q8uoy/10/
enter code here. You can zoom in and out with the mouse wheel. If you click on update I reload new data on the graph but since there are many points for the size of the graph the x-axis values get mixed with each other which is not good. One cannot make a difference which is which unless they zoom. Is there any way to limit the number of x-axis labels to be shown to just a few so that they don't get mixed in such a way when the point amount is big and if you zoom in then you will be able to see the specific x-axis labels? For example, please have a look at the vis.js graph here http://visjs.org/examples/graph2d/03_groups.html. See when you zoom in or zoom out with the mouse wheel the x-axis labels get rescaled and many of them get hidden and if you zoom in they are shown. I need something like for flot.js
Thanks

Highstocks Plotline multi-color

I have a Highstocks chart that shows events on a timeline. These events are represented by multiple different series of data, and I want to show the line between events in different colors representing past/future (not relating to the series themselves).
Using plotOptions.series.lineWidth: 8 results in a chart looking like this, due to the colors associated with different series (some of which contain only a single point):
If I set plotOptions.series.lineWidth: 0 and specify a plotline, I can achieve the desired view:
My question:
Is it possible to:
Show a y-axis plotline in 2 different colors depending on x-axis value? or
Create 2 y-axis plotlines and only partially display each? or
Draw shaded rectangles behind the markers rather than entire bands/lines?
to create something like this (assuming today was early 2021):
Any help much appreciated.

1/2) No, plotLine can contain single color, and you cannot limit widht of it
You can use renderer to add custom lines. http://api.highcharts.com/highcharts#Renderer.path

NVD3 JavaScript charting - lineChart with duplicate right hand y-axis using 1 or more series

I have been unable to discover how to add a second, identical, y-axis on the right side of the chart. As a side issue, I don't know how to switch which side the y-axis is on. Period.
I have looked into the multiChart type, but it seems as though a data series must be assigned to a specific axis; if I only have one series, the second axis does not show. I have thought about assigning the same series to both axis by duplicating the series, but this is terrible work around.
What is the correct solution to achieve two identical y-axis on both the left and right sides of the lineChart, when using one (or more) series?

You would have to modify the source code to do this -- NVD3 simply doesn't support this. Alternatively, you could add the second axis manually.

Draw vertical line when two lines cross in Highcharts

I have a temperature line graph, and I want to draw a red vertical line when the two temperatures (surface temp and dew point) cross. So far what I do is I draw a vertical rectangle on top of my graph at places I calculated it crosses.
It works correctly, but there are a few downsides to this :
The line kind of stands out of the graph ... we can tell I added it later and not in the graph itself;
The pixels are hardcoded, if I change the graph width it might not be good (I could probably fix this, but still)
I would like a little tooltip when I highlight a line, but since it's a simple rectangle, it just sits there and is not dynamic at all.
What would be my best option to integrate this line better un my graphs?
Thanks!

plotLines are your best way to draw the line - http://api.highcharts.com/highcharts#xAxis.plotLines
Two things:
1) The difficult part will be calculating where the lines cross. if they do not cross at a data point, which they most likely won't, there will need to be some guesswork involved, as there is no value you can retrieve from the chart to tell you the axis value where they cross.
2) if you are using separate y axes for these two series, which I assume you must be since they are completely different units and scales, then the point where the lines cross will be COMPLETELY arbitrary and meaningless, as where they cross will be strictly a matter of how the scaling for each axis is set up, and the values have no actual correlation to each other.