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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:





148676 Oct 30,2019 02:07 AM UTC Oct 30,2019 04:12 AM UTC React - EJ 2 2
Tags: Diagram
raphael chancey
Asked On October 30, 2019 02:07 AM UTC

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'}}]

raphael chancey
Replied On 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

Shyam G [Syncfusion]
Replied On 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 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon