We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Pattern fill for area charts

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?


4 Replies

DD Dharanidharan Dharmasivam Syncfusion Team December 9, 2016 10:23 AM UTC

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. 

Thanks, 
Dharani. 



DK Dennis Kroger December 12, 2016 03:41 PM UTC

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?



DK Dennis Kroger December 12, 2016 05:50 PM UTC

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.


AT Anandaraj T Syncfusion Team December 13, 2016 01:09 PM UTC

Hi Dennis, 

Most welcome. 

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

Regards, 
Anand 


Loader.
Up arrow icon