🏠 back to Observable

Cannot change font-size in React-integration

Hey. I have declared a variable called ‘title-font’ in Observable notebook, which is used to provide font-size to a TEXT appended to the SVG, which I have integrated in my React App using ObservableHQ Runtime. I am trying to update the font-size using module.redefine(“titleTextSize”, 12), but it is not working. When I try to do the same for other Font-sizes like tooltips, it works. My title text is coded as follow:

svg.append('text')
     .text(titleText)
     .attr('y', margin.top - 20)
     .attr('x', width/4)
     .style('font-size', titleTextSize);

When I change the size of SVG from my React code, the Text Size changes according to that. I understand that the reason behind this is that the text is appended directly to the SVG. Can someone help me out on this? Thanks.

Hi Namit, welcome to the forum! Can you share few more details like: is this code block inside a useEffect or some other callback?

The code block is inside componentDidMount() in React.
In Observable notebook, Text is appended to svg inside chart = {}.

I guess the issue is not with observable but with react, the component will not execute the component did mount stuff when a variable is updated, you might want to load your component after the variable is redefined or if you want it to be dynamic, use it as a prop/useeffect so react can reconcile when this changes? If possible please create an isolated test case on codepen with your react code so its easier for debugging.