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

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?

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.

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.