Image on Chart Header

[David Warwick]

I am trying to do something like the image below. Basically, I want to add my website logo somewhere on the chart, but I don't want it to be the background image of the chart. Is this possible?

[Durga Gopalakrishnan]

Hi David,

Thanks for using Syncfusion products.

Your requirement can be fulfilled using chart annotations, which allow you to render shapes, text, or images at specific positions within the chart by setting the appropriate coordinate units. We’ve prepared a sample based on your scenario for reference.

<SfChart>

   <ChartMargin Top="50"></ChartMargin>

    <ChartAnnotations>

        <ChartAnnotation X="@data" Y="10%" CoordinateUnits="Units.Pixel" Region="Regions.Chart">

            <ContentTemplate>

                <img src="https://www.middlebury.edu/institute/sites/default/files/styles/960x540/public/2023-04/4.10.23_GreatWhiteSmile_WikipediaCommons.png?fv=xjb30nQ4&itok=rrWpPlPJ"

                alt="Description of image" width="120" height="100">

            </ContentTemplate>

        </ChartAnnotation>

    </ChartAnnotations>

</SfChart>

 

@code {

    string data = "7%";

}

UG : https://blazor.syncfusion.com/documentation/chart/chart-annotations

Kindly revert us if you have any concerns.

Regards,

Durga Gopalakrishnan.

Attachment: ChartAnnotation_da662e36.zip

[David Warwick]

Thank you. That works well.

[Durga Gopalakrishnan]

Most welcome. Please get back to us if you need any further assistance. We are always happy in assisting you.