How to get default colors values inside extension code?

[Nost]

Hi. I need to get default line chart colors values, so I can use them in my custom line chart, bit i can't find these values

[alex_colombo]

Hi @Nost , with "default line chart colors" you mean the color assigned automatically when you create a new line chart? If so, these colors come from the theme used in the app.
These colors should be applied to your extension as well, without do anything specific. Could you please explain better your requirement?

[Nost]

Sure. Let's think this way - i have 2 extensions in my dashboard. First is native qlik sense line chart and second - is my custom line chart, based on eCharts. So eCharts has other default colors that differ from default colors of native line chart. Then how i can get default colors of first extension(or just default qlik colors) inside of second extension, so than I can use them?

[alex_colombo]

I guess with eCharts you can set your own colors. Colors in Qlik extensions are available when you set into your properties the correct configuration for leveraging what is available for colors.

Below an example of extension properties configuration where we leverage native colors and legend options. Then you can read this information from your JS code and set eCharts configuration with these colors:

definition: {
	type: "items",
	component: "accordion",
	items: {
		dimensions: {
			uses: "dimensions",
			min: 1,
			max: 1
		},
		measures: {
			uses: "measures",
			min: 1,
			max: 1
		},
		sorting: {
			uses: "sorting"
		},
		settings: {
			uses: "settings",
			items: {
				colorsAndLegend: {
					uses: "colorsAndLegend",
					items: {
						"legend": {
							"items": {
								"show": {
									"snapshot": {
										"tid": "property-legend"
									}
								}
							}
						}
					}
				}
			}
		}
	}
},

And below what you should see in properties panel

[Nost]

Thanks! But how can I read them? Look, that's native line chart with autocolors and autolegend, and I need with auto options in my line chart get default colors of native line chart. Native extension is getting them somehow, right? Or colors is just an array of strings in code of extension? 

[alex_colombo · Accepted solution]

Below a way of reading current theme from your extension code and then apply the first palette color to a simple bar chart.

async function getTheme() {
	await $scope.$parent.backendApi.model.enigmaModel.app.enigmaModel.waitForOpen.promise
	//Create session object for app pros
	const appProsDef = {
	  qInfo: {
		qId: "AppPropsList",
		qType: "AppPropsList"
	  },
	  qAppObjectListDef: {
		qType: "appprops",
		qData: {
		  sheetTitleBgColor: "/sheetTitleBgColor",
		  sheetTitleGradientColor: "/sheetTitleGradientColor",
		  sheetTitleColor: "/sheetTitleColor",
		  sheetLogoThumbnail: "/sheetLogoThumbnail",
		  sheetLogoPosition: "/sheetLogoPosition",
		  rtl: "/rtl",
		  theme: "/theme",
		  disableCellNavMenu: "/disableCellNavMenu"
		}
	  }
	};

	const appProsObj = await $scope.$parent.backendApi.model.enigmaModel.app.enigmaModel.createSessionObject(
	  appProsDef
	);
	//Reading app pros
	const appPros = await appProsObj.getLayout();
	const savedTheme = appPros.qAppObjectList.qItems[0].qData.theme;	//retrieve current theme name
	const requestTheme = await fetch('https://qmi-qs-6dc0/resources/assets/external/sense-themes-default/' + savedTheme + '/theme.json');	//hardcoded path just for showing how it works
	const themeData = await requestTheme.json();
	//Here you should check what you have in your extension properties for colors (e.g. dimensionScheme:12, is the default option)
	//Then use that for searching your extension palette in theme data (e.g for dimensionSchema:12 in theme data we have palette.data[0].propertyValue:12 )
	const paletteFirstColor = themeData.palettes.data[0].scale[0]	//hardcoded values just for showing how it works
	document.querySelectorAll('.css_bars_bar').forEach(bar => {
		bar.style.backgroundColor = paletteFirstColor
	})
}

And this is the result. My first palette 12 color is blue

[Nost]

Thanks a lot!

[alex_colombo]

@Nost let me know if this solve your issue