Develop Reference

HighCharts.js: How to Create a Boxplot with stems representing confidence intervals, NOT max/min?

I'm trying to get my HighCharts code to generate a graphic visually the same as the attached goal image.
I need to figure out:
How to get the tooltip on a Boxplot to read "Upper Interval" and "Lower Interval" instead for the Minimum and Maximum labels respectively (marked by red arrows in attached Highcharts image).
Need to find a way to remove the Box on the Boxplot. Essentially, each data point in the series will display two long stems meeting # median in the center and top and bottom stems as Confidence Intervals. (changed from min and max as they were previously) Attached Goal image shows this.
Thank you for any help.

For edit tooltip try to use options from series.boxplot.tooltip.
Here is a possible solution from another SO thread, showing how to hide boxplot series, you can check it.
How to hide data in a series in highcharts boxplot?
Useful information from highcharts documentation how to styling the boxes.

To remove the boxes from the boxplot, I used this solution posted by user Fusher:
Highchart Forum Post
This involved setting the q1 and q3 to be the same value as the median for all data points in the boxplot series.
To change the tooltip to read "Upper Interval" and "Lower Interval" in place of Maximum and Minimum respectively, I used: plotOptions.boxplot.tooltips.pointFormat
I overrode the default value of <span style="color:{point.color}">●</span> <b> {series.name}</b><br/>Maximum: {point.high}<br/>Upper quartile: {point.q3}<br/>Median: {point.median}<br/>Lower quartile: {point.q1}<br/>Minimum: {point.low}<br/>
to
<span style="color:{point.color}">●</span> <b> {series.name}</b><br/>**UPPER INTERVAL**: {point.high}<br/>Upper quartile: {point.q3}<br/>Median: {point.median}<br/>Lower quartile: {point.q1}<br/>**LOWER INTERVAL**: {point.low}<br/>

d3 chart is showing some decimal value in the X axis tick, instead of showing the date and time

My d3 timeline chart is showing some junk value (decimal) in the x-axis tick, instead of showing the date and time.
This only happens when there is a single data in the graph.
As shown in the diagram below.
code sandbox - https://codesandbox.io/s/exciting-clarke-yfd1e
I found the root cause of this, It is happening because of the initial call on the chart load. I am doing a zoom transform on the chart load. If I remove this line it works as expected but I can't remove as this is required (Initial zoom transform to apply on default chart load - d3.zoomIdentity).
Code creating the issue is below -
var transform = d3.zoomIdentity.translate(200, 0).scale(0.5);
svg.call(zoom.transform, transform); //This is initial call on chart load
Please suggest to me how to fix this issue in the d3 chart.
Thanks in advance.

This seems to be an issue with the scale, so when there is only one data the default behavior is considering it as a date but after transforming it's considered as a number
and the junk value is coming as last 3 digits of the number i.e, in your case
startTime: "1574504520049" is .049
So if you update the scale to somewhere near that you will be able to get time as
d3.zoomIdentity.translate(100, 50).scale(0.0000000001)
Please check https://github.com/d3/d3-zoom/issues/57
it will help you find a proper scale for the problem.

Highchart line chart Tooltip showing index value instead of X-axis formatted label name

My Problem of alignment is resolved with Highcharts graph should start entirely to the left and end entirely to the right
But the tooltip information shown with index instead of x-axis label.
Without calling Highcharts.Axis.prototype.init below is the output?
http://jsfiddle.net/mkpasala/3s0prgau/
When I called the Highcharts.Axis.prototype.init method like below, instead of xAxis label its showing index.
http://jsfiddle.net/mkpasala/k94cfn8t/
Please help me to fix this inside Highcharts.Axis.prototype.init method.

I resolved the issue by taking categories into a variable before calling Highcharts.Axis.prototype.init and used tooltip.formatter function to format the tooltip. Below is the link to that solution.
jsfiddle.net/mkpasala/3s0prgau/14/

chartjs Line chart Javascript

currently i am using chartjs to generate chart data for 12 countries.
i have date for 12 countries in Line Chart.
but the problem is that i cannot get country details when i hover over the points. Instead i get x and y axis values which are time and (sum) on y axis. how could i get data about country when i hover.
also if clicked on certain point i should get that data on click.
supposes i hovered on england and cliecked on it i should get a alert box containing england data only.
is there any solution to it in chartjs

The second point's functionality has been added in the ChartJS v2 beta if you're still having problems. As for the first point I don't think that's easily possible unless you're just wanting what country/dataset it is.

Tooltip Issue with Nvd3 LinePlusBar Chart

Right now i am able to form the Json data and got the lables alligned perfectly on 3 axes(X,y1,y2). The problem i am facing in this chart is the tooltip. I am getting the x axis labelled correctly from the row grouping of my matrix report. So on hovering my pointer i am getting the date value as 12/31/1969 by default at any point instead of taking the date from wherever the pointer is placed.Is there any workaround for that!