How to set background color for entire diagram area in Blazor Diagram?

In Blazor Diagram, you can apply a background color to either a specific page or the entire diagram. Below are two ways you can implement this:

1. Applying Background Color to a Specific Page:

To set the background color of a specific page, use the Background property of the BackgroundStyle class within the PageSettings class. When applying a background style using PageSettings, it is important to specify the height and width. If not specified, the default dimensions (height: 794 pixels, width: 1123 pixels) will be used.

Code Snippet:

<SfDiagramComponent Height="600px" Nodes="nodes">
<PageSettings Height="300" Width="300">
<BackgroundStyle Background="LightGreen"/>
</PageSettings>
</SfDiagramComponent>

Screenshot:

To learn more about PageSettings, refer to the following link:
https://blazor.syncfusion.com/documentation/diagram/page-settings#how-to-change-the-page-appearance

You can download the complete working sample from here.

2. Applying Background Color to the Entire Diagram:

You can set the background color for the entire diagram using CSS by targeting the e-diagram class.

Code Snippet:

<style>
   .e-diagram{
       background-color:yellow;
   }
</style>

Screenshot:

You can download the complete working sample from here

Conclusion

We hope you enjoyed learning how to set background color for the entire diagram area in Blazor Diagram.

You can refer to our Blazor Diagram feature tour page to learn about its other groundbreaking features, documentation, and how to quickly get started with configuration specifications. You can also explore our Blazor Diagram example to understand how to create and manipulate data.

For current customers, our Blazor components are available on the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to evaluate our Blazor Diagram and other Blazor components.

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