[Manoj Mohan]

[Update]

@kondor0,

We have released v3.2.11 GA with this bug fix, please check out release blog for more information. Please download the latest version from our download page and let us know your feedback.

—
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@wellhys,

If you looking to set the minimum and maximum value of x-axis of individual chart with date-time axis, you can achieve it by setting the minimum and maximum property of axisX in charts. Please check out the below code snipppet for same.

{
	.
	.
	charts: [{
		axisX: {
			minimum: new Date(2018, 00, 01, 09, 30),
			maximum: new Date(2018, 03, 01, 09, 30)
		},
		.
		.
	}]
}

Setting the minimum and maximum of slider sets the range of all charts and synchronise them. Please check out the below code snippet for the same.

{
	.
	.
	navigator: [
		slider: {
			minimum: new Date(2018, 00, 01, 09, 30),
			maximum: new Date(2018, 03, 01, 09, 30)
		},
		.
		.
	]
}

To specify hour component, you can pass the datetime value along with time component like new Date(2018, 00, 01, 09, 30) to minimum and maximum values. For more information on passing time component within date-time values, please refer to this MDN documentation.

—–
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@raghav-son,

To reduce space between title of one y-axis with the other y-axis line, you can set the margin property of axisY to 0.

axisY: {
	margin: 0
}

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

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@radam13,

Thanks for reporting the use-case.

I’m guessing it’s because I may have a multi-line label. But, wondering what I can do to get around it. Heck, if I can add line break characters I would be happy to do that.

Sorry, it is not possible to add line break characters in indexLabel as of now.

Note, on the JSFiddle, the first column shows when the chart is 0 and the text is a few pixels in the line. The second column shows a 3-line label and the last line is in the column area.

We will reconsider this behaviour in our future releases.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@joshuasosa,

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

[Manoj Mohan]

@mbringezu,

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

[Manoj Mohan]

@vjrao96,

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

[Manoj Mohan]

@ekaqu1028,

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

[Manoj Mohan]

@kondor0,

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

[Manoj Mohan]

@egroj81,

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

[Manoj Mohan]

@remymumoh,

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

[Manoj Mohan]

@codypraveen,

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

[Manoj Mohan]

@jeonkook,

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

[Manoj Mohan]

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

[Manoj Mohan]

@swebs,

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