Applying color palettes to Lumira Visualization Extensions

Visualization extension developers often ask how to apply Lumira’s color palette to their extensions. It’s now easy to do in Web IDE. Be sure to check out Dong Pan’s guide to creating extensions using Web IDE first, though. The instructions here assume familiarity with visualization extension development and that Web IDE, rather than the older vizpacker utility, has been used to create the extension.

First we have to ensure that our extension has declared its interest in receiving the color palette as a property. We do this in the file flow.js. Newly generated extensions will already have a block of code that looks like this:

element.addProperty({
            name: "colorPalette",
            type: "StringArray",
            supportedValues: "",
            defaultValue: d3.scale.category20().range().concat(d3.scale.category20b().range()).concat(d3.scale.category20c().range())
        });

Existing extensions might not have this code in place. If your extension doesn’t already have this code, add it. Now we can access this property from within our render function (in render.js) as follows:

var colors = this.properties().colorPalette;

In Lumira, the colors applied to your chart’s colorPalette property match those that were selected in the preferences dialog.

Testing the color palette within Web IDE is also easy. In the root folder of your project, find and make a copy of preview.html. Open up the copy and look for the code that specifies chart options, like this:

      require([ "mybundlename-bundle" ], function() {
                    //chart option
                    var chartPoperties = {
                      
                        "mymodulename Module": {
                            borderColor: "none"
                        }
                    };

We need to add the color palette setting for the plot module, as follows:

require([ "testcvomdefaults-bundle" ], function() {
                    //chart option
                    var chartPoperties = {
                      
                        "testcvomdefaults Module": {
                            borderColor: "none"
                        },
                        "plotArea": {
                            colorPalette: ["#9CC677", "EACF5E"] // Apply whichever colors you desire
                        },
                    };

Now just click the run button on the toolbar to run your copy of preview.html and you should see the new colors applied.