Svg circles not displayed

[bterhorst (Benny ter Horst)]

Hi all,

I'm trying to create a visual where circles are displayed after being populated with data.

The problem I'm having is that the circles are present but only if you hover over them with the mouse.

Below is an example of my html.

<div ng-controller="IntersectionController" class="chart" id="chart-1">
    
    <svg xmlns="http://www.w3.org/2000/svg">
        <circle cx="40" cy="40" r="24" style="stroke:#006600; fill:#00cc00;"/>
    </svg>
    
    <svg xmlns="http://www.w3.org/2000/svg">
        <rect x="10" y="10" height="100" width="100" style="stroke:#006600; fill: #00cc00"/>
    </svg>
    
</div>

When displayed in a custom visual only the rectangle below is visable.

Regards benny

[bterhorst (Benny ter Horst)]

I saw there is a kibana style class called circle that sets the opacity to zero.

Override this when appending the circle is an acceptable workaround to the issue: .style("opacity", 1)

Regards benny

[Brandon_Kobel]

@bterhorst I'm glad you were able to figure out your issue, and thanks for sharing your solution here for others!