Not sure if this is the place to post - I started using charts in dataviews, but was quite upset that colors did not work. Wonder if more have this problem.
I found a post here in the forum, that had a solution: No colors with Obsidian Charts dataviewjs query - #2 by oopzzozzo.
But the solution did not work for me. After playing around with the approach, I found the workaorund velow. As the above thread is closed, I’m posting my work around here.
Colored charts with dataviews are pretty cool - so I’m glad it works now. I’d think more people here would use it. So I wonder that the workaround is still needed - maybe some else has some other proposals for a fix.
See here’s an example that works for me. The arrayToString
function is a hack, but works for me, even with numbers instead of strings. Probably a JSON print could also help - that didn’t want to rely on other stuff.
Here’s the dataview:
```dataviewjs
// just a helper function
function arrayToString(arr) {
var str = `[`;
var start = true;
for (const element of arr) {
if (start) {
str = str+`'`+element+`'`;
start = false;
} else {
str = str+`, '`+element+`'`;
}
}
str = str + `]`;
return str;
}
// I want to set stuff dynamically, so I need to work with variables
const labelsString = arrayToString(['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange']);
const dataString = arrayToString([12, 19, 3.7, 5, 2, 3]);
// Using variables inside a string for dv.paragraph did not work for me - instead I create the whole string here, and then pass it as a variable
const format =`\`\`\`chart
type: 'bar'
labels: `+labelsString+`
labelColors: true
beginAtZero: true
series:
- data: `+dataString+`
- title: Beispiel Wort
\`\`\``
dv.paragraph(format)
``` (end of dataviewjs)