Unlock a world of possibilities! Login now and discover the exclusive benefits awaiting you.
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:
const themes = [
{
id: 'myTheme',
load: () => Promise.resolve(senseCustomTheme),
},
{
id: 'testTheme',
load: () => Promise.resolve(senseDefaultTheme),
},
];
const baseConfig = embed.createConfiguration({
load: () => Promise.resolve(barchart),
types: [
{
name: "barchart",
load: () => Promise.resolve(barchart),
}
],
themes,
context: {
constraints: { select: false },
theme: 'myTheme',
},
});
const nebbie = baseConfig(this.qlikApp);
const chartDOMElement: any = document.querySelector('#chart-container-home-1');
chartDOMElement.innerHTML = '';
const createConfigChart = {
id: 'a221a10c-42e7-41b5-bdc6-8ef9dac96ff2',
element: chartDOMElement,
properties: {
color: { mode: 'auto' },
},
};
this.viz1 = await nebbie.render(createConfigChart);
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
