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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Using svg pattern fill in column chart

Thread ID:

Created:

Updated:

Platform:

Replies:

148763 Nov 3,2019 07:01 AM UTC Nov 6,2019 03:41 PM UTC Angular - EJ 2 3
loading
Tags: Chart
zia
Asked On November 3, 2019 07:01 AM UTC

Hi
I am new to use Essential JS2 in angular and and I've fallen in love with it for such a short time.
I'm having trouble using svg patterns fill property in column and area charts.I have to use patters fill instead of color fill, to print charts using black and white printers.Can you please help me with this?

Thanks alot...

Srihari Muthukaruppan [Syncfusion]
Replied On November 4, 2019 06:41 AM UTC

Hi Zia,  
  
Greetings from Syncfusion. 

We have analyzed your query. From that we would like to let you know that our chart supports patterns as fill.  By using fill property of the chart series, we can able to apply patterns instead of color for chart series. Based on that we have prepared a sample for your reference. Please find the below sample and code snippet.  
  
  
Code Snippet: 
    <ejs-chart style='display:block;'> 
      <e-series-collection> 
        <e-series [dataSource]='data' type='Column' xName='x' yName='y' name='Gold'  
           width=4 [marker]='marker' fill='url(#chronicPattern)'> </e-series> 
        <e-series [dataSource]='data1' type='Column' xName='x' yName='y'  
           name='Silver' width=4 [marker]='marker' fill='url(#rpiPattern)'> </e-series> 
        <e-series [dataSource]='data2' type='Column' xName='x' yName='y'  
            name='Bronze' width=4 [marker]='marker' fill='url(#cviPattern)'> </e-series> 
      </e-series-collection> 
    </ejs-chart> 
 
<svg width="400" height="110"> 
  <pattern id="chronicPattern" patternUnits="userSpaceOnUse" width="4" height="4"> 
    <rect x="0" y="0" width="100%" height="100%" fill="yellow"></rect> 
    <path d="M-1,1 l2,-2 
        M04 l4-4 
        M35 l2-2" style="stroke:#ccccccstroke-width:1"></path> 
  </pattern> 
  <pattern id="rpiPattern" patternUnits="userSpaceOnUse" width='8' height='8' viewBox='0 0 8 8'> 
    <rect x="0" y="0" width="100%" height="100%" fill="blue"></rect> 
    <path fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z' style="stroke:#cccccc; stroke-width:1" 
      fill-opacity='0.4'></path> 
  </pattern> 
  <pattern id="tagPattern" patternUnits="userSpaceOnUse" width='40' height='1' viewBox='0 0 40 1'> 
    <rect x="0" y="0" width="100%" height="100%" fill="green"></rect> 
    <path d='M0 0h20v1H0z' fill='#cccccc' fill-opacity='0.4' fill-rule='evenodd'></path> 
  </pattern> 
  <pattern id="cviPattern" patternUnits="userSpaceOnUse" width='20' height='20' viewBox='0 0 20 20'> 
    <rect x="0" y="0" width="100%" height="100%" fill="#ff9900"></rect> 
    <g fill='#cccccc' fill-opacity='0.54' fill-rule='evenodd'> 
      <circle cx='3' cy='3' r='3'></circle> 
      <circle cx='13' cy='13' r='3'></circle> 
    </g> 
  </pattern> 
</svg> 
 

 
Screenshot: 
 

Let us know, if you need further assistance.  
  
Regards  
Srihari M 


zia
Replied On November 5, 2019 11:23 AM UTC

Hi Zia,  
  
Greetings from Syncfusion. 

We have analyzed your query. From that we would like to let you know that our chart supports patterns as fill.  By using fill property of the chart series, we can able to apply patterns instead of color for chart series. Based on that we have prepared a sample for your reference. Please find the below sample and code snippet.  
  
  
Code Snippet: 
    <ejs-chart style='display:block;'> 
      <e-series-collection> 
        <e-series [dataSource]='data' type='Column' xName='x' yName='y' name='Gold'  
           width=4 [marker]='marker' fill='url(#chronicPattern)'> </e-series> 
        <e-series [dataSource]='data1' type='Column' xName='x' yName='y'  
           name='Silver' width=4 [marker]='marker' fill='url(#rpiPattern)'> </e-series> 
        <e-series [dataSource]='data2' type='Column' xName='x' yName='y'  
            name='Bronze' width=4 [marker]='marker' fill='url(#cviPattern)'> </e-series> 
      </e-series-collection> 
    </ejs-chart> 
 
<svg width="400" height="110"> 
  <pattern id="chronicPattern" patternUnits="userSpaceOnUse" width="4" height="4"> 
    <rect x="0" y="0" width="100%" height="100%" fill="yellow"></rect> 
    <path d="M-1,1 l2,-2 
        M04 l4-4 
        M35 l2-2" style="stroke:#ccccccstroke-width:1"></path> 
  </pattern> 
  <pattern id="rpiPattern" patternUnits="userSpaceOnUse" width='8' height='8' viewBox='0 0 8 8'> 
    <rect x="0" y="0" width="100%" height="100%" fill="blue"></rect> 
    <path fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z' style="stroke:#cccccc; stroke-width:1" 
      fill-opacity='0.4'></path> 
  </pattern> 
  <pattern id="tagPattern" patternUnits="userSpaceOnUse" width='40' height='1' viewBox='0 0 40 1'> 
    <rect x="0" y="0" width="100%" height="100%" fill="green"></rect> 
    <path d='M0 0h20v1H0z' fill='#cccccc' fill-opacity='0.4' fill-rule='evenodd'></path> 
  </pattern> 
  <pattern id="cviPattern" patternUnits="userSpaceOnUse" width='20' height='20' viewBox='0 0 20 20'> 
    <rect x="0" y="0" width="100%" height="100%" fill="#ff9900"></rect> 
    <g fill='#cccccc' fill-opacity='0.54' fill-rule='evenodd'> 
      <circle cx='3' cy='3' r='3'></circle> 
      <circle cx='13' cy='13' r='3'></circle> 
    </g> 
  </pattern> 
</svg> 
 

 
Screenshot: 
 

Let us know, if you need further assistance.  
  
Regards  
Srihari M 


Hi
Thank you very much for your reply.
Everything is ok,but I have a big problem with printing the chart.
I used the ES 2 print guide(https://ej2.syncfusion.com/angular/documentation/chart/chart-print/).Unfortunately, the print result does not include any pattern fill and I only see white columns.l tested that on your sample on stackblitz and there was the same problem.
Please help me to fix that...
Thanks a lot.

Srihari Muthukaruppan [Syncfusion]
Replied On November 6, 2019 03:41 PM UTC

Hi Zia, 
 
Thanks for being patience. 
 
We have analyzed your query. From that, we would like to let you know that , it is not possible to print the patterns, since we could print only the content present inside the chart SVG. And patterns are defined in separate SVG hence it is not possible to print the pattern in chart. 
 
Let us know if you have any concerns. 
 
Regards 
Srihari M  


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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon 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.Close Icon

Live Chat Icon For mobile
Live Chat Icon