Change the tooltip of zoom icons

[Elanchezhiyan]

Hi Team,

How do we change the tooltip of the zoom icons such as Pan, reset etc. Attached image for your reference.

Image: https://prnt.sc/aPuHlnmg1_m7

[Manoj Mohan]

@elanchezhiyan,

You can change the tooltip text shown when you hover the zoom/pan button by changing the title attribute for the DOM. Please find the code-snippet below.

document.getElementsByClassName("canvasjs-chart-toolbar")[0].childNodes[0].title = "New Title";

Please take a look at this JSFiddle for an example on the same.

—-
Manoj Mohan
Team CanvasJS

[Elanchezhiyan]

This is not Changing the title while the transition occurs( Zoom to pan or pan to Zoom). Attached video link for your reference.

Video link: https://ttprivatenew.s3.amazonaws.com/pulse/sathishait62-gmail/attachments/20721557/TinyTake22-12-2022-08-06-47.mp4

[Manoj Mohan]

@elanchezhiyan,

There seems to be some issue, which has been notified to dev team & would fix it in future versions. Meanwhile, you can work-around this by changing title attribute of the zoom/pan button based on the state of the button (Zoom / Pan) as shown in this updated JSFiddle.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@elanchezhiyan,

You can use zoomText and panText attributes of culture to customize the text shown in the tooltip of zoom & pan button respectively. Please take a look at this below code snippet.

CanvasJS.addCultureInfo("custom", {      
 	zoomText: "Custom Zoom Title",
	panText: "Custom Pan Title"
});

var chart = new CanvasJS.Chart("chartContainer", {
  culture: "custom",
  .
  .
});

Please take a look at this updated JSFiddle for complete working code.

—-
Manoj Mohan
Team CanvasJS

[Elanchezhiyan]

Thanks for the update @manoj-mohan