Using svg pattern fill in column chart

[zia]

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]

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.  

  

Sample: https://stackblitz.com/edit/angular-phygfz-5uzhzh?file=app.component.html 

  

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 

        M0, 4 l4, -4 

        M3, 5 l2, -2" style="stroke:#cccccc; stroke-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]

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.  

  

Sample: https://stackblitz.com/edit/angular-phygfz-5uzhzh?file=app.component.html 

  

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 

        M0, 4 l4, -4 

        M3, 5 l2, -2" style="stroke:#cccccc; stroke-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]

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