phibr0 / obsidian-charts Goto Github PK

Heya! I would love it if this supported error bars, for more stem applications. In the graphical creation, you can put this under advanced or something.

This could be implmeneted though using https://github.com/sgratzl/chartjs-chart-error-bars

Hi !
The idea behind this plugin is really cool and I have an idea to expand it a bit.

Is there a way to do something like count the occurrences of specifics words ?
I think with this you can build a "mood" tracker with the radar view.

Let's say in your daily note you say "On monday I did this, I was #mood/happy" and "On Friday I was #mood/sad".
The plugin count the occurrence of each #mood and assign them under a category like here :

And generate the radar view of your weekly/monthly mood.

I have no idea how complicated that would be, but I just wanted to share the idea with you !

Describe the feature

As of now, the "create chart from table" function replaces the existing table in the markdown file.
It would be better to somehow reference the table and just update the chart's code block if the table changes.

Does this fix a problem? If so, specify.

I've a table with monthly data about our warm / cold water and electricity meters and all our radiators.
This table is growing each month. I want to keep it, as it's much easier to add new data to it.

Did you consider other alternatives?

No response

Screenshots and recordings

No response

People lie with statistics (and graphs). There are many ways and a lot of famous books were written about it.

One of the most commonly used ways to lie is to truncate the y-axis by not starting it at 0. Very rarely it has a proper explanation, but way more often than not this is a sure way to see that the person/organization is either lying to you or are simply incompetent to talk about numbers.

Here is a good short video showing what is the problem with y-axis not starting at 0:
https://www.youtube.com/watch?v=5Qhh0Cm_TZY

I was glad to see that your great plugin has the beginAtZero: true option. Unfortunately, I was sad to see it neither being the default behavior nor it even being easily available via a check box. :-(

Practically any chart is unusable to me if it doesn't start at 0. And it means that every time I want to use a chart, I need to google the correct option text to add to make it proper. This is very tedious.

Could you please be so kind to:

1. change the default
2. (optionally) to make an easily available/togglable check box for people
   ?

Thank you for your great plugin and consideration of my request! :-)

Hi,
I have a problem with strange behavior when scrolling up file where charts are embedded. I'm scrolling to bottom of the file everything is fine, but when I scroll up charts disappear and also scroll behaves strangely. I see this issue only in file with charts. Tried to disable all other plugins, but there is no change. I attached small video to visualize problem. This issue I see on 0.12.* and 0.13.* version of obsidian.

Describe the feature

Not sure if this should be considered a bug report or a feature request.

When making a line chart that is both stacked and filled, each line is color-filled down to 0, resulting on colors of the lower areas being a mix of all the colors of the upper areas. Instead, the color filling should only be done between two consecutive lines, so that each intermediate area is of the correct color.

Does this fix a problem? If so, specify.

This is mostly for readability: stacked line charts tend to be more readable when color-filled, but the current behavior kind of defeats the purpose as all colors appear very similar (given they are all blending with each other).

Did you consider other alternatives?

No response

Screenshots and recordings

No response

Is there any chance that you'll introduce a pie chart type?

The bar charts doesn't display properly, the number '15' can't be displayed completely. However, the line chart is good.

I'm trying to render a line chart using sample data from Chart.js:

