Cannot change font-size in React-integration

Community Help
1

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.

2

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

3

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

4

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.