Static tool tip icon

[Ling JS]

How can we put in the Info icon on top of the graph and when mouse over we will have special tooltips?
o the date field.

Please kindly check on the image

You may refer to the live site https://www.hlam.com.my/Funds/asia-pacific-dividend-fund

[Thangaraj Raman]

@ezsolve,

To render the equivalent of an info icon, you can add a scatter dataseries to the chart, and set an appropriate index label. The scatter points’ tooltip can be used to show any additional information as per your requirement.

Please check this JSFiddle for a working example.

—
Thangaraj Raman
Team CanvasJS

[Ling JS]

Hi still got 2 question .

1st can we have different set of yValueFormatString for scatter dataseries

we want to show some other infor which is not from the datapoint

[Thangaraj Raman]

@ezsolve,

Each dataseries can have its own yValueFormatString since it is set at the dataseries level.

You can use the toolTipContent property at the datapoint level to show custom information in the tooltip as shown in this updated JSFiddle.

—
Thangaraj Raman
Team CanvasJS

[Ling JS]

for the indexLabel: “ℹ️”,

how can we change the icon? can we use font-awesome icon or svg or image file ?

[Thangaraj Raman]

@ezsolve,

You can use Unicode characters or emojis to render custom icons as index labels. Please check the code snippet below:

indexLabel: "\u263A",  //Unicode smiling face

OR

indexLabel: "😊",  //smiling face emoji

—
Thangaraj Raman
Team CanvasJS