SVG element getting Cut Off

Question

See this DEMO

When hovering on the beginning or end of the X axis, the red dot that marks the position on graph, is getting cut off (either from left or right, respectively).

Any way to avoid this?

Answer 1

Try with the clipPath option.

bb.generate({
    ...,
    clipPath: false
});

EDIT:

• If you don't need to set y Axis min/max value, will work as expected
• If you need to set y Axis min/max, it need some little customization.
  Add onafterinit options as below, and will work as expected.

onafterinit: function() {
    this.mainArea.node().parentNode
        .setAttribute("clip-path",
            this.getClipPath.bind({config:{clipPath:true}})(this.clipId)
        );
}