Obsidian Charts: Interactive Charts into your Vault
Another visual representation of your vault
Ever wanted to have a representation of some values you track in your vault? For example, you perhaps have daily notes where you input your weight every day. It could be nice if you could visualize your weight loss through charts…
Well, it is possible thanks to Obsidian Charts! You will also need Dataview to be able to work with dynamic values.
Base syntax
Obsidian Charts supports the YAML syntax to set properties. Here is a base example:
```chart
type: ""
labels: []
series:
- title: ""
data: []
- title: ""
data: []
```- charts: we use it to indicate Obsidian we’re dealing with Obsidian Charts.
- labels: the labels of your chart.
- series: the series of your chart. You can give them a title (not mandatory).
So, concretely, how it works. Let’s consider the chart below (it’s an example in the official documentation):
And let’s analyze its code:
```chart
type: bar
labels: [Monday,Tuesday,Wednesday,Thursday,Friday, Saturday, Sunday, "next Week", "next Month"]
series:
- title: Title 1
data: [1,2,3,4,5,6,7,8,9]
- title: Title 2
data: [5,4,3,2,1,0,-1,-2,-3]
```- type: “bar”, because we want to display a bar chart. The other types are “pie”, “doughnut”, “line”, “polarArea”, and “radar”.
- labels: explicit.
- series: here we have two series. Each one with a different title, and a different color assigned by Obsidian Charts.
If you’ve understood, you should have an idea about what the following code will plot (it’s also an example from the doc):
```chart
type: line
labels: [Monday,Tuesday,Wednesday,Thursday,Friday]
series:
- title: Title 1
data: [1,2,3,4,5]
- title: Title 2
data: [5,4,3,2,1]
- title: Title 3
data: [8,2,5,-1,4]
```
I’ve tried to copy-paste your code and I’ve got an error :(
Well, don’t forget that Obsidian Charts understands YAML syntax. So you have to respect indentation. This code won’t work:
```chart
type: line
labels: [Monday,Tuesday,Wednesday,Thursday,Friday]
series:
- title: Title 1
data: [1,2,3,4,5]
- title: Title 2
data: [5,4,3,2,1]
- title: Title 3
data: [8,2,5,-1,4]
```This one won’t too:
```chart
type: line
labels: [Monday,Tuesday,Wednesday,Thursday,Friday]
series:
- title: Title 1
data: [1,2,3,4,5]
- title: Title 2
data: [5,4,3,2,1]
- title: Title 3
data: [8,2,5,-1,4]
```But this one will:
```chart
type: line
labels: [Monday,Tuesday,Wednesday,Thursday,Friday]
series:
- title: Title 1
data: [1,2,3,4,5]
- title: Title 2
data: [5,4,3,2,1]
- title: Title 3
data: [8,2,5,-1,4]
```Visual editor
If you want to simplify your work, you can use the visual editor provided by Obsidian Charts. Just open the command palette and look for the “Insert new chart” command. It will open a nice editor allowing you to insert a new chart easily.
Dataview integration
The above examples are very limited because they can’t work with dynamic data. It means you have to enter data manually into the chart.
If you want to do more complex things, you can use the Dataview plugin. If you don’t know what it is, check this:
You will also have to understand how DataviewJS works, so to get to the documentation, click here.
Now I’ll assume you know what is Dataview and you know a bit about how to use DataviewJS.
Using DataviewJS, you can render a chart using:
window.renderChart(data, element)- element: most of the time, it will be
this.containerto be rendered where the code block is. - data: the interesting part. We’ll see it in detail now.
const chartData = {
type: '',
data: {
labels: [],
datasets: [{
label: '',
data: [],
backgroundColor: [
''
],
borderColor: [
''
],
borderWidth:
}]
}
}I guess everything is explicit. Using DataviewJS, you can query data in your vault and use it in chartData . For example (from the doc):
test:: First Test
mark:: 6
```dataviewjs
const data = dv.current()
const chartData = {
type: 'bar',
data: {
labels: [data.test],
datasets: [{
label: 'Grades',
data: [data.mark],
backgroundColor: [
'rgba(255, 99, 132, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)'
],
borderWidth: 1
}]
}
}
window.renderChart(chartData, this.container);
```- data.test will be replaced by
First Test - data.mark will be replaced by
6 - The colors are given in RGBA format.
To be sure you understand, I will give you the code I used for the chart you see on the featured image of the story. This is a chart I use to track my music playing time every day through my daily notes. We’ll analyze it step by step as it can be complex for beginners:
```dataviewjs
let dvData = dv.pages('"600 Periodic/610 Daily"').filter((value) => value.file.path != "600 Periodic/610 Daily/610 Daily.md")function bblSort(arr) {for (var i = 0; i < arr.length; i++) {for (var j = 0; j < (arr.length - i - 1); j++) {if (arr[j] > arr[j + 1]) {var temp = arr[j]
arr[j] = arr[j + 1]
arr[j + 1] = temp
}
}
}
return arr
}const datetimes = bblSort(dvData.values.map(value => value['full-date']))
let sortedDvData = []
for (let i = 0 ; i < datetimes.length ; i++) {
for (let j = 0 ; j < dvData.values.length ; j++) {
if (dvData.values[j]['full-date'] == datetimes[i]) {
sortedDvData.push(dvData.values[j])
}
}
}const dates = sortedDvData.map((value) => new Date(value['full-date']).toLocaleDateString('en-us'))const guitarPlayingTimes = sortedDvData.map((value) => value.guitar)
const pianoPlayingTimes = sortedDvData.map((value) => value.piano)const chartData = {
type: 'line',
data: {
labels: dates,
datasets: [
{
label: 'Guitar playing time',
data: guitarPlayingTimes,
backgroundColor: [
'rgba(255, 99, 132, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)'
],
borderWidth: 1
},
{
label: 'Piano playing time',
data: pianoPlayingTimes,
backgroundColor: [
'rgba(51, 85, 255, 0.2)'
],
borderColor: [
'rgba(51, 85, 255, 1)'
],
borderWidth: 1
}
]
}
}window.renderChart(chartData, this.container);
```First, data querying:
const dvData = dv.pages('"600 Periodic/610 Daily"').filter((value) => value.file.path != "600 Periodic/610 Daily/610 Daily.md")I use dv.pages to query all my notes in “600 Periodic/610 Daily”. Then I filter the data to exclude my index note named “610 Daily.md”.
Then, we have a part for sorting data. I won’t go into detail, but the JS sort function was not working so I had to implement my own solution.
Then, labels generation:
const dates = dvData.values.map((value) => new Date(value['full-date']).toLocaleDateString('en-us'))In my daily notes, I have a YAML field called “full-date”. I use it to store the daily-note date. So here, I retrieved all the dates in an array to define my labels.
Now, we extract the interesting values:
const guitarPlayingTimes = sortedDvData.map((value) => value.guitar)
const pianoPlayingTimes = sortedDvData.map((value) => value.piano)In my daily notes, I have YAML fields called “piano” and “guitar” which I use to track my playing time every day.
Then we can create our chart data variable using our other variables defined above:
const chartData = {
type: 'line',
data: {
labels: dates,
datasets: [
{
label: 'Guitar playing time',
data: guitarPlayingTimes,
backgroundColor: [
'rgba(255, 99, 132, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)'
],
borderWidth: 1
},
{
label: 'Piano playing time',
data: pianoPlayingTimes,
backgroundColor: [
'rgba(51, 85, 255, 0.2)'
],
borderColor: [
'rgba(51, 85, 255, 1)'
],
borderWidth: 1
}
]
}
}Finally, we just plot the chart:
window.renderChart(chartData, this.container);Final note
Now you know how to make charts in your Obsidian Vault using Obsidian Charts. If you want to know more about this plugin, you can check the official documentation. You will learn how to make pie charts, radar charts, etc…
If you want to explore my other Obsidian stories and find other plugins, check this: Use Obsidian Like a Pro.
To explore more of my self-improvement stories, click here!
If you liked the story, don’t forget to clap and maybe follow me if you want to explore more of my content :)
You can also subscribe to me via email to be notified every time I publish a new story, just click here!
If you’re not subscribed to medium yet and wish to support me or get access to all my stories, you can use my link:
