Add text on gantt chart and change background color of tooltip

Ignition
,
1

I have plotted gantt chart using XY chart in ignition perspective. While i have added all the information that i need to see on the tooltip but at the same time i want few of those information to appear on my gantt chart readily(since the tooltip information is visible only if i hover over it. Can someone help me to achieve it?Also i have applied a particular color to my gantt chart and i can see the tooltip taking the same color, i need to change the background color of tooltip , how to do that?

image (3)

2

Everything you mentioned is achievable.

XY Chart Tooltip background and Labels
XY Chart Tooltip background and Labels1392×628 16.8 KB

Add additional series for each purpose

  1. Main series for the columns
  2. Label series to add text inside the column
  3. Tooltip background series to render a different tooltip color.

Adjust multiple properties in each series, xAxes and yAxes to make everything work.
Refer to attached XY for complete details
XY Chart Custom Tooltip background and lables.json (34.8 KB)

@IA there is a prop available to change the background color of a tooltip but its not working. Is it a bug? Perspective - XY Chart | Ignition User Manual

3

I dont want to have static text on the gantt chart , the information that is seen on tooltip is fetched from database using sql query .Like for example if there are 5 information on the tooltip , so 2 from them i want to show on bar of gantt chart.
Also even after adding the color in the background option in the tooltip i dont see that the color has changed.
Please let me know how can that be achieved.

4

Transform the data from the db to create the custom string for the tooltip label. Add the new value to a unique key in the dataSources array. Assign this key to the series rendering line.
Label is the key in the example. Assigned to [1].line.appearance.bullets.label.text
Note that the line.appearance.stroke.opacity and line.appearance.fill.opacity of this series is 0 to hide the lines. This series is used only for the column labels.

In my example the series[0].tooltip.enabled is false. Series[2] used for the tooltip is a replica of [0] but with the following changes.

series[2].zIndex : 1
series[2].tooltip.enabled : true
series[2].column.appearance.stroke.opacity : 0
series[2].column.appearance.fill.opacity : 0
series[2].deriveFieldsFromData.fill.color : Tooltip_Background

(Tooltip_Background is the key of the background color you want)

Go through the details of the example, and you will get the starting point.

5

is it necessary that Tooltip_Background is to be given in the dataset?

6

If it will be static then no. Remove that property.
Assign the tooltip background color to series[2].column.appearance.fill.color

7

yes im doing that , but i can see it automatically taking the color of the bar of the gantt chart, like if i give the bars red color then tooltip bg is red , and if i change it to blue then again the bg of tooltip changes to blue

image
image1169×649 67.5 KB

here i have given column color as green and tooltip bg as black , but i see green for both

8

I think you are using common series to render column and tooltip.
My posted example use two different series. First for column which has tooltip disable and another for tooltip.

1 Like