Using svg pattern in SfChart ChartSeries

[Amir Ihsan]

Hi!

It's possible to fill the color of the chart with a svg / png pattern in the SfChart ChartSeries Area Type chart?

[Gopalakrishnan Veeraraghavan]

Hi Amir,

We have analyzed your query. We suggest filling the color by using an SVG pattern for the Area chart. We added the SVG pattern and then set the URL of the pattern to the Fill API in the ChartSeries property. We have attached a sample and screenshot for your reference. Please check with the below code snippet.

<svg width="100" height="100" xmlns=http://www.w3.org/2000/svg>

    <defs>

        <pattern id="myPattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">

            <circle cx="10" cy="10" r="5" fill="blue" />

        </pattern>

    </defs>

</svg>

 

<ChartSeries DataSource="@ChartPoints" Fill="url(#myPattern)" XName="Country" YName="Children" Name="Age 0-14" Width="2" ColumnSpacing="0.1" Type="ChartSeriesType.Area">

</ChartSeries>

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

Screenshot:

Please revert us if you have any concerns.

Regards,

Gopalakrishnan Veeraraghavan

[Amir Ihsan]

Hi  Gopalakrishnan,

Thanks for your swift response, the code you have provided is very helpful and working fine for me.

Best Regards,

Amir Ihsan

[Gopalakrishnan Veeraraghavan]

Hi Amir,

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

Regards,

Gopalakrishnan Veeraraghavan