Mermaid lines not showing in xy chart

[colossal]

What I’m trying to do

when I try to use mermaid xychart-beta in obsidian the line will not show up. Bars will show but not lines.

Things I have tried

I’ve tried obsidian on a couple of different computers and tried changing the theme I’m using but that doesn’t seem to fix the issue.

Has anyone else encountered this and if so how did you fix it?

Here’s the mermaid script:

xychart-beta
	title "Data shift"
	x-axis [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 12, 13, 14, 15, 16, 17, 18]
	y-axis 1 --> 50
	line [0, 5, 10, 15, 20, 25, 30, 35, 40, 35, 30, 25, 20, 15, 10, 5, 0]

[yen_le]

This is a bug (I don’t know if it’s from obsidian side or mermaid side). Basically, stroke-width for x-axis, y-axis, and line is set to 0.

/* affect x-axis, y-axis, line */
.mermaid svg[aria-roledescription="xychart"] g > g > path {
    stroke: rgb(var(--mermaid-green-rgb)) !important;
    stroke-width: 2px !important;
}

/* affect x-axis, y-axis */
.mermaid svg[aria-roledescription="xychart"] g.left-axis path,
.mermaid svg[aria-roledescription="xychart"] g.bottom-axis path {
    stroke: rgb(var(--mermaid-gray-rgb)) !important;
    stroke-width: 1px !important;
}

If you want to set color for individual line (given you draw multiple lines):

.mermaid svg[aria-roledescription="xychart"] g.line-plot-0 path {
    stroke: ... !important;
}
.mermaid svg[aria-roledescription="xychart"] g.line-plot-1 path {
    stroke: ... !important;
}

[colossal]

Thanks for your help. Where do I put this additional code? does it go in a separate file somewhere?

[yen_le]

You create a .css file in the directory .obsidian > snippets. To see the hidden folder .obsidian, you:

• on Windows: enable show Hidden File or
• on Mac: press Command + Shift + .

Enable your newly created CSS file. Paste the code I’ve previously provided.

Please note that --mermaid-green-rgb is my own custom. You only need the stroke-width.

[colossal]

Thanks for this. I’ve copied and pasted the above, turned on the pluggins as instructed, and reloaded and restarted obsidian but its still not fixed it. Not sure what’s up. with it. But thanks for the input, I understand where to put mods now so I might try adding some other simple ones and see if they take hold.

[yen_le]

Oh it could be that the color used is the same color as your background. You can try adding stroke: #f00 !important; (this is color red).

You are new to CSS, so just as an instruction, to override mermaid CSS, you must always include !important. For Obsidian CSS, you don’t really need it.

[colossal]

@yen_le

stroke: #f00 !important;

That has totally fixed it. Thank you!