🏠 back to Observable

Axis label is not included in the output PNG file

Recently, I started to learn how to add axis labels to the charts. I follow the guildance of the following notebook:

But when I try to download the chart as a PNG file, I found that both axis labels are not included in the image.
1 Like

The reason appears to be that the <text> element is lacking a fill attribute. If you add the attribute (e.g. fill="currentColor") the label will be exported properly.


You might also notice that SVG download doesn’t work properly. The reason is that the notebook uses style directives in a separate cell that don’t export with the SVG file. For that reason, I think it’s always a good idea to include styles and attributes explicitly in the SVG. I guess that @mootari’s observation is similar.

Here’s a forked notebook that exports both the PNG and SVG correctly: