How to Use SVG Linear Gradient for React Area Chart with CSS?

This article demonstrates how to apply multiple SVG linear gradients to an Area in a React.js application using inline SVG and CSS. Instead of defining gradients in a separate HTML file, the gradients are embedded directly within the React Chart component, making the implementation modular and reusable.

The approach involves:

• Defining gradient styles using a CSS string (SAMPLE_CSS) that targets two gradients: gradient-chart1 (red) and gradient-chart2 (blue). Each gradient uses two stop elements with different offset values to create a fade effect from semi-transparent to fully transparent.
• Injecting the CSS into the DOM using a style tag inside the component.
• Creating an invisible SVG block using <svg style={{ height: 0 }}> that contains defs with two linearGradient definitions.
• Referencing the gradients in the chart series using fill=“url(#gradient-chart1)” and fill=“url(#gradient-chart2)”.
• Rendering two area series with different data sources, colors, and widths.

This method ensures that the gradients are scoped to the component and can be dynamically styled or reused across charts.

Code Example

const SAMPLE_CSS = `
 #gradient-chart1 stop {
   stop-color: red;
 }
 #gradient-chart1 stop[offset="0"] {
   stop-opacity: 0.25;
 }
 #gradient-chart1 stop[offset="1"] {
   stop-opacity: 0;
 }
 #gradient-chart2 stop {
   stop-color: blue;
 }
 #gradient-chart2 stop[offset="0"] {
   stop-opacity: 0.25;
 }
 #gradient-chart2 stop[offset="1"] {
   stop-opacity: 0;
 }
`;

function Chart() {
 return (
   <div>
     {/* Inject gradient CSS */}
     <style>{SAMPLE_CSS}</style>

     {/* Chart component with two area series */}
     <ChartComponent id="charts">
       <SeriesCollectionDirective>
         <SeriesDirective
           name="Compact"
           dataSource={COMPACT}
           xName="x"
           yName="y"
           fill="url(#gradient-chart1)"
           type="Area"
           width={2}
           border={{ width: 2, color: 'red' }}
         />
         <SeriesDirective
           name="Downloads"
           dataSource={DOWNLOADS}
           xName="x"
           yName="y"
           fill="url(#gradient-chart2)"
           type="Area"
           width={5}
           border={{ width: 2, color: 'blue' }}
         />
       </SeriesCollectionDirective>
     </ChartComponent>

     {/* Inline SVG gradient definitions */}
     <svg style={{ height: 0 }}>
       <defs>
         <linearGradient id="gradient-chart1" x1="0" x2="0" y1="0" y2="1">
           <stop offset="0" />
           <stop offset="1" />
         </linearGradient>
         <linearGradient id="gradient-chart2" x1="0" x2="0" y1="0" y2="1">
           <stop offset="0" />
           <stop offset="1" />
         </linearGradient>
       </defs>
     </svg>
   </div>
 );
} 

Output

Live Sample

Try it out on StackBlitz: StackBlitz Sample

Conclusion

I hope you enjoyed learning about how to use SVG linear gradient for React Area Chart with SVG and CSS?.

You can refer to our React Chart’s feature tour page to learn about its other groundbreaking feature representations. You can also explore our React Chart Documentation to understand how to present and manipulate data.

For current customers, you can check out our React components on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to explore our React Chart and other React components.

If you have any queries or require clarifications, please let us know in the comments below. You can also contact us through our support forums, Direct-Trac or feedback portal, or the feedback portal. We are always happy to assist you!