I am cloning styles many times using mxUtils.clone() using the defaultVertexStyle as the cloned item, however when I set style[mxConstants.STYLE_FONTCOLOR] = '#etcetc' it does not then render in the graph.

All the other styles set correctly, fillcolor, alignment and so on - but the font colours do not appear. It's always black!

The property on the style object IS set - it just has no effect.

Is this a bug?


  1. Create a global style variable, from the getDefaultVertexStyle()
  2. loop an array, create new style for each item in the array (using clone(style)), set the properties such as fillcolor, fontcolor using style[mxConstants.Property] = 'etc'
  3. Add the style to the stylesheet using graph.getStylesheet().putCellStyle('an id', styleObj)
  4. When I call insertVertex, I pass in the corresponding id used in the "putCellStyle"
  5. view page - all properties on the dynamic styles are correct, except the font color?

asked 26 Apr '11, 05:32

SpaceBison's gravatar image

accept rate: 0%

edited 18 Dec '12, 09:39

David's gravatar image


This works for me:

var style = mxUtils.clone(graph.getStylesheet().getDefaultVertexStyle());
style[mxConstants.STYLE_FONTCOLOR] = '#00FF00';
graph.getStylesheet().putCellStyle('xyz', style);
graph.insertVertex(graph.getDefaultParent(), null, 'ABC', 10, 10, 80, 30, 'xyz');

answered 27 Apr '11, 08:10

Gaudenz's gravatar image

accept rate: 39%

edited 18 Dec '12, 09:40

David's gravatar image


Hi, thanks for your reply - I think in a standard example, yes, everything is fine, however in the usage I have it does not work. To take this any further I think I need to illustrate how I handle the creation of the styles and how they are applied and WHAT they're applied to.

This is what I have:

This first function creates the base swimlane style, then loops an array and sub-array in a returned json object and creates all the individual styles which have different colours, etc

function createDynamicStyles(json) {
    style = graph.getStylesheet().getDefaultVertexStyle();
    style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_SWIMLANE;
    style[mxConstants.STYLE_VERTICAL_ALIGN] = 'top';
    style[mxConstants.STYLE_FONTSIZE] = 11;
    style[mxConstants.STYLE_STARTSIZE] = 22;
    style[mxConstants.STYLE_HORIZONTAL] = false;

$.each(json.MyArray, function (i, obj) {
    $.each(obj.SubArray, function (i, subObj) {
        setStyle(obj.Id, obj.ForeColor, obj.BackColor);


and to set up the styles in the stylesheet:

function setStyle(id, foreColor, backColor) {
    var newStyle = mxUtils.clone(style);
    newStyle[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_RECTANGLE;
    newStyle[mxConstants.STYLE_FONTSIZE] = 9;
    newStyle[mxConstants.STYLE_ROUNDED] = false;
    newStyle[mxConstants.STYLE_HORIZONTAL] = true;
    newStyle[mxConstants.STYLE_VERTICAL_ALIGN] = 'middle';
    newStyle[mxConstants.STYLE_FILLCOLOR] = '#' + backColor.toString();
    newStyle[mxConstants.STYLE_FONTCOLOR] = '#' + foreColor.toString();
    graph.getStylesheet().putCellStyle(id.toString(), newStyle);


then I add an item to a specific pool of the swimlane, like this. The "container" here is a specific pool, within the swimlane. So in a typical scenario, the graph will have 4 lanes and I insert rectangular nodes to specific lanes, rather than the external container.

function addToSwimlane(container, customObj, xPos, yPos, width, height) {
    return graph.insertVertex(container, customObj.Id, customObj, xPos, yPos, width, height, customObj.Id.toString());


If a simple example works and mine doesn't, something is getting lost somewhere - My font_color IS being set to the correct value, so what stops it rendering with the correct color?



answered 28 Apr '11, 02:48

SpaceBison's gravatar image

accept rate: 0%

edited 18 Dec '12, 09:41

David's gravatar image


What's the value of graph.getCellStyle(cell)[mxConstants.STYLE_FONTCOLOR]?

(28 Apr '11, 03:32) Gaudenz

I'll take a look - is there an easy to way to get an instance of a "cell" to pass into here? Haven't really accessed cells before in code.

(28 Apr '11, 04:12) SpaceBison

Use the return value of insertVertex for cell.

(28 Apr '11, 07:33) Gaudenz
Your answer
toggle preview

Follow this question

By Email:

Once you sign in you will be able to subscribe for any updates here



Answers and Comments

Markdown Basics

  • *italic* or _italic_
  • **bold** or __bold__
  • link:[text](http://url.com/ "title")
  • image?![alt text](/path/img.jpg "title")
  • numbered list: 1. Foo 2. Bar
  • to add a line break simply add two spaces to where you would like the new line to be.
  • basic HTML tags are also supported



Asked: 26 Apr '11, 05:32

Seen: 2,826 times

Last updated: 18 Dec '12, 09:41