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.
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/
I have a highstock chart to render a stock price and I have an issue when render the tooltip.
The issue is that even I move my mouse across the boundary of the chart, the tooltip still shows up.
For example,
I have a series of stock price from 2015-01-01 to 2015-12-30 rendered on the chart. Then I zoom in from 2015-05-05 to 2015-06-30. Then the x axis of the chart is from 2015-05-05 to 2015-06-30. When I mouse over at the position of 2015-05-05, I can see the value of the stock price for that date and this is as expected. But when I move my mouse a little bit to the right, I can still see the tooltip show the stock price for 2015-05-04.
I can imagine this is an issue related to rounding. But I am not sure how to get rid of this since people may think that the zoom in range is from 2015-05-04 rather than 2015-05-05. To be more specific, how could I make tooltip not show up when the range is out of chart's x axis boundaries?
Any hint or help would be appreciated!
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.
I'm trying to use Highchart to show a graph. Data is given as a data attribute of the figure. Everything renders as I want to, except aht I can't get the X-axis labels (dates) to show up. I've been debugging and within the Highchart's xAxis.labels.formatter function, but this.value is always "NaN", whereas the dates renders fine in the Tooltip.
Here's a JSFiddle page replicating my issue.
http://jsfiddle.net/xlory/nKhuA/
<figure id="seo-demand-figure" data-filename="SEODemand"
data-graph="[
{"name":"Agents of SHIELD
cast","label_suffix":"","data":
[[1397286000000,0.09533],[1397890800000,0.08988],[1398495600000,0.06456],
[1399100400000,0.06224],[1399705200000,0.0594],[1400310000000,0.05941],
[1400914800000,0.02861],[1401519600000,0.0307],[1402124400000,0.02971],
[1402729200000,0.0],[1403334000000,0.03265],[1403938800000,0.0],
[1404543600000,0.0]]},
{"name":"Alec
Baldwin","label_suffix":"","data":
[[1397286000000,0.2916],[1397890800000,0.2832],[1398495600000,0.2396],
[1399100400000,0.2397],[1399705200000,0.2377],[1400310000000,1.099],
[1400914800000,0.3148],[1401519600000,0.2763],[1402124400000,0.2674],
[1402729200000,0.2286],[1403334000000,0.2612],[1403938800000,0.3079],
[1404543600000,0.318]]},
{"name":"Kim Kardashian
divorce","label_suffix":"","data":
[[1397286000000,0.02179],[1397890800000,0.02179],[1398495600000,0.02179],
[1399100400000,0.02179],[1399705200000,0.02971],[1400310000000,0.02971],
[1400914800000,0.05942],[1401519600000,0.08913],[1402124400000,0.05942],
[1402729200000,0.03265],[1403334000000,0.03265],[1403938800000,0.03367],
[1404543600000,0.03593]]}
]"
data-decimal-point="." data-thousandssep="," class="figure">
</figure>
(JS code in the JSFiddle page.. too long to post here...)
How can I get the labels to show correctly?
The issue was I had a wrong value for startOfWeek. I put 'Sunday' but it should have been a number corresponding to the day of week, so like '0'. That messed up with the tick, and tick labels.