Scaling background image

[Bertrand Spitz]

Hi,

I have to add a background image to a graph but it must be scaled which means that the features in the images must match with the scale as shown in the example below comming from another application.

Is it possible to do something like that with the chart component?

In fact in the IDE I previously used there was a feature called PlotImage, but I couldn't  find domething equivalent in the Syncfusion chart.

It must also be possible to adjust the opacity of the picture.

Thank you

[Swetha Babu]

Hi Bertrand,

Greetings from Syncfusion.

We can add the background image for chart but we do not have support to scale the image based on the chart zooming. Please get back to us if you need further assistance.

Regards,

Swetha

[Bertrand Spitz]

Thank you for the reply.

We have to migrate and modernize an old application using new development tools and I try to find the tools which can reproduce the features we had so far.

Having a background image in the chart is one of them.

With Syncfusion we can only add a background to the chart component but not, as shown below, to the chart area only, is that correct?

Or is there a way to work around this limitation?

If yes, is it possible to get the position and the size of the chart area in pixels? So I could resize the image myself to fit with the XY scales in the chart.

Thank you

[Swetha Babu]

Hi Bertrand,

We have considered the reported scenario of Background image is not rendered as a bug and logged a defect report for the same. The fix for the reported scenario will be included in our weekly patch release which is expected to be rolled out on 27^th December 2022. Please find the below feedback link to keep track of the reported scenario.

Feedback link: https://www.syncfusion.com/feedback/39717/background-image-for-chart-area-is-not-rendered

If you have any more specifications/precise replication procedure to be followed, please add it as a comment in the portal.

Regards,

Swetha

[Durga Gopalakrishnan]

Hi Bertrand,

We are glad to announce that our v20.4.0.40 patch release is rolled out; we have added the fix for reported issue. You can use the latest Syncfusion.Blazor.Charts NuGet package.

NuGet Package : https://www.nuget.org/packages/Syncfusion.Blazor.Charts/

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance.

Regards,

Durga Gopalakrishnan.

[Bertrand Spitz]

Thank you very munch for this feedback.

There is one question in the post that I didn't get an answer for.

Is there a way to retrieve the position and the size of the chart area in pixels?

As I need to scale the background image to fit with the axis on the chart.

Therefore I need to know the size of the chart area in pixels.

Thank you

[Durga Gopalakrishnan]

Bertrand,

Most welcome. As of now, we don’t have support to retrieve the chart area bounds value in any of the event. We have stored the chart size as internal values. Please let us know if you have any other concerns.

[Bertrand Spitz]

Hi,

Do you think that retriving the chart area bounds will one day be implemeted in your chart component?

So I could make the chart background transparent and add a canvas with the image correctly scaled behind.

Thank you for your support

Bertrand

[Durga Gopalakrishnan]

Bertrand,

We suggest you to use OnAxisActualRangeCalculated event to get area bounds height and width as per your requirement. Please check with the below snippet and sample.

<SfChart>

    <ChartEvents OnAxisActualRangeCalculated="RangeCalculated"></ChartEvents>

</SfChart>

@code {

    public double Count = 0;

    public void RangeCalculated(AxisRangeCalculatedEventArgs Args)

    {

        if (Args.AxisName == "PrimaryYAxis")

        {

            Count++;

            if (Count == 3)

                Console.WriteLine("Bounds Height : " + Args.Bounds.Height);

        }

        if (Args.AxisName == "PrimaryXAxis")

        {

            Count++;

            if (Count == 4)

                Console.WriteLine("Bounds Width : " + Args.Bounds.Width);

        }

    }

}

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/AreaBounds130110539.zip

Please let us know if you have any concerns.