Here is example of my stack bar chart, where i am facing issue in x-axis label where last label is overflowing - https://codepen.io/daksh-khot/pen/pvzRvpv
Also, Need my chart should be drag within first and last label of x-axis.
Any quick suggestion/remedy/help will be of great help.
For x-axis overflowing, you can just remove the layout.xaxis.range = [-1, 8]. That is setting the limits. If you want it to be cut on “Indent Reports”, you can put a range up to 8.5 instead of 8 (but there are many other entries to the right of it).
The other question/issue I did not understand.
Hi @filipesmg Thanks for reply, but i want to provide range to show only limited set of bars and rest on dragging them to right. so making range 8.5 will prevent me from showing the half bar( which we actually wanted as a requirement). also i just want label to not overflow is there a way to cut label
If you want the bar to be cut in half, I don’t see the problem. For me, the label does not seem to be cut:
I want the label should be shown till Indent R → rest (eports) on draging right side
I undertand now - you want it to be cut. I’m not sure how to do that. If you remove the right margin by setting:
layout.margin.r = 0;
It will be cut a little. One workaround that seems to work on this example (but would have to be checked case by case) is also to “cut” the main-svg:
#myDiv svg.main-svg {
width: calc(100vw - 50px);
}
Maybe someone can give another (better) option.
Wrap the graph inside another<div>and remove the right margin, configure the overflow of the layer that wraps and that’s it, this will only solve the problem of the overflow on the right side since by having the “y” axis visible on the left side you will continue to have the overflow on that side due to the space occupied by the “y” axis. You could also use the axis property, ticklabeloverflow with the value “hide past domain” but this will hide the label completely when it exceeds the domain
For the second question, there are the axis properties, minallowed and maxallowed, although after testing them I see that when reaching the limit if you continue dragging it starts to zoom, I don’t know if it’s an error or if it’s the default behavior of these properties. In this case, since the first bar has index 0, you can set minallowed to -1 to leave a space to the left before the first bar, and since the last bar has index 13, you can set maxallowed to 14 to leave space to the right of the last bar.
Thanks @Saratoga @filipesmg for your valuable input which help me to resolve above issue,
So one more issue i am facing is can we change hover icon on mouse hover on bars , when dragmode pan is on
Thanks @Saratoga This works for me, but it doesn’t allow me to show tooltip on hover of bars
