Dmytro-Shulha / obsidian-plotly

Obsidian plugin to embed Plotly charts into markdown notes.
MIT License
70 stars 4 forks source link

Dataviewjs does not show title #23

Closed aeneasx closed 10 months ago

aeneasx commented 10 months ago
```dataviewjs
 let path = app.vault.adapter.basePath;//absolute path to your vault
 var d3 = require(path+"\\utils\\d3.v7.min.js");

var trace1 = { 
    x: [1, 2, 3, 4, 5], 
    y: [1, 5, 3, 5, 1], 
    mode: 'lines+markers', 
    name: 'spline', 
    line: {shape: 'spline'}, 
    type: 'scatter' };

var data = [trace1]; 

var layout = {  
    title: {text: 'my title'},
    margin: { l: 20, r: 20, b: 40, t: 20, pad: 4 },
    autosize: false, 
    height: 200,
    showlegend: true,
    yaxis: { title: "y Axis"},
    xaxis: { title: "x Axis"}};

window.renderPlotly(this.container, data, layout, {staticPlot: true});
``` ```

is not able to show the title of the graph, neither the axis titles.

Dmytro-Shulha commented 10 months ago

Hi! I tried to run your code in my vault (i'm using theme 'Behave dark'), and there is a title and axis: image

So, my assumption is that your css may size plot so title and axes are out of view area. Which theme do you use? Also, can you provide a screenshot of your plot?

Dmytro-Shulha commented 10 months ago

Also, try increasing margin values in layout. image

aeneasx commented 10 months ago

Hi!

Thanks for your quick reply!

I updated my macbook this morning and it just worked. I checked the css but couldn’t find a clue, what was causing the problem. I guess my version of obsidian was somehow stirring up the html and css.

I extended my css snippet, so that the plot is centered horizontally in the page and this works fine so far: 

Thanks already and thanks for that very useful and well done plugin!