Best Practices for Applying Themes to Nebula.js Charts in Mashups

cristian_dalsanto — Wed, 21 Aug 2024 11:01:11 GMT

Hi everyone,

I'm trying to apply a theme to a barchart in my Angular Mashup (Qlik Sense Enterprise)

First I created a theme.json as the following:

export default { "_inherit": true, type: "light", "_variables": { "@myColorLight": "#FFFFFF", "@myColorDark": "#404040", "@black": "#00000", "@white": "#ffffff", "@B25": "#404040", "@B55": "#8b8b8b", "@B80": "#cdcdcd", "@B90": "#e5e5e5", "@B95": "#F2F2F2", "@B98": "#fbfbfb", "@transparent": "rgba(0, 0, 0, 0)" }, "fontFamily": "Roboto, sans-serif", "fontSize": "12px", "_cards": true, "color": "@myColorDark", "backgroundColor": "rgba(0,0,0,0)", "object": { "title": { "main": { "color": "@myColorDark", "fontSize": "16px" }, "subTitle": { "color": "@B55", "fontSize": "14px" }, "footer": { "backgroundColor": "@B98", "fontSize": "12px", "color": "rgba(0, 0, 0, 0.55)", "fontVariant": "regular" } }, "grid": { "line": { "highContrast": { "color": "@B80" }, "major": { "color": "@B90" }, "minor": { "color": "@B90" } } }, "filterpane": { "backgroundColor": "transparent" }, "straightTable": { "header": { "color": "@myColorDark" }, "content": { "color": "@myColorDark" } }, "lineChart": { "title": { "main": { "color": "@myColorDark" } } }, "treemap": { "branch": { "backgroundColor": "@B95" } }, "waterfallChart": { "shape": { "positiveValue": { "fill": "#83AF9B" }, "negativeValue": { "fill": "#AC4D58" }, "subtotal": { "fill": "#b0afae" } } } }, "dataColors": { "primaryColor": "#006580", "othersColor": "#a5a5a5", "errorColor": "#ff4444", "nullColor": "#d2d2d2", "selectionColor": "#52cc52" }, "scales": [ { "name": "Sequential Gradient", "translation": "properties.colorScheme.sequential", "type": "gradient", "propertyValue": "sg", "scale": [ "#006580", "#C4CFDA" ] }, { "name": "Sequential Classes", "translation": "properties.colorScheme.sequentialC", "propertyValue": "sc", "type": "class", "scale": [ "#006580", "#C4CFDA" ] }, { "name": "Diverging gradient", "translation": "properties.colorScheme.diverging", "propertyValue": "dg", "type": "gradient", "scale": [ "#006580", "#C4CFDA", "#87205D" ] }, { "name": "Diverging Classes", "translation": "properties.colorScheme.divergingC", "propertyValue": "dc", "type": "class", "scale": [ "#006580", "#C4CFDA", "#87205D" ] } ], "palettes": { "data": [ { "name": "12 Colors", "translation": "properties.colorNumberOfColors.12", "propertyValue": "12", "type": "pyramid", "scale": [ [ "#01b8aa" ], [ "#01b8aa", "#374649" ], [ "#01b8aa", "#374649", "#fd625e" ], [ "#01b8aa", "#374649", "#fd625e", "#f2c80f" ], [ "#01b8aa", "#374649", "#fd625e", "#f2c80f", "#5f6b6d" ], [ "#01b8aa", "#374649", "#fd625e", "#f2c80f", "#5f6b6d", "#8ad4eb" ], [ "#01b8aa", "#374649", "#fd625e", "#f2c80f", "#5f6b6d", "#8ad4eb", "#fe9666" ], [ "#01b8aa", "#374649", "#fd625e", "#f2c80f", "#5f6b6d", "#8ad4eb", "#fe9666", "#a66999" ], [ "#01b8aa", "#374649", "#fd625e", "#f2c80f", "#5f6b6d", "#8ad4eb", "#fe9666", "#a66999", "#3599b8" ], [ "#01b8aa", "#374649", "#fd625e", "#f2c80f", "#5f6b6d", "#8ad4eb", "#fe9666", "#a66999", "#3599b8", "#dfbfbf" ], [ "#01b8aa", "#374649", "#fd625e", "#f2c80f", "#5f6b6d", "#8ad4eb", "#fe9666", "#a66999", "#3599b8", "#dfbfbf", "#4ac5bb" ], [ "#01b8aa", "#374649", "#fd625e", "#f2c80f", "#5f6b6d", "#8ad4eb", "#fe9666", "#a66999", "#3599b8", "#dfbfbf", "#4ac5bb", "#46c646" ] ] }, ], "ui": [ { "name": "Palette", "colors": [ "#01b8aa", "#374649", "#fd625e", "#f2c80f", "#5f6b6d", "#8ad4eb", "#fe9666", "#a66999", "#3599b8", '#b0afae', '#633d0c', '#f93f17', '#7b7a78', '#545352', '#000000', ] } ], ui2: [ { name: 'Palette', colors: [ '#ffffff', '#46c646', '#276e27', '#b6d7ea', '#7db8da', '#4477aa', '#8e477d', '#ffcf02', '#f8981d', '#f93f17', '#633d0c', '#b0afae', '#7b7a78', '#545352', '#000000', ], }, ], } };

then I applied it to the viz as following:

Palettes in the theme are:

The result is this barchart:

it seems that the colors are applied randomly without respecting their position in the palette array.

Is there anyone who can help me understand how to properly manage the colors from the theme?

I couldn't find documentation about that...

Many thanks

Cristian

topic Best Practices for Applying Themes to Nebula.js Charts in Mashups in Integration, Extension & APIs

Best Practices for Applying Themes to Nebula.js Charts in Mashups