How to export the Diagram along with background color in React?

This article explains how to export the diagram along with the background color in React.

In React Diagram control, you can export the diagram in specific formats such as SVG, PNG, and JPG. To export and print the diagram, the PrintAndExport module should be injected into the sample. The diagram can be exported with several export options such as region, mode, filename, pageWidth, and more. It can also be exported with a background color that is set for the diagram. The following code shows how to set the background color dynamically for the diagram page and export that diagram.

Index.Js

//To render the diagram with background color
       <diagramcomponent id="diagram" ref="{(diagram)" ==""> (diagramInstance = diagram)}
           width={'100%'}
           height={'700px'}
           nodes={nodes}
           pageSettings={{
             height: 700,
             width: 1250,
             background: { color: 'transparent' },
           }}
       </diagramcomponent>
   //To render the color picker 
       <colorpickercomponent id="inline-palette" mode="Palette" value="#000" change="{change}"></colorpickercomponent>
 const change = (args) => {
   diagramInstance.pageSettings.background = { color: args.currentValue.rgba };
   diagramInstance.dataBind();
 };
 
 document.getElementById('Export').onclick = function () {
   var options = {};
   options.mode = 'Download';
   options.stretch = 'None';
   options.margin = { left: 20, right: 20, top: 20, bottom: 20 };
   options.region = 'PageSettings';
   options.pageHeight = 700;
   options.pageWidth = 1250;
   options.fileName = 'export';
   diagramInstance.exportDiagram(options);
 };

In the given code, a color picker control is employed to select the color for the diagram’s background page. When a color is chosen using the color picker, the color picker’s change event is triggered. During this event, the user-selected color is applied to the diagram’s pageSettings’ background property. Subsequently, you can click the export button to export the diagram to an image format.

Refer to the working sample for additional details and implementation: Sample

Conclusion

We hope you enjoyed learning about how to export the Diagram along with background color in React.

You can refer to our React Diagram feature tour page to know about its other groundbreaking feature representations and documentation. You can also explore our React Diagram example to understand how to present and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our React Spreadsheet and other 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, BoldDesk Support, or feedback portal. We are always happy to assist you!