[Manoj Mohan]

@csonkal,

Can you kindly create JSFiddle reproducing the issue you are facing & share it with us so that we can look into the chart-options being used, understand the scenario better and help you out?

—-
Manoj Mohan
Team CanvasJS

[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

[Manoj Mohan]

@arjungoel10gmail-com,

Sorry, it’s not possible to disable panning in the stock chart as of now.

—-
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

[Manoj Mohan]

@gabpayne,

Thanks for the feedback. We will look into this in future releases.

—-
Manoj Mohan
Team CanvasJS

[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 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

[Manoj Mohan]

@appsoft,

Sorry, we don’t have gauge chart as of now. However, you can create it with help of semi doughnut chart as explained briefly in this thread. Also, please refer to this forum thread for an example on the same in Angular.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@avb,

Zooming seems to be working fine on enabling zoom in individual charts in stockchart. Please take a look at this JSFiddle for working sample on the same.

If you are still facing the issue, kindly share the JSFiddle reproducing the issue you are facing so that we can look into your options passed to the chart, understand your scenario better and help you out.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

Justin,

Please take a look at this JSFiddle that shows an example of using labels to show date instead of x-values.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

[UPDATE]

We have just released StockChart v1.10.12 with this bug fix. Please refer to the release blog for more information. Do download the latest version from download page & let us know your feedback.

@avb,

There seems to be an issue when navigator is disabled due to which selected range button is not highlighted after rendering the chart. You can workaround this issue by hiding the navigator using css and also setting selectedRangeButtonIndex in the rangeChanging event handler. Please take a look at this below code snippet.

<style>
#stockChartContainer .canvasjs-navigator-panel {
  display: none !important;
}
</style>

rangeChanged: function(e) {
.
.
if(e.source == "buttons") {
  stockChart.rangeSelector.set("selectedRangeButtonIndex", e.index, false);
}
.
.
}

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

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@canvas_chartist,

Replacing bubble with custom image/svg is not available as an inbuilt feature as of now. However, you can position images in place of markers in bubble chart by adding few lines of code. Please checkout the code snippet below for the same.

addMarkerImages(chart);

function addMarkerImages(chart){
  for(var i = 0; i < chart.data[0].dataPoints.length; i++){

    customMarkers.push($("<img>").attr("src", chart.data[0].dataPoints[i].markerImageUrl)
                       .css("display", "none")
                       .css("height", 30)
                       .css("width", 30)
                       .css("pointer-events", "none")
                       .appendTo($("#chartContainer>.canvasjs-chart-container"))
                      );        
    positionMarkerImage(customMarkers[i], i);
  }    
}

function positionMarkerImage(customMarker, index){ 
  var pixelX = chart.axisX[0].convertValueToPixel(chart.options.data[0].dataPoints[index].x);
  var pixelY = chart.axisY[0].convertValueToPixel(chart.options.data[0].dataPoints[index].y);
  
  customMarker.css({"position": "absolute", 
                    "display": "block",
                    "top": pixelY - customMarker.height()/2,
                    "left": pixelX - customMarker.width()/2,
                    "pointerEvents": "none"
                   });
}

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

2) How can I connect two bubbles with a straight line on mouse hover?

It is not possible to connect two bubble with a straight line on mouse hover as of now.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@justin-greerservicemob-com,

Sorry, it’s not possible to define the position of first & last labels in the axis as of now. However, you can use label instead of x values to show the axis labels as per your requirement.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@rajeshpdsij-in,

You can set selectedRangeButtonIndex property to e.index value in rangeChanged event handler to highlight the button selected after manipulating with data. Please take a below code snippet for the same.

stockChart.rangeSelector.set("selectedRangeButtonIndex", e.index)

Also, checkout this updated JSFiddle for complete working code.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@avb,

We are looking into your query and will get back to you at the earliest.

—-
Manoj Mohan
Team CanvasJS