[Thangaraj Raman]

@sonika,

Based on the JSFiddle shared by you, calling chart.render() inside the click event handler after the class expandedgraph is added to the DIV container seems to be working fine. Please check the below code snippet –

$("#PortfolioTrend").click(function () {
  $("#zoom").addClass("expandedgraph");
  chart.render();
})

Also, please take a look at this JSFiddle for a working example.

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

@sonika,

Can you please create a JSFiddle reproducing the issue you are facing and share it with us so that we can look into the code, understand the scenario better and help you out?

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

Suhas Patil,

You can use labelFormatter function on axisY to convert the axisY labels to percentages.

To switch the axisY labels from percentages to absolute values you can create a drop-down menu with the respective options. Based on the option selected you can update the labelFormatter function and then call chart.render().

document.getElementById("changeAxisYLabel").addEventListener('change', function(event){
  if (event.target.value == "absoluteValue") {
    chart.options.axisY.labelFormatter = function(e) {
      return e.value;
    }
  }
  else if (event.target.value == "percentage") {
    chart.options.axisY.labelFormatter = convertToPercentage;
  }
  chart.render();
});

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

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

Chris,

Color of the axis lines can be changed by setting lineColor for axisX or axisY respectively.

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

Chris,

Color of the grid lines can be changed by setting the gridColor for axisX or axisY respectively.

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

Alex,

The commercial version of CanvasJS includes all features.

Cursor type can be changed when you move the mouse over dataPoints, dataSeries, or legend by setting the respective cursor properties.

If you are looking for something else, can you kindly brief us further about your requirement so that we can understand your scenario better and help you out with an appropriate solution?

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

Volker Voß,

As mentioned before, there is a restriction on the number of dataPoints required for zooming to work and we don’t have an option to remove this restriction as of now.

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

Volker Voß,

Based on your scenario you can assign the dataSeries with signalPeak values to an existing y-axis instead of creating a new y-axis by setting axisYIndex and it should work fine.

Please take a look at this updated JSFiddle.

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

Volker Voß,

The behavior is designed such that zooming is limited upto a certain region so that the user doesn’t end up zooming into a blank region (region with no dataPoints). To zoom into a certain region, there should be a minimum of 3-4 dataPoints over the axis.

In your case, the zoom doesn’t work as there are less than 3-4 dataPoints with different values over the axisY in the signalPick dataSeries. We suggest you set the zoomType to x in such scenarios.

If the solution suggested doesn’t fulfill your requirement, kindly brief us further about your use case so that we can understand your scenario better and help you out with an appropriate solution.

—
Thangaraj Raman
Team CanvasJS