Glad that you figured it out. Also, you can enable pan mode as default option by simulating the click event on pan button as shown in this code snippet.
var parentElement = document.getElementsByClassName("canvasjs-chart-toolbar");
var childElement = document.getElementsByTagName("button");
if(childElement[0].getAttribute("state") === "pan"){
childElement[0].click();
}
Please take a look at this JSFiddle for an example on chart with pan functionality as default mode.
—-
Manoj Mohan
Team CanvasJS
Performance of the chart seems to be proper. Can you kindly create JSFiddle reproducing the issue you are facing and share it with us so that we can understand your scenario better and help you out?
—-
Manoj Mohan
Team CanvasJS
Sorry, replacing axis labels with an image or drawing shapes in place of labels is not possible as of now. However you can use unicode characters which is supported along with text. Please take a look at this Gallery Page for an example on adding unicode in indexlabel, which also works fine with other elements like axis label, legend text, chart-title, etc. Please refer to this Wikipedia page for list of unicode characters.
—-
Manoj Mohan
Team CanvasJS
rangeChanging and rangeChanged events seems to be working fine and are getting triggered even on zooming / panning the chart. Can you kindly create JSFiddle reproducing the issue you are facing and share it with us so that we can understand your scenario better and help you out?
—-
Manoj Mohan
Team CanvasJS
Thanks for reporting the use-case. The issue seems to be happening on using “#percent” in the indexLabel. We are already aware about the issue and will be fixing it in our future releases.
—-
Manoj Mohan
Team CanvasJS
Can you kindly share sample CSV file over Google-Drive or Onedrive and brief us further about what data to be shown in multiple y-axes so that we can understand your scenario better and help you out?
—-
Manoj Mohan
Team CanvasJS
Can you kindly create JSFiddle reproducing the issue you are facing and share it with us so that we can understand your scenario better and help you out?
—-
Manoj Mohan
Team CanvasJS
It is not possible to set multiple colors for axis labels or place an image beside labels as of now. However, you can use stripLines to set multiple colors for y-axis labels. To achieve this, you need to first hide all the axisY labels using labelFormatter and store the labels in an object as shown in the code snippet.
axisY: {
labelFormatter: function(e) {
if(axisYLabels[e.value] === undefined) {
axisYLabels[e.value] = e.value;
}
return "";
}
}
After rendering the chart, you can iterate through the labels object stored above and add stripLines for each label value with different labelFontColor using addTo method. Please refer to the code snippet below for the same.
var i = 0;
for(var label in axisYLabels) {
if (axisYLabels.hasOwnProperty(label)) {
chart.axisY[0].addTo("stripLines", { value: label, label: label, labelPlacement: "outside", labelBackgroundColor: "white", color: "transparent", labelFontColor: axisLabelColors[i%axisLabelColors.length] });
i++;
}
}
Please take a look at this JSFiddle for an example.
—-
Manoj Mohan
Team CanvasJS
Setting floating values in minimum and maximum of y-axis seems to be working fine. Please take a look at this JSFiddle for the same.
axisY: {
maximum: 7.4,
minimum: 7.2
}
If you are still facing the issue, kindly create JSFiddle reproducing the issue you are facing and share it with us so that we can understand your scenario better and help you out.
—-
Manoj Mohan
Team CanvasJS
Nicola Presa,
Based on the data you have shared above and considering your requirement, using CanvasJS StockChart will suit your scenario. It comes with built-in features like inputfields and range buttons using which you can select a specific range that is needed to be displayed in the viewport. Selecting the last 250, 500 or 750 days can be achieved using custom range buttons for which you can define the range and rangeType property as shown in the below code snippet.
buttons: [
{
label: "250 Days",
range: 250,
rangeType: "day"
},
{
label: "500 Days",
range: 500,
rangeType: "day"
},
{
label: "750 Days",
range: 750,
rangeType: "day"
},
{
label: "All",
rangeType: "all"
}
]
Also, for selecting precise date range (data to date range), you can use inputFields. Please take a look at this JSFiddle for an example.
—-
Manoj Mohan
Team CanvasJS
Gridlines are drawn at every interval and it is not possible to offset gridlines as of now. However, you can use stripLines to achieve your requirement as shown in this JSFiddle.
—-
Manoj Mohan
Team CanvasJS
Daniel,
Can you kindly share an example and brief us further about the requirement?
—-
Manoj Mohan
Team CanvasJS
Can you kindly create sample project reproducing the issue you are facing and share it with us over Google-Drive or Onedrive so that we can look into your code / chart-options being used, understand the scenario better and help you out?
—-
Manoj Mohan
Team CanvasJS