CircularGaugeAnnotation missing on chart export

[Michael Aston]

Annotations added to the circular gauge chart are not present in the exported image.

            <CircularGaugeAxes>

                <CircularGaugeEvents Loaded=@OnLoaded />

                <CircularGaugeAxis StartAngle="210" EndAngle="150" Minimum="0" Maximum="100" Radius="80%">

                    <CircularGaugeAxisLineStyle Width="10" Color="transparent" />

                    <CircularGaugeAxisLabelStyle>

                        <CircularGaugeAxisLabelFont Size="12px" />

                    </CircularGaugeAxisLabelStyle>

                    <CircularGaugeAxisMajorTicks Height="10" Offset="5" UseRangeColor=@true />

                    <CircularGaugeAxisMinorTicks Height="0" Width="0" UseRangeColor=@true />

                    <CircularGaugeTooltipSettings Enable="true" ShowAtMousePosition="true" />

                    <CircularGaugeAnnotations>

                        <CircularGaugeAnnotation Content="Overall risk rating" Radius="40%" Angle="180" ZIndex="1">

                        </CircularGaugeAnnotation>

                    </CircularGaugeAnnotations>

                    <CircularGaugeRanges>

                        <CircularGaugeRange Start="0" [email protected] [email protected] StartWidth="20" EndWidth="20" RoundedCornerRadius="0" />

                        <CircularGaugeRange [email protected] [email protected] [email protected] StartWidth="20" EndWidth="20" RoundedCornerRadius="0" />

                        <CircularGaugeRange [email protected] End="100" [email protected] StartWidth="20" EndWidth="20" RoundedCornerRadius="0" />

                    </CircularGaugeRanges>

                    <CircularGaugePointers>

                        <CircularGaugePointer [email protected] Radius="60%" PointerWidth="8">

                            <CircularGaugePointerAnimation Enable=@true />

                            <CircularGaugeCap Radius="7" />

                            <CircularGaugeNeedleTail Length="18%" />

                        </CircularGaugePointer>

                    </CircularGaugePointers>

                    <CircularGaugeAxisLabelStyle Format="{value}%" />

                </CircularGaugeAxis>

            </CircularGaugeAxes>

        </SfCircularGauge>

Image from browser

Image from Excel hosting the exported chart, Note the missing "Overall risk rating" text

[Sabari Anand Senthamarai Kannan]

Hi Michael, 

 

Thank you for contacting Syncfusion support. 

 

At present we do not support exporting annotations in the Circular Gauge components. Any HTML elements can be added as annotation in the Circular Gauge. Since the Circular Gauge is a SVG component, some HTML elements may not be supported to be exported as image. 

However, we can export annotations in the Circular Gauge using a workaround. The annotation elements can be added as foreign object to the SVG element of the Circular Gauge, and it can be converted as image using JS interop. The base64 string from the JS interop functions can be returned to the C# and added as image in the Excel document. We will create a sample application for this and update you with further details on May 11, 2021. 

 

Regards, 

Sabari Anand

[Swetha Babu]

Hi Michael, 

 

Thank you for your patience. 

 

We can export the annotations in the Circular Gauge by adding the annotation elements as a foreign object in the SVG element of the Circular Gauge. This is achieved in the JS interop file. The returned base64 string of the exported image is converted into Excel document in the C# side of the application. We have created the Blazor server side application to demonstrate the same and it can be downloaded from the below link. 

 

https://www.syncfusion.com/downloads/support/forum/165221/ze/CircularGaugeExport555486471 

 

In the above application, we have rendered the Circular Gauge using the provided sample code and added the annotation as a foreign object to the SVG element. Please let us know if the above application meets your requirement. 

 

Please let us know if you need any further assistance. 

 

Regards, 

Swetha Babu