Re-use dataview JavaScript query - Obsidian charts hsla color doesn't render

Help
1

What I’m trying to do

I’m trying to re-use a script that I have for my daily notes which uses Obsidian chart to render a pie chart. I’m using dv.view() to place the script in a common folder. In this script, I have a function that generates random hsla color code based on certain inputs.

function randomHSL(i, l){
	return `hsla(${~~(360 * (i / l))}, 70 %, 70 %, 0.8)`;
}

When I use this function in the inline dataview script, it works fine, but when I use it in a separate script file and render it using dv.view("Scripts/dailyTaskDistribution");, it doesn’t render the chart with colors, even though I can see that the color is being generated - verified using console.log.

const randColors = events.map((e, index) => randomHSL(index, events.length));

const chartData = {  
    type: 'doughnut',
	data : {
	  labels : labels,
	  datasets : [ {
	    backgroundColor : randColors,
	    data : data
	  } ]
	}
}


dv.el("h4", "Task Type Chart");
window.renderChart(chartData, this.container);

Additionally if I replace the color generation with CSS color names, it seems to be working fine.

	    backgroundColor : ['palegreen', 'khaki', 'mediumpurple', 'lightsalmon'], // randColors,

Is anyone facing similar issue?

2

The problem isn’t the color generation, it’s the fact that you don’t pass the data in to the view script. See my response on the other post you made.