Customizing the Zoom, Pan and Reset icons.

[Elanchezhiyan]

Hello Team,

I am trying to make these changes in the chart.
1. Zoom, Pan and Reset options should be enabled by default and the Zoom option should be selected by default. Mouse Hover description to be displayed
2. Zoom & Pan Icons should be 2 separate icons. Upon selecting any of these icons mouse cursor should change it to the icon’s image.
Can we do them? if so how? Attached Image link for your reference.

Image link: https://prnt.sc/TxEr96vVtEyw

[Manoj Mohan]

@elanchezhiyan,

1. Zoom, Pan and Reset options should be enabled by default and the Zoom option should be selected by default. Mouse Hover description to be displayed

Setting axis viewportMinimum or viewportMaximum will display the toolbar by default. You can set the zoomText, panText and resetText of the culture property to customize the mouse hover description of Zoom, Pan and Reset buttons respectively.

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

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

2. Zoom & Pan Icons should be 2 separate icons. Upon selecting any of these icons mouse cursor should change it to the icon’s image.

Sorry, it’s not possible to show Zoom and Pan buttons as separate buttons in chart as of now.

—-
Manoj Mohan
Team CanvasJS