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.
Unfortunately, activation email could not send to your email. Please try again.

Pattern fill for area charts

Thread ID:

Created:

Updated:

Platform:

Replies:

127787 Dec 8,2016 12:42 PM Dec 13,2016 08:09 AM ASP.NET MVC 4
loading
Tags: Chart
Dennis Kroger
Asked On December 8, 2016 12:42 PM

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 [Syncfusion]
Replied On December 9, 2016 05:23 AM

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. 


Dennis Kroger
Replied On December 12, 2016 10:41 AM

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
Replied On December 12, 2016 12:50 PM

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 [Syncfusion]
Replied On December 13, 2016 08:09 AM

Hi Dennis, 

Most welcome. 

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

Regards, 
Anand 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;