We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How to set the font color on a node label on a diagram using React

I am using the react libraries ej2-react-diagrams.  I am using the flow diagram and just some basic  flow nodes.

I followed the example and used annotations to set the label on the node. 

I am trying to change the background to black and the label color to white.. for  the start and stop nodes.

I am unable to change the color :-(

I tried all variety techniques and attributes even trued to use 'labels' that I saw in other platforms.. nothing works. 

can someone show how to set the label on a node to a different color? please please. 

id: "start",
width: 50,
height: 40,
fontSize: 20,
addInfo: { fontColor: "red", },
shape: { type: "Flow", shape: "Terminator" },
style: {
fill: 'yellow',
strokeColor: 'red',
foreground: 'red',
labels: [{ "text": "Task 1" }],
annotations: [{ content: 'Start', foreground: 'red',style: {foreground:'red'}}]

2 Replies

RC raphael chancey October 30, 2019 02:27 AM UTC

I found an example here: https://stackblitz.com/edit/react-4cuyf3?file=index.js. Looks like 'color' works since it is on the annotation .. very coo.. thanks

SG Shyam G Syncfusion Team October 30, 2019 04:12 AM UTC

Hi Raphael, 
We are happy to hear that your problem is resolved. Please let us know if you need further assistance on this. 
Here is an react diagram documentation for annotations. 
Shyam G 

Live Chat Icon For mobile
Up arrow icon