obsidian-charts
obsidian-charts copied to clipboard
[Bug]: stacked lines don't work when rendering with dataviewjs
Describe the bug
When I render the data using chart
and manually entering the values, it displays the stacked line chart correctly:
However when I import the data using dataviewjs, it does not:
Relevant errors (if available)
No response
Steps to reproduce
I created a bar chart first using dataviewjs - that worked and showed the data I wanted.
I then converted the type to line and added the modifiers.
Expected Behavior
I was hoping to get the same display of a stacked line chart from the javascript version so I don't have to manually update the file every week.
Additional context
No response
Code
Code I use to manually update the data:
chart
type: line
legend: true
fill: true
stacked: true
labels: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]
beginAtZero: true
width: 100%
series:
- title: "Day Rating"
data: [4,5,5,5,4, ]
- title: "Mood"
data: [4,5,5,5,5, ]
- title: "Productivity"
data: [4,5,4,5,3, ]
- title: "Creativity"
data: [3,5,5,5,5, ]
- title: "Calmness"
data: [5,5,4,5,5, ]
And the Javascript code:
dataviewjs
const rawData = await dv.query('TABLE file.name, day-rating, overall-mood, Productivity, Creativity, Stress from #eod where contains(thisWeek, "2023-W01") where day-rating')
const rows = rawData.value.values;
const chartData = {
type: 'line',
data: {
legend: 'true',
fill: 'true',
stacked: 'true',
beginAtZero: 'true',
width: '100%',
labels: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
datasets: [
{label: "Day Rating", data: rows.map(x => x[2]), backgroundColor: ['#dde8d7'] },
{label: "Mood", data: rows.map(x => x[3]), backgroundColor: ['#f8cdbf'] },
{label: "Productivity", data: rows.map(x => x[4]), backgroundColor: ['#f4e1b1'] },
{label: "Creativity", data: rows.map(x => x[5]), backgroundColor: ['#dfe1b0'] },
{label: "Calmness", data: rows.map(x => x[6]), backgroundColor: ['#f8d8b6'] },
],
},
}
window.renderChart(chartData, this.container)
### Operating system
macOS