Pattern fill for area charts

[Dennis Kroger]

Can I use a pattern image file (custom brush) for filling under curves in area chart or step area chart as opposed to solid colors?

[Dharanidharan Dharmasivam]

Hi Dennis, 

Thanks for using syncfusion product. 

We have analyzed your query and your requirement can be achieved as workaround. We have prepared a sample with respect to your requirement. In the sample we have appended svg pattern in dom and then we have applied to chart in loaded event. Kindly find the code snippet below, 

ASP.NET MVC: 

<svg width="400" height="110"> 

    <pattern id="pattern" 

             x="0" y="0" width="24" height="24" 

             patternUnits="userSpaceOnUse"> 

        <rect fill="rgba(159, 188, 191, 0.4)" x="0" width="12" height="12" y="0" /> 

        <rect fill="rgba(159, 188, 191, 0.4)" x="12" width="12" height="12" y="12" /> 

    </pattern> 

</svg> 

 

@(Html.EJ().Chart("container") 

  //... 

  .Loaded("chartLoaded") 

) 

 

function chartLoaded(sender) { 

       $("#"+this.svgObject.id +"_Series0")[0].setAttribute("fill", "url(#pattern)"); 

    } 

Screenshot: 

 

For your reference we have attached the sample. Kindly find the sample from below location. 

Sample Link: http://www.syncfusion.com/downloads/support/forum/127787/ze/chart_fill_pattern1234986854  

Thanks, 

Dharani. 

[Dennis Kroger]

Thank you for your response. It helps. However, I am rather new to JavaScript and would like to know how I would use a gif file as the fill pattern using a path such as '~/images/pattern.gif'.

I tried replacing "url(#pattern)"  with "url(~/images/pattern.gif)" but that filled with a black brush. Am I just missing something in the syntax or is it not possible to use a gif or bitmap file?

[Dennis Kroger]

Thanks, I figured out how to use the gif image.

ASP.NET MVC: 

<svg width="400" height="110"> 

    <pattern id="pattern" 

             x="0" y="0" width="24" height="24" 

             patternUnits="userSpaceOnUse"> 

    <image xlink:rel='nofollow' href="~/images/pattern.gif" x="0" y="0" width="24" height="24" />

    </pattern> 

</svg> 

 

@(Html.EJ().Chart("container") 

  //... 

  .Loaded("chartLoaded") 

) 

 

function chartLoaded(sender) { 

       $("#"+this.svgObject.id +"_Series0")[0].setAttribute("fill", "url(#pattern)"); 

    } 

Thanks again.

[Anandaraj T]

Hi Dennis, 

Most welcome. 

Please let us know if you need further assistance on this. 

Regards, 

Anand