Svg circles not displayed

Elastic Stack Kibana
1

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

2

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

1 Like
3

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

4

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.