ImageUrl in charts does not work

[Ditchford]

Hello

Don't seem to be able to get the following example (from your doco) to work. The Image is not displayed.

Thank you

@using Syncfusion.Blazor.Charts

<SfChart>

    <ChartSeriesCollection>

        <ChartSeries DataSource="@ConsumerReports" XName="X" YName="Y" Type="ChartSeriesType.Line">

            <ChartMarker Visible="true" Height="10" Width="10" ImageUrl="https://ej2.syncfusion.com/demos/src/chart/images/cloud.png">

            </ChartMarker>

        </ChartSeries>

    </ChartSeriesCollection>

</SfChart>

@code{

    public class ChartData

    {

        public double X { get; set; }

        public double Y { get; set; }

    }

    public List<ChartData> ConsumerReports = new List<ChartData>

{

new ChartData{ X= 2005, Y= 28 },

new ChartData{ X= 2006, Y= 25 },

new ChartData{ X= 2007, Y= 26 },

new ChartData{ X= 2008, Y= 27 },

new ChartData{ X= 2009, Y= 32 },

new ChartData{ X= 2010, Y= 35 },

new ChartData{ X= 2011, Y= 30 }

};

}

[Durga Gopalakrishnan]

Hi DitchFord,

Greetings from Syncfusion.

We recommend setting the ChartMarker shape as Image when using ImageUrl in the marker. We have attached a modified sample for your reference. Please check the snippet and screenshot below.

<SfChart>

    <ChartSeriesCollection>

        <ChartSeries>

            <ChartMarker Visible="true" Shape="ChartShape.Image" Height="20" Width="20" ImageUrl="https://ej2.syncfusion.com/demos/src/chart/images/cloud.png">

            </ChartMarker>

        </ChartSeries>

    </ChartSeriesCollection>

</SfChart>

Kindly revert us if you have any concerns.

Regards,

Durga Gopalakrishnan.

Attachment: MarkerShape_178ae089.zip

[Ditchford]

Hello 

Ah, excellent, thank you. FYI, the doco needs updating to reflect this here:

https://blazor.syncfusion.com/documentation/chart/data-markers#images

Is it possible to bind ImageUrl to a property of the DataSource so that I can display different images at each point.  I am plotting wind direction and trying to place an arrow that represents the wind direction in degrees at each point. Tried everything I (and Chat GPT) can think of, but it doesn't appear to like binding. 

Thank you

[Ditchford]

Hello 

Ah, excellent, thank you. FYI, the doco needs updating to reflect this here:

https://blazor.syncfusion.com/documentation/chart/data-markers#images

Is it possible to bind ImageUrl to a property of the DataSource so that I can display different images at each point.  I am plotting wind direction and trying to place an arrow that represents the wind direction in degrees at each point. Tried everything I (and Chat GPT) can think of, but it doesn't appear to like binding. 

Thank you

[Durga Gopalakrishnan]

Thank you for reaching out. We have updated our documentation to include details regarding the Shape property in ChartMarker. This update will be part of our upcoming weekly patch release, scheduled for February 25, 2025. You will be notified once the changes are live.

Currently, please note that binding the ImageUrl property to the DataSource is not supported.

If you have any further questions or concerns, please don’t hesitate to reach out.

[Durga Gopalakrishnan]

Ditchford,

Thanks for being patience.  

We have completed the reported changes and refreshed in live site. Please check with the below documentation link.   

UG : https://blazor.syncfusion.com/documentation/chart/data-markers#images

Kindly revert us if you have any concerns.