1. Home
  2. Forum
  3. Blazor
  4. Custom Image From Model in ChartMarker

Custom Image From Model in ChartMarker

Essentially I want to set the ChartMarker ImageUrl using a value from my model, rather than hard code an image, is this possible?

        <ChartSeriesCollection>
            <ChartSeries DataSource="@ChartData"  XName="x" YName="y"   Name="Tiger" Type="ChartSeriesType.Column">
                <ChartMarker Shape="ChartShape.Image" Width="36" Height="36" Visible="true"  ImageUrl="https://website.com/img.png">
                </ChartMarker>
                <ChartCornerRadius BottomLeft="10" BottomRight="10" TopLeft="10" TopRight="10"></ChartCornerRadius>
            </ChartSeries>
        </ChartSeriesCollection>


Which works, however I want the image to come from the model.

        <ChartSeriesCollection>
            <ChartSeries DataSource="@ChartData"  XName="x" YName="y"   Name="Tiger" Type="ChartSeriesType.Column">
                <ChartMarker Shape="ChartShape.Image" Width="36" Height="36" Visible="true"  ImageUrl="MyModelImageProperty">
                </ChartMarker>
                <ChartCornerRadius BottomLeft="10" BottomRight="10" TopLeft="10" TopRight="10"></ChartCornerRadius>
            </ChartSeries>
        </ChartSeriesCollection>

Help appreciated

3 Replies 1 reply marked as answer
SM Srihari Muthukaruppan Syncfusion Team August 24, 2020 12:56 PM UTC

Hi Ash, 

Thank you for contacting Syncfusion support. 

We regret to let you know that by default, it is not possible to map the datasource field directly to the ImageUrl property, therefore you need to assign it manually based on a condition through a variable and then assign it to the ImageUrl property. We have shown a simple sample and also code snippet for your reference. Please find the below sample, code snippet and screenshot. 

NOTE: Here, we have assigned the image path directly to a variable, but you can assign it from the datasource to the variable based on your application specific scenarios. 
 
 
Code snippet: 
// add your additional code here 
<ChartSeries DataSource="@ChartData" Name="Germany" XName="xValue" Width="2" 
                     Opacity="1" YName="yValue" Type="ChartSeriesType.Line"> 
            <ChartMarker Shape="ChartShape.Image" Width="36" Height="36" Visible="true" ImageUrl="@MyModelImageProperty"> 
            </ChartMarker> 
        </ChartSeries> 
               // add your additional code here 
            </e-series-collection> 
</ejs-chart>
  // add your additional code here

@code{ 
    private string CurrentUri; 
    public string MyModelImageProperty = "https://ej2.syncfusion.com/demos/src/tab/images/employees/6.png"; 
    // add your additional code here 
} 
  
Screenshot: 
 
 
Please let us know, if you need any further assistance on this. 
 
Regards, 
Srihari M 


Marked as answer
MA Marco February 19, 2021 10:26 AM UTC

The solution that you provided works, but I think he's asking to use a property from the model binded to the Blazor Chart throught the DataSource


If ChartData is like this:


public List<SplineChartData> ChartData = new List<SplineChartData>

    {

        new SplineChartData { Days = "Sun", MaxTemp = 15, AvgTemp = 10, MinTemp = 2, UrlImage = "https://mysite.com/images/sun.png" },

        new SplineChartData { Days = "Mon", MaxTemp = 22, AvgTemp = 18, MinTemp = 12, UrlImage = "https://mysite.com/images/mon.png" },

        new SplineChartData { Days = "Tue", MaxTemp = 32, AvgTemp = 28, MinTemp = 22, UrlImage = "https://mysite.com/images/tue.png" },

        new SplineChartData { Days = "Wed", MaxTemp = 31, AvgTemp = 28, MinTemp = 23, UrlImage = "https://mysite.com/images/wed.png" },

        new SplineChartData { Days = "Thu", MaxTemp = 29, AvgTemp = 26, MinTemp = 19, UrlImage = "https://mysite.com/images/thu.png" },

        new SplineChartData { Days = "Fri", MaxTemp = 24, AvgTemp = 20, MinTemp = 13, UrlImage = "https://mysite.com/images/fri.png" },

        new SplineChartData { Days = "Sat", MaxTemp = 18, AvgTemp = 15, MinTemp = 8, UrlImage = "https://mysite.com/images/sat.png" }

    };


How can I bind the UrlImage property?

I've tried with:


<ChartMarker Shape="ChartShape.Image" Width="36" Height="36" Visible="true" ImageUrl="UrlImage" /> 


but it doesn't work.


Thanks

Marco


SM Srihari Muthukaruppan Syncfusion Team February 22, 2021 11:43 AM UTC

Hi Marco, 
 
We have analyzed your query. From that, we would like to let you know that since marker property is common for all points in the series it is not possible to provide individual imageUrl for each marker. Hence we suggest you to use annotation with coordinate unit as points as shown in our demo sample to achieve your requirement. Please find the demo link and UG link below. 
 
 
 
Let us know if you have any concerns. 
 
Regards, 
Srihari M 


Loader.
Up arrow icon