Highcharts multiple x axes is hidden on zoom - javascript

I used the multiple axes on the highchart
During Zoom operation the x values are getting hidden
I used linked to attribute also

JsFiddle
zoomType: 'y',
zoomType: String
Decides in what dimensions the user can zoom by dragging the mouse. Can be one of x, y or xy.
Try it:
None by default
x
y
xy

I referred this jsfiddle to figure out what's happening. I think, this behavior is not a bug/issue.
This github issue mentioned in comments is not the problem here. Because what it is saying is to use linkedTo: 0 which is already present in this example.
It actually depends on how much area and more importantly from where to where you select for zooming in. Let's see that by examples:
In the following image, the rectangle signifies the width of one column.
Now, if you start your pinch from more than half of the width of any column or end the pinch after half of the width of a column, that column would be fully visible along with x-Axis labels.
But, if you pinch any less, say from the middle of orange bar of first column, till middle of next column's blue bar, it's not going to show whole columns and hence it ends up with hidden x-Axis labels.

Related

Is there any way to provide left margin on y axis label to avoid the chart moving Chartjs?

I am using Chart JS for bar representation. and using this link https://stackblitz.com/edit/ng2-chart-scrollable?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts for scrolling the bar chart.
In vertical bar, everything working fine. But in horizontal bar while scrolling the y axis moving.
It is because of the characters length the chart is moving on scroll.
In the above picture, you can see the chart position.
this is second picture the chart position slightly moves to left.
i Know this is because of the character, I have tried some logic like adding empty spaces based on maximum character shown to other words which is less than the bigger words.
Is there any way to make it fixed without moving. or can we try adding margin left before y axis label, if yes how to add a margin to it. Because in highchart I have seen something like margin left fixes this thing, But I don't know how to implement in chartjs

Improve hovering over points to display tooltip

I am developing a datetime series line chart of efficiencies (in percentage) over time.
I need a tooltip to display information about each point on the chart, but I am finding that it is difficult to hover over points which coincide with the line or marker of another series.
The chart will be static in nature in that users will not be able to remove series from the chart - so they wouldn't be able to remove a series in order to be able to get more easily hover over the desired point.
In this demo - https://jsfiddle.net/slaws/37y4cteq/10/ - it takes many attempts moving the cursor in that area to get the tooltip for the last point in the series with the black markers to show.
Here
I moved my cursor around the area marked in red, but couldn't get the tooltip for any points other than one shown to display.
I had to follow a specific procedure and get my cursor to a specific point to be able to hover over the black marker and get the tooltip to display. Here
I had to hover over the second to last black marker and then move the cursor to the point indicated to get the tooltip for the last marker to display.
I have tried using the findNearestPointBy (x, y and xy) in combination with stickyTracking (true and false), with no improvement.
"stickyTracking": false,
"findNearestPointBy": 'y'
I read something about a direct hover mode rather than nearest neighbor but found no details about how to implement that.
Any guidance on how I can make it easier for my users to display the tooltips in my use case would be greatly appreciated!
Setting tooltip.snap as 0 and setting back stickyTracking to default options fixes your issue.
Demo: https://jsfiddle.net/BlackLabel/54q2eubd/
API: https://api.highcharts.com/highcharts/tooltip.snap

highstock chart tooltip issue

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!

Highcharts Bar Chart - Labels Not Appearing in Bar

I've been playing around with a highcharts bar chart and noticed some strange behavior. If I have a long name in the x axis (the categories), and if I have labels enabled to show up on the bars, not all the labels will appear. If I remove the long x axis name, then the label that wasn't appearing on the bar before will suddenly appear. I have a working Jsfiddle example here:
https://jsfiddle.net/p55t0bmf/ (notice label isn't appearing for one of the bars, should say 5 but nothing is there)
I placed a long name in the categories section to trigger this behavior:
xAxis: {
categories: ["LONG NAME THAT WILL BREAK US"]
}
Does anyone know why this would be happening, and is there a way to fix this behavior (without resorting to short x axis names of course)?
Set allowOverlap to true. When you have longer xAxis labels, then you have less horizontal space. Labels have padding which can overlap and hide some of them. Anyway, your demo works for me exactly the same way with or without long xAxis category.
Demo with all labels: https://jsfiddle.net/p55t0bmf/1/
stacking option cause this problem. If you set the stacking, then highchart change the label opacity automatically.
Solution : Remove stacking options from chart, if you dont need or write css to override label opacity.

Make Highcharts tooltip show info for closest point to the left (i.e. not change at midpoint)

Between two points on a line, if you move the cursor to the right of the midpoint, it will show the tooltip for the right point. Is there a way to keep the tooltip focused on the closest tooltip to the left? I find this more intuitive for my stepchart so that the tooltip displays the info for the current step being moused over.
Unfortunaltey it is not possible, but you can try to replace line chart with, scatter series and setting lineWidth as 2.
plotOptions:{
series:{
lineWidth:2
}
},
example: http://jsfiddle.net/JG83j/

Categories

Resources