We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Canvas color


I set a background image thru API.. Now, I added few diagrams.. which has transparent backgound.. Instead of showing image.. it showing white grid canvas.. how to get  transparent diagram and grid canvas ?


Attachment: Untitled_9a547c6d.zip

8 Replies

SG Shyam G Syncfusion Team April 8, 2016 04:54 AM UTC

Hi Sachin,

Please set pageSettings pageBackgroundColor as transparent to achieve your requirement. please refer to the code example, help documentation and JSPlayground link.

Code example:


          //setting pagebackgroundcolor as transparent

            pageSettings: { pageBackgroundColor: "transparent" },


Help documentation link:http://help.syncfusion.com/js/diagram/page-settings

JSPlayground link:http://jsplayground.syncfusion.com/ccqpdekw

Also if you need to hide the gridlines, please follow the below code example.

Code example:


           //hiding the gridlines

            snapSettings:{snapConstraints:ej.datavisualization.Diagram.SnapConstraints.All &~ ej.datavisualization.Diagram.SnapConstraints.ShowLines},         

Shyam G

SS Sachin Shah April 9, 2016 02:20 AM UTC

Thanks Shyam,

It works great...

$("#diagram_0").ejDiagram({ backgroundImage: item.Background });
var diagram = $("#diagram_0").ejDiagram("instance");

var options = {
    mode: "data"
var image0 = diagram.exportDiagram(options);

But It does not include background image. (on screen its s

SS Sachin Shah April 9, 2016 02:21 AM UTC

On screen it showing perfect background.. but not in export

SG Shyam G Syncfusion Team April 11, 2016 09:25 AM UTC

Hi Sachin,

We have considered the requirement “ Issue in exporting diagram background image in canvas” as a bug and have logged a report on this. The fix will be included in our Volume 1 Service Pack 1 which has been scheduled to be rolled out by the end of April, 2016.


Shyam G

SS Sachin Shah June 1, 2016 03:18 AM UTC

Have you released service pack 1 ?

SG Shyam G Syncfusion Team June 1, 2016 11:56 AM UTC

Hi Sachin, 

The reported issue “ Issue in exporting diagram background image in canvas” has been fixed in our Essential Studio 2016 Volume 1 Service Pack 1 Release v14.1.0.46 and is available for download under the following link: 

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance. 

Shyam G 

SS Sachin Shah June 10, 2016 10:13 AM UTC


One last request..

How to setup a background image in diagram..

As per your documentation, This api was working before..

 $("#diagram").ejDiagram({ backgroundImage: Base64String });

But now its not working.

SK Senthil Kumar M Syncfusion Team June 13, 2016 10:11 AM UTC

Hi Sachin, 

Please use backgroundImage’s source property to set the image path and set pageSettings “pageBackgroundColor” property as transparent since it will hide the image if it has other than transparent color. 

Please refer to the below code example. 

$scope.backgroundImage = { 
   source: 'https://cdn.syncfusion.com/content/images/company-logos/Syncfusion_Logo_Innovation_with_ease.png' 
$scope.pageSettings = { 
   pageBackgroundColor: "transparent" 
<ej-diagram ng-attr-id="{{ 'object-' + index }}" e-height="500px" e-width="700px" e-nodes="nodes" e-backgroundcolor="backgroundColor" 

Senthilkumar M 

Live Chat Icon For mobile
Up arrow icon