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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Canvas color

Thread ID:





123659 Apr 7,2016 08:39 AM UTC Jun 13,2016 10:11 AM UTC JavaScript 8
Tags: ejDiagram
Sachin Shah
Asked On April 7, 2016 08:39 AM UTC


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

Shyam G [Syncfusion]
Replied On 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

Sachin Shah
Replied On 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

Sachin Shah
Replied On April 9, 2016 02:21 AM UTC

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

Shyam G [Syncfusion]
Replied On 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

Sachin Shah
Replied On June 1, 2016 03:18 AM UTC

Have you released service pack 1 ?

Shyam G [Syncfusion]
Replied On 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 

Sachin Shah
Replied On 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.

Senthil Kumar M [Syncfusion]
Replied On 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 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon