Custom Visual cut off after resizing in Power BI Service

Hi there,

Once thing I'd suggest is that this part of your code needs tweaking to make the visual keep track with the viewport:

this.svgRoot = d3.select(options.element)
    .append("svg")
    .append("g");

This is assigning the variable to the <g> (group) element that you append to the <svg> element, rather than the <svg> element itself.

When you call renderVisual, it's resizing the <g> element, and not the parent <svg>, e.g.:

The parent <svg> (as it has no explicit width & height attributes) will get rendered using the browser default (in my case it's 300 x 150 pixels.

Because the <g> element sits inside it, the parent will never grow to fit it.

It might be better to, set your svgRoot to the actual <svg> element, i.e.:

this.svgRoot = d3.select(options.element)
    .append("svg");

This way, renderVisual will resize the container element, e.g.:

Note that if you still want to group your axis elements, then you'll need to add in the parent <g> to group them somewehre else, as we removed it from the code, but this should allow you to size your SVG canvas with the viewport accordingly.

Good luck!

Daniel