Text weight in line plot does not change with FontWeight key

New To Observable
1

Hi there,

I am unable to change the font weight in this line plot with the available parameters.

Plot.plot({
  style: "overflow: visible;",
  color: {legend: true},
  y: {grid: true},
  marks: [
    Plot.ruleY([0]),
    Plot.line(weekly_mileage, {x: "week", y: "total_distance", stroke: "plan"}),
    Plot.text(weekly_mileage, {x: "week", y: "total_distance", stroke: "plan", text: (d) => `${d.pct_change}`,  dy: -3, lineAnchor: "bottom", fontWeight:0.1, fontSize:10})
  ],
  y: {label: "Distance (km)"}
});

image
image2490Ă—1500 379 KB

I am wondering if I am possibly plotting the text layered many times by accident, making it look thicker?

I want to text to look the same as what is in the documentation - Text mark | Observable Plot

Any ideas?

Thanks!

2

I believe you’ll want to set the color for your text mark’s fill instead of stroke. As for the font weight, you can find a list of valid values here: font-weight - CSS: Cascading Style Sheets | MDN

2 Likes
3

thank you @mootari !

This worked for me

Plot.plot({
  style: "overflow: visible;",
  color: {legend: true},
  y: {grid: true},
  marks: [
    Plot.ruleY([0]),
    Plot.line(weekly_mileage, {x: "week", y: "total_distance", stroke: "plan"}),
    Plot.text(weekly_mileage, {filter:(d) => d.pct_change>20 && d.pct_change<100, x: "week", y: "total_distance", stroke: "plan", text: (d) => `+${d.pct_change}%`,  dy: -3, lineAnchor: "bottom", fontWeight:'lighter', fontSize:9, strokeWidth:0.7})

  ],
  y: {label: "Distance (km)"}
});

image
image1356Ă—890 94.4 KB