\```dataviewjs
const labels = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
const data = {
  type: 'line',
  data: {
    labels: labels,
    datasets: [{
      label: 'My First Dataset',
      data: [65, 59, 80, 81, 56, 55, 40],
      fill: false,
      borderColor: 'rgb(75, 192, 192)',
      tension: 0.1
    }]
  }
};

window.renderChart(data, this.container);
\```

The only change I made is to replace the labels value since Utils isn't defined in this context.

With this code, I get this error:

valuation Error: TypeError: window.renderChart is not a function
    at eval (eval at <anonymous> (eval at <anonymous> (app://obsidian.md/app.js:1:1215379)), <anonymous>:13:8)
    at DataviewInlineApi.eval (eval at <anonymous> (app://obsidian.md/app.js:1:1215379), <anonymous>:11749:33)
    at evalInContext (eval at <anonymous> (app://obsidian.md/app.js:1:1215379), <anonymous>:11749:49)
    at DataviewJSRenderer.eval (eval at <anonymous> (app://obsidian.md/app.js:1:1215379), <anonymous>:12117:17)
    at Generator.next (<anonymous>)
    at eval (eval at <anonymous> (app://obsidian.md/app.js:1:1215379), <anonymous>:26:71)
    at new Promise (<anonymous>)
    at __awaiter (eval at <anonymous> (app://obsidian.md/app.js:1:1215379), <anonymous>:22:12)
    at DataviewJSRenderer.render (eval at <anonymous> (app://obsidian.md/app.js:1:1215379), <anonymous>:12114:16)
    at DataviewJSRenderer.eval (eval at <anonymous> (app://obsidian.md/app.js:1:1215379), <anonymous>:12106:24)

The same thing happens if I try using the sample code from this project's README.

Is there something I can do to help debug/fix this issue? I'm a developer, but haven't gotten into any Obsidian dev yet.

It would be great if the colors for charts could be themed. It seems that by default they use the borderColor which I couldn't find a setting for.

https://www.chartjs.org/docs/latest/general/colors.html

I'm trying to include dataview data from a certain folder, which has a few entries in the frontmatter, for example

---
date: 25-11-2021
weight: 68.4
---

I'm trying to achieve this using

const obsData = dv.pages('"Journal/Daily"')

const labels = [
  'January',
  'February',
  'March',
  'April',
  'May',
  'June',
];

const data = {
  labels: labels,
  datasets: [{
    label: 'My First dataset',
    backgroundColor: 'rgb(255, 99, 132)',
    borderColor: 'rgb(255, 99, 132)',
    data: [obsData.weight],
  }]
};

const chartData = {
    type: 'line',
    data
}

window.renderChart(chartData, this.container);

But the returned result is only a 0, am I missing something? Thank you!

Obsidian: 0.10
OS: Mac OS, big sur

I have tried the code snippets from your example, but no graph is rendered.

Hi @phibr0 ! Thanks for the great plugin.

I'd love to see gantt/timeline support in Obsidian charts. I'm aware it's not currently supported in chartjs. Any chance still?

Hello! I absolutely love this plugin and I intend to use it a lot more. However, I've run into a strange error. Using window.renderchart within dataviewjs that is also wrapped in a admonition block will throw the following error:

Evaluation Error: SyntaxError: missing ) after argument list
    at DataviewInlineApi.eval {...}

Using it without the block it works fine, but I make heavy use of admonition blocks for organizational purposes.

Is there something I'm doing wrong? I can post the full script that I'm using and the full error if needed, just let me know!

Allow for specifying the title of an axis, as in
https://www.chartjs.org/docs/latest/samples/scale-options/titles.html

Describe the bug

I might be doing something wrong but using legend: false or legendPosition doesn't seem to work with the example below. The legend is always present at the top.

chart
    type: bar
    labels: [2020,2021,2022,2023]
    legend: false
    series:
      - title: A
        data: [400,500,644,500]
      - title: B
        data: [200,300,500,600]
      - title: C
        data: [100,110,111,120]
      - title: D
        data: [50,60,189,450]

I have also tried with the line type with the same result

Operating system

macOS

Describe the bug

When creating a chart that references a table that has aliased wikilinks in it, the charts are treating the escaped pipe character \| in the aliased wikilinks as table delimiters.

Relevant errors (if available)

No response

Steps to reproduce

1. Create a new note called "Testing".
2. Create a table with aliased wikilinks (you can use the following table).

| column 1          | column 2 |
| ----------------- | -------- |
| [[Testing\|test]] | 10       |
^testing123

3. Create a chart using the charts code in the "Code" section into the "Testing" note.
4. Chart does not show correct name and values are not plotted.

Expected Behavior

Chart should show correct name and show plotted values.

Additional context

No response

Code

type: bar
id: testing123

Operating system

macOS

Installed version 3.1.0
Win 11, Obsidian v0.12.19

When enabling the plugin, get error message
"Failed to load plugin obsidian-charts"

Describe the feature

Allow axes to use the time scale to set relative distance between points in time

Does this fix a problem? If so, specify.

Currently this is possible using dataviewjs however the input is less user-friendly, and doesn't support new capabilities like table based charts introduced in 3.3.0

Did you consider other alternatives?

The following examples show the same input data with very different output visualization. The second one is much more useful, but less user friendly to create and keep up to date with new data.

Using table charts

  ```chart  
  type: line
  id: chart
  layout: colums
  beginAtZero: true```
  
  | Date       | Number |
  | ---------- | ------ |
  | 2022-02-21 | 1052   |
  | 2022-02-13 | 1020   |
  | 2022-02-05 | 945    |
  | 2022-01-20 | 847    |
  | 2022-01-11 | 801    |
  ^chart

With dataviewjs

dataviewjs

const chartData = {
    type: 'line',
    data: {
        labels: ['2022-01-11','2022-01-20','2022-02-05','2022-02-13','2022-02-21'],
        datasets: [{
            label: 'Number',
            data: [801,847,945,1020,1052]
        }]
    },
    options: {
        scales: {
            x: {
				type: 'time',
                time: {
                    unit: 'day'
                }
            }
        }
    }
}

window.renderChart(chartData, this.container);

When I open the file, charts are not displayed correctly :

type: line
labels: [1,2,3,4 ,5,6,7,8, 9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39]
series: [[ 0.8384379785604901, 0.9157733537519143, 0.8667687595712098, 0.7848392036753445, 0.8246554364471669, 0.886676875957121, 0.8476263399693721, 0.7955589586523737, 0.8782542113323124, 0.9341500765696784, 0.8568147013782542, 0.8346094946401225, 0.8139356814701378, 0.8667687595712098, 0.8300153139356815, 0.8813169984686064, 0.8614088820826953, 0.9058192955589587, 0.8292496171516079, 0.833843797856049, 0.8300153139356815, 0.7886676875957122, 0.8713629402756509, 0.8491577335375191, 0.8698315467075038, 0.8392036753445635, 0.8361408882082695, 0.9012251148545176, 0.8568147013782542, 0.776416539050536, 0.8192955589586524, 0.8552833078101072, 0.8667687595712098, 0.8254211332312404, 0.8246554364471669, 0.8660030627871363, 0.9264931087289433, 0.836906584992343, 0.8522205206738132, 0.8828483920367535],[0.8744257274119449, 0.8346094946401225, 0.8537519142419602, 0.8575803981623277, 0.8713629402756509, 0.8667687595712098, 0.8744257274119449, 0.8767228177641654, 0.8529862174578867, 0.9287901990811639, 0.9165390505359877, 0.8767228177641654, 0.8859111791730475, 0.9196018376722818, 0.8614088820826953, 0.9257274119448698, 0.8430321592649311, 0.9050535987748851, 0.9035222052067381, 0.9157733537519143, 0.9234303215926493, 0.9065849923430321, 0.8675344563552833, 0.8683001531393568, 0.8828483920367535, 0.8713629402756509, 0.8813169984686064, 0.8958652373660031, 0.9042879019908117, 0.8583460949464012, 0.9027565084226646, 0.886676875957121, 0.9019908116385911, 0.8698315467075038, 0.8108728943338438, 0.8476263399693721, 0.7771822358346095, 0.9150076569678407, 0.9402756508422665, 0.9073506891271057 ]
]

Here is the chart code I used (I get the same problem with other charts as well)

I manage to make the chart display correctly by "resetting' it by changing a label value and putting it back to the original:

Describe the bug

A simple bar chart that works fine in the preview window, but the Y value is not correct after exporting the PDF.

Y is 7

type: bar
labels: [TESTA]
series:
  - title: AAA
    data: [7]
tension: 0.2
width: 80%
labelColors: false
fill: false
beginAtZero: false

preview window:

PDF: Y is 6.6

Relevant errors (if available)

No response

Steps to reproduce

1. Create a bar chart with a Y value of 7
2. Renders without problems in preview mode
3. Exported to PDF, the Y value became 6.6

Expected Behavior

Also has the correct Y value when exporting to PDF

Additional context

Obsidian：v0.14.2
Obsidian Charts: v3.5.1

Code

No response

Operating system

Windows

Here is the code I use for the burndown chart:

Burndown

const sp = dv.pages(`"${dv.current().file.folder}" and [[2021-11-W45]]`)
  .filter(page => page.file.name !== dv.current().file.name).sprintpoints.array();
  
const days = ["Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag", "Sonntag"]

let totalpoints = dv.current().totalsprintpoints.array();
let lastnum;

for (let i = 0; i < 7; i++) {
    totalpoints[i] = totalpoints[i] ?? lastnum;
    lastnum = totalpoints[i];
}

let counter = 5;
const ideal = totalpoints.map(points => {
    if (counter < 1) {
        return 0;
    }
    counter -= 1
    return points / 4 * counter;
})

let last = 0;
const points = sp.map((point) => {
    last += point;
    return last;
})

const burndown = points.map((point, i) => {
    return totalpoints[i] - point;
})

const chartData = {
    type: 'line',
    data: {
        labels: days,
        datasets: [{
            label: 'Ideal',
            data: ideal,
            backgroundColor: [
                'rgba(250, 250, 250, 0.2)'
            ],
            borderColor: [
                'rgba(250, 250, 250, 0.5)'
            ],
            borderWidth: 1
        },
        {
            label: 'Burndown',
            data: burndown,
            backgroundColor: [
                'rgba(255, 190, 0, 0.2)'
            ],
            borderColor: [
                'rgba(255, 190, 0, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                grid: { 
                    color: 'rgba(122,122,122,0.3)'
                },
            },
            x: {
                grid: { 
                    color: (ctx) => {
                        if (ctx.tick.value > 3) {
                            return 'rgba(254, 106, 38, 0.5)';
                        }
                        return 'rgba(122,122,122,0.3)'
                    }
                },
            },
            
        }
    }
}

window.renderChart(chartData, this.container);

I am taking the metadata sprintpoints from each daily and I am also taking the array totalsprintpoints from the current weekly to create the chart. The chart worked on friday where I last looked, and today I did the update mentioned in #26 (comment)_

Charts that are too large when exporting to PDF will exceed the boundaries of the A4 paper. I tried both 100% and 50% width.

Copied an example, but I'm getting a following error:

YAMLSyntaxError: A collection cannot be both a mapping and a sequence at line 1, column 5:
type: line
^^^^^^^^^

 	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'm using Obsidian v0.11.13

I don't have any issue with YAML, not sure if I have up to date Yaml parser or how to check that.

I appreciate any suggestion. Thanks.

I've been looking into memory management quite a bit in my CodeMirror Options plugin to make sure my edit mode rendered widgets aren't causing memory leaks. In the process of tracking down various leaks, I noticed that the Charts plugin isn't unloading/destroying the charts it creates, in general.

See this line here where the new chart is created

This should probably be assigned to a variable and then .destroy() should be called on it when the component unloads.

If you want to test this, you can artificially increase the size of your rendered objects, so that they're easier to spot in the heap profile by adding:

    const allocSize = 1024 * 1024 * 10;
    el.memLeak = new Uint8Array(allocSize);

to

This will add a 10MB array to your objects.

Next, go render some charts in preview mode, then close all active panes, and then go into devtools -> memory -> take heap snapshot. You should see 10MB arrays for each of the charts you rendered:

Additional reference: https://stackoverflow.com/questions/63977476/chartjs-memory-leak-garbage-collection-does-not-clean-chart-object-or-arrays-a

While using the radar graph I wanted to create a personal progress graph (kind of like "levelling" myself up) but came across a weird bug were typing this:

	type: radar
	labels: [Physical Strength, Coding, Languages, Maths, Chemistry]
	series:
		- title: Me now
		  data: [2.5,2,3,2,1]
   	- title: Me I want to be
		  data: [4.5,5,4,3.5,3]
	width: 50%
   fill: true

results in a relatively normal graph being formed, however when I changed the value of just the last label:

	type: radar
	labels: [Physical Strength, Coding, Languages, Maths, Chemistry]
	series:
		- title: Me now
		  data: [2.5,2,3,2,2]
   	- title: Me I want to be
		  data: [4.5,5,4,3.5,3]
	width: 50%
   fill: true

then the first graph goes all wacky. I am probably doing something wrong but just in case wanted to post that here.

I am creating a burnup and burndown chart, and for that I want to have a line that starts at zero and ends at the scope. At the moment I have to calculate each point manually to write it down. This is what it looks like:

type: line
labels: [Montag, Dienstag, Mittwoch, Donnerstag, Freitag, Samstag, Sonntag]
series:
    - title: Scope
      data: [72,72,72,72,72,72,72]
    - title: Ideal
      data: [0,12,24,36,48,60,72]
    - title: Burnup
      data: [8, 16, 5]
beginAtZero: true
max: 72
fill: true

I checked the README, but didn't see an option for that. This is what it looks like:

Example for Burndown:

type: line
labels: [Montag, Dienstag, Mittwoch, Donnerstag, Freitag, Samstag, Sonntag]
series:
    - title: Ideal
      data: [72,60,48,36,24,12,0]
    - title: Burndown
      data: [72]
beginAtZero: true

thanks for the wonderful plugin and the ability to work with dataviewjs

This code works fine for me

const pages = dv.pages('"05🧙Сисадмин/мой_комп_парк"').where(b => b.file.name != "мой_комп_парк.md").sort(k => k.rating, 'desc');
const labels = pages.map(b=>b["title"]);
const data = pages.map(b=>b["rating"]);

const chartData = {
    type: 'line',
    data: {
        labels: labels.values,
        datasets: [{
            label: 'Рейтинг',
            data: data.values,
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)'
            ],
            borderWidth: 1
        }]
    }
}
window.renderChart(chartData, this.container);

but I can't figure out how to use series?

Could you give an example of working with cap of series?

Hi! I love this plugin! This works very well in preview mode, but is there a way I can get this to display on Obsidian Publish? I'm assuming one would have to inject the chart.js javascript somewhere?

This Obsidian plugin is great, but you might be a victim of your own success, because now I want to do more! ;) There is a plugin at https://github.com/emn178/chartjs-plugin-labels which allows for the easy placement of labels in some types of charts (pie, doughnut, polar, bar). I'd love to be able to use this to make my graphs more immediately readable.

Is it possible to use this with dataview? Id like to make a query and use that table as an input.

At first thank you for your awesome plugin!

I'm also interested in bubble chart support like https://www.chartjs.org/docs/latest/samples/other-charts/bubble.html

Thank you, Sebastian

Charts just disappear after a while.

They render fine initially, when I had just made them. However, by the next day, when I go back to review those charts, they disappear when switching to preview mode, not even any text.

I am running obsidian v0.12.15, and Obsidian Charts 2.5.2, which should both be the newest versions.

I've found a way to temporarily make them appear again but this solution is temporary as well and disappears again after a while.

The temporary solution has been to copy the text, delete it, switch to preview mode, switch back to editor mode, paste the text back, and then it will appear again.

If you directly copy and paste the text without going to preview mode after the text was deleted, still no charts appear.

Would it be possible to support the scatter chart type? I see that's available in chart.js, so I hope it wouldn't be too much work.

I would like to use a CSV to plot my chart. I think it could be very powerful to show the contents of any column plotted without cluttering the text with series that might run out of sync. Now that CSV seems to be supported by more and more plugins it is also a handy way to add data to Obsidian like book collections, or taking BP measurements, running stats etc for example.

For example;

chart
        type: line
        source: bp_stats.csv
        labels: Date 
        series:
          - title: Systolic
            data: Sys
          - title: Diastolic
            data: Dia

And the CSV looks like (generated with Libre Office):

Date,Sys,Dia
2021-08-15,135,80
2021-08-16,128,76

This library is working great, so first of all thank you for that!

I'm using a line chart, but I would love to have some markings on there, for example a horizontal or vertical line, this can be done using the chartjs annotation plugin: https://www.chartjs.org/chartjs-plugin-annotation/latest/guide/integration.html#script-tag

Now I'm wondering how this can be implemented? Basically all that needs to happen is a new script tag to be included, linking to the annotation library, is this possible at all?

Would be really nice to the able to input a low and high value, and get the corresponding area filled, on a line graph.

Hi! I stumbled upon this trying to find a workaround for #29.

I try to set an axis to a Time Cartesian Axis like so:

const chartData = {
    type: 'scatter',
    data: data,
    options: {
        scales: {
            x: {
                type: 'time',
                time: {
                    unit: 'day'
                }
            }
        }
    }
};

However, I get this error: Error: This method is not implemented: Check that a complete date adapter is provided..

I'd love for a date adapter to be included in the plugin! Here is a list of supported adapters for reference.

I am a bit out of my depth here, so there might be something I misunderstood. Thanks for the amazing plugin!

Hello!
It would be great if you can add this option.
It's placed here:
const options = { scales: { r: { suggestedMax: 10 } } }

Describe the bug

I hesitated to report this as a bug, but the axis numbers in a bar chart display correctly.
With a radar chart, the numbers always display with a white background, even in dark mode.

Relevant errors (if available)

No response

Steps to reproduce

1. Create a radar chart with data or based on a table
2. Set Obsidian to Dark Mode
3. Observe the numbers have a white background
   

Expected Behavior

1. Switch the chart to bar
2. Observe the numbers have a dark background
   

Additional context

No response

Code

No response

Operating system

macOS

Changing the width setting has no effect on me.
The full screen width is always used.

This is a small QoL improvement I noticed which would be nice.

Currently when the user switches between light/dark mode, the chart colors don't change unless you close/reopen the note.

Describe the bug

Cannot install plugin due to "Plugin ID mismatch". Version 3.3.2

Relevant errors (if available)

`Plugin ID mismatch`

Steps to reproduce

install plugin

Expected Behavior

No response

Additional context

No response

Code

No response

Operating system

Windows

Hi! I am sorry to report that the plugin does not work correctly when you try to create charts from the command palette, however, it does work using directly typing the chart code block.

Although I use the bright color mode of obsidian, the exported pictures are all dark background colors, is there a way to export pictures with white background? thanks.

I'm using the radar graph as a stat display for rpg games, but I want it to show a max of a bit higher than the highest stat
When I add rMax: 15, the highest is currently 14, it doesn't do anything. Even when I tried changing it to rMax: 25

Describe the bug

Using a chart linked to a markdown table, spanGaps seems to convert empty cells to the value 0.

Instead, it should just ignore the empty cell.

Relevant errors (if available)

No response

Steps to reproduce

1. Create a markdown table with some values and some empty cells.
2. Add a block link to the table.
3. Add a chart and link it to the table.
4. Add the option spanGaps to the chart.
5. The chart displays empty cells as 0.
6. Put the word "null" into the empty cells, and spanGaps works as it should - except that nobody would put "null" into empty cells.

Expected Behavior

spanGaps should ignore empty cells and treat them as "null".

Additional context

#46 (comment)

Code

| Datum      | warm m³ | kalt m³ |
| ---------- | ------- | ------- |
| 12.03.2022 | 0       | 0       |
| 13.03.2022 | 5       | 8       |
| 14.03.2022 | 10      | 13      |
| 15.03.2022 |         | 18      |
| 16.03.2022 | 18      | 19      |
| 17.03.2022 | 25      | 21      |
^tabelle1



type: line
id: tabelle1
layout: cols
beginAtZero: false
spanGaps: true
tension: 0.5

Operating system

Linux

Describe the bug

Relevant errors (if available)

Uncaught TypeError: Cannot read properties of null (reading 'clientHeight')
    at Sh.onunload (eval at <anonymous> (app.js:1:1), <anonymous>:54:5625)
    at Sh.reload (eval at <anonymous> (app.js:1:1), <anonymous>:54:5399)
    at Sh.changeHandler (eval at <anonymous> (app.js:1:1), <anonymous>:54:5376)
    at e.t.tryTrigger (app.js:1:880519)
    at e.t.trigger (app.js:1:880452)
    at e.trigger (app.js:1:1106848)
    at e.<anonymous> (app.js:1:1104472)
    at app.js:1:234991
    at Object.next (app.js:1:235096)
    at s (app.js:1:233835)
onunload @ VM149:54
reload @ VM149:54
changeHandler @ VM149:54
t.tryTrigger @ app.js:1
t.trigger @ app.js:1
e.trigger @ app.js:1
(anonymous) @ app.js:1
(anonymous) @ app.js:1
(anonymous) @ app.js:1
s @ app.js:1
setTimeout (async)
t.tryTrigger @ app.js:1
t.trigger @ app.js:1
e.trigger @ app.js:1
(anonymous) @ app.js:1
(anonymous) @ app.js:1
(anonymous) @ app.js:1
s @ app.js:1
Promise.then (async)
l @ app.js:1
s @ app.js:1
Promise.then (async)
l @ app.js:1
s @ app.js:1
Promise.then (async)
l @ app.js:1
(anonymous) @ app.js:1
A @ app.js:1
(anonymous) @ app.js:1
(anonymous) @ app.js:1
(anonymous) @ app.js:1
(anonymous) @ app.js:1
A @ app.js:1
(anonymous) @ app.js:1
Promise.then (async)
t.queue @ app.js:1
e.onCreateOrModify @ app.js:1
t.tryTrigger @ app.js:1
t.trigger @ app.js:1
e.trigger @ app.js:1
e.onChange @ app.js:1
t.trigger @ app.js:1
(anonymous) @ app.js:1
(anonymous) @ app.js:1
(anonymous) @ app.js:1
(anonymous) @ app.js:1
A @ app.js:1
t.reconcileFileCreation @ app.js:1
(anonymous) @ app.js:1
(anonymous) @ app.js:1
(anonymous) @ app.js:1
s @ app.js:1
Promise.then (async)
l @ app.js:1
(anonymous) @ app.js:1
A @ app.js:1
t.reconcileFileInternal @ app.js:1
(anonymous) @ app.js:1
(anonymous) @ app.js:1
(anonymous) @ app.js:1
(anonymous) @ app.js:1
A @ app.js:1
t.reconcileFile @ app.js:1
(anonymous) @ app.js:1
(anonymous) @ app.js:1
(anonymous) @ app.js:1
(anonymous) @ app.js:1
A @ app.js:1
t.reconcileInternalFile @ app.js:1
(anonymous) @ app.js:1
(anonymous) @ app.js:1
(anonymous) @ app.js:1
s @ app.js:1
Promise.then (async)
l @ app.js:1
s @ app.js:1
Promise.then (async)
l @ app.js:1
(anonymous) @ app.js:1
A @ app.js:1
(anonymous) @ app.js:1
n @ app.js:1
Promise.then (async)
t.queue @ app.js:1
t.write @ app.js:1
(anonymous) @ app.js:1
(anonymous) @ app.js:1
(anonymous) @ app.js:1
(anonymous) @ app.js:1
A @ app.js:1
e.modify @ app.js:1
(anonymous) @ app.js:1
(anonymous) @ app.js:1
(anonymous) @ app.js:1
s @ app.js:1
Promise.then (async)
l @ app.js:1
(anonymous) @ app.js:1
A @ app.js:1
e.save @ app.js:1
a @ app.js:1
setTimeout (async)
l @ app.js:1
n.requestSave @ app.js:1
(anonymous) @ app.js:1
a @ app.js:1
setTimeout (async)
l @ app.js:1
(anonymous) @ app.js:1
t.update @ app.js:1
_dispatch @ app.js:1
t.dispatch @ app.js:1
Jx @ app.js:1
eS @ app.js:1
nS @ app.js:1
c @ app.js:1
rc @ app.js:1
keydown @ app.js:1
t.runCustomHandlers @ app.js:1
(anonymous) @ app.js:1
VM149:54 Uncaught TypeError: Cannot read properties of null (reading 'clientHeight')
    at Sh.onunload (eval at <anonymous> (app.js:1:1), <anonymous>:54:5625)
    at Sh.t.unload (app.js:1:673671)
    at e.t.removeChild (app.js:1:673910)
    at t.cleanupParentComponents (app.js:1:866306)
    at t.onRender (app.js:1:856220)

Steps to reproduce

1. Make a table and link a chart to it, enable backlinks in document (it doesn't need a backlink, just the panel at the end of the note)
2. Change an amount in source or live preview.
3. Switch to reading mode.
4. You'll see what the screenshot shows.

Expected Behavior

It doesn't set the height to zero after changing a value and switching to reading mode.

Additional context

HTML and CSS on initial load:

HTML and css after a change in the data and switching to reading mode:

Code

|             Day                    |             Amount             |             When                            |        points      |          Condition                                                                                                                     |
|:-----------------------------------|:-------------------------------|:--------------------------------------------|:-------------------|:---------------------------------------------------------------------------------------------------------------------------------------|
|                      2022-03-24    |                  1             |             Evening                         |          10        | n/a                                                                                                                                    |
|                      2022-03-25    |                             5  |             Morning and evening             |           9        |                n/a                                                                                                                     |
|                      2022-03-27    |                             8  |             Morning and evening             |           5        |          n/a                                                                                                                           |
|                     2022-03-28     |                            5   |     Morning                                 |              4     |     n/a                                                                                                                                |

^mytable

```chart
type: line
id: mytable
select: [Amount, points]
tension: 0.2
labelColors: false
fill: false
beginAtZero: true
```

Operating system

Linux