The datapoint y-value can only accept numeric values as of now. However, you can store a custom option (let’s say yLabel) for the song name and show the same in tooltip with the help of toolTipContent as shown in the code-snippet below.
array_push($dataPoints, array("x"=> strtotime($row['sch_date']) * 1000, "y"=> 1, "yLabel"=> $row['label']));
toolTipContent: "{x}: {yLabel}",
Please check this updated project for a working example.
—
Thangaraj Raman
Team CanvasJS
Nishant Chauhan,
Axis reversed property seems to be working fine in JS, JSP, etc. Can you kindly create a sample project reproducing the issue you are facing and share it with us over Google-Drive or OneDrive so that we can run it locally at our end, look into the code to understand the scenario better, and help you out?
—
Thangaraj Raman
Team CanvasJS
Axis range and interval are auto-calculated based on datapoint values in the chart. However, it can be overridden by setting minimum, maximum, and interval properties for axisX or axisY.
Y axis values are not displayed at all.
Can you please create a sample project reproducing the issue you are facing and share it with us over Google-Drive or Onedrive along with the sample data/database so that we can look into the code, understand the scenario better and help you out?
—
Thangaraj Raman
Team CanvasJS
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
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
Chris,
Color of the axis lines can be changed by setting lineColor for axisX or axisY respectively.
—
Thangaraj Raman
Team CanvasJS
Chris,
Color of the grid lines can be changed by setting the gridColor for axisX or axisY respectively.
—
Thangaraj Raman
Team CanvasJS
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
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
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
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