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?