How to apply gradient color in Blazor Bar Chart

[Syncfusion Support]

Query: How to apply gradient color in Blazor Bar Chart  

Answer:

Using SVG gradients the gradient color can be applied in the Bar chart. Here is the code snippet for your reference.

<EjsChart>  

<ChartSeriesCollection>  

        <ChartSeries DataSource="@barChartData" XName="x" YName="y" Name="Imports" Fill="url(#gradient-chart1)" Type="ChartSeriesType.Bar"/>     

       

        <ChartSeries DataSource="@barChartData" XName="x" YName="y1" Name="Exports" Fill="url(#gradient-chart2)" Type="ChartSeriesType.Bar"/>                    

    </ChartSeriesCollection>  

</EjsChart>  

  

<svg style="height: 0">     

    <defs>  

        <linearGradient id="gradient-chart1" x1="0%" y1="0%" x2="100%" y2="0%">  

            <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />  

            <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />  

        </linearGradient>  

        <linearGradient id="gradient-chart2" x1="0%" y1="0%" x2="100%" y2="0%">  

            <stop offset="0%" style="stop-color:rgb(0,255,0);stop-opacity:1" />  

            <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />  

        </linearGradient>  

    </defs>  

</svg>  

Find the sample for to fill gradient color in bar Chart from here.

[Pascal Thomé]

Hi,

Gradient color is well displayed on screen but the series with gradient color are missings in the exported image file.

Is it possible to export to image with gradient color ?

Regards

[Srihari Muthukaruppan]

Hi Pascal, 

 

Sorry for the inconvenience. 

 

As of now we don’t have support to achieve your requirement since gradient has been provided outside the svg content. We have considered the reported scenario as an improvement and logged a feature request for this. This feature will be available in any of our releases. We appreciate your patience until then. You can keep track of the feature request from the feedback portal below.  

  

Feedback Link: https://www.syncfusion.com/feedback/25132/need-to-provide-support-to-export-chart-along-with-gradient 

 

The provided feedback link is private, and you need to login to view this feedback.  

   

If you have any more specifications/precise replication procedures or a scenario to be tested, you can add it as a comment in the portal.  

  

Regards, 

Srihari M