I am designing a UI that uses jointjs to draw a graph.

I need to change the background color of the Paper but I see that changing the .viewport css (e.g. background-color: #ff0000; ) this doesn't affect the appearance of the svg.

How can I add color in the background of the jointjs Paper?

thanks

I am designing a UI that uses jointjs to draw a graph.

I need to change the background color of the Paper but I see that changing the .viewport css (e.g. background-color: #ff0000; ) this doesn't affect the appearance of the svg.

How can I add color in the background of the jointjs Paper?

thanks

• javascript
• css
• svg
• jointjs

• 1 create a rect the size of the viewport and set it to the colour you want. – Robert Longson Commented Sep 24, 2015 at 14:08
• @RobertLongson thanks for the answer. I don't see this as a clean approach, meaning that I should then keep track of another cell in case of resize etc. Are you sure there is no other way to do this? thanks – theosem Commented Sep 24, 2015 at 14:11

4 Answers 4

When initializing paper, add background option to paper

var paper = new joint.dia.Paper({
    background: {
       color: '#ff0000'
    }                                                                         
});

You can find more info at Jointjs paper documentation.

The paper is just a normal HTML <div> element so you can set the background-color: #ff00000 on that <div> element rather than on the internal .viewport SVG <g> element.

I changed the svg element style in css to change the paper background color and it works for me. Here is an example.

svg {
    background-color: blue;
}

If you want to change the background of a paper on runtime:

paper.options.background = { color: '#FF0000' };
paper.render()

Testet with jointjs v4.1