[Vishwas R]

Ben,

You can achieve this by using striplines. You can dynamically add stripline on clicking anywhere on the chart using addTo method. Also, you can make them draggable using mouse-events as shown in the below code-snippet.

$(".canvasjs-chart-canvas").last().on("mousedown", function(e) {
  // Get the selected stripLine & change the cursor
  var parentOffset = $(this).parent().offset();
  var relX = e.pageX - parentOffset.left;
  var relY = e.pageY - parentOffset.top;
  var snapDistance = 10;

  for(var i = 0; i < chart.options.axisX[0].stripLines.length; i++) {
    if(relX > chart.axisX[0].stripLines[i].get("bounds").x1 - snapDistance && relX < chart.axisX[0].stripLines[i].get("bounds").x2 + snapDistance && relY > chart.axisX[0].stripLines[i].get("bounds").y1 && relY < chart.axisX[0].stripLines[i].get("bounds").y2) {
      selected = i;
      $(this).css("cursor","pointer");
    }
  }
});

$(".canvasjs-chart-canvas").last().on("mousemove", function(e) {
  // Move the selected stripLine
  if(selected !== -1) {
    var parentOffset = $(this).parent().offset();
    var relX = e.pageX - parentOffset.left;
    chart.options.axisX[0].stripLines[selected].value = chart.axisX[0].convertPixelToValue(relX);
    chart.render();
  }
});

$(".canvasjs-chart-canvas").last().on("mouseup", function(e) {
  // Clear Selection and change the cursor
  selected = -1;
  $(this).css("cursor","default");
});

Please take a look at this JSFiddle for working code.

—
Vishwas R
Team CanvasJS

[Vishwas R]

Ben,

You can use navigator to select a range of data to be shown in chart. If this doesn’t fulfill your requirements, can you kindly brief us more along with an example or a pictorial representation of your requirements so that we can understand it better and help you out?

—
Vishwas R
Team CanvasJS

[Vishwas R]

@netp,

You can get source-code of the products with Developer license, which you can edit at your end. This enables you to add additional functionality to the product or customize it the way you want.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@mahram,

Rendering multiple charts in a page seems to be working fine. Please refer to this tutorial for step-to-step instructions on rendering multiple charts in a page.

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

—
Vishwas R
Team CanvasJS

[Vishwas R]

@mustadirmahmood,

Considering this as duplicate of Entire chart is not showing after data points are updated in react, hence closing the same.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@mustadirmahmood,

Can you kindly share sample project reproducing the issue you are facing over Google-Drive or Onedrive so that we can look into the code, run it locally at our end to understand the scenario better & help you resolve?

From what we have observed, sometimes things get delayed mostly when we are not able to reproduce the issue or not able to understand the exact requirements or the solution that we provide may not work properly due to the variation in chart-options being used by you and us.

Having a sample project helps us in figuring out the issue and suggesting an appropriate solution accordingly.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@keval-panchal,

exportChart method exports the entire chart, irrespective of whether the chart is within the viewport or not.

Can you kindly create JSFiddle with your use-case, so that we can look into the code / chart-options that you are using, understand the scenario better & help you out?

From what we have observed, sometimes things get delayed mostly when we are not able to reproduce the issue or not able to understand the exact requirements or the solution that we provide may not work properly due to the variation in chart-options being used by you and us.

Having a JSFiddle helps us in figuring out the issue and suggesting an appropriate solution accordingly.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@johnhaugeland,

CanvasJS is a JavaScript library that render charts on the client-side. To capture image of chart on server-side, you will have to run it in a headless browser & capture screenshot. Please take a look at this sample project which uses puppeteer to do so.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@dev-sanborn,

You seem to be using trial version of CanvasJS that’s downloaded from Download Page. Kindly download commercial version of CanvasJS from My Account page. After downloading the commercial version, please replace the CanvasJS Trial Version source file in your application with the Commercial Version and make sure to clear the browser cache.

If it’s shown as expired in My Account, your subscription would have expired & you will need to renew subscription to get latest updates.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@artemusmaximus,

You can use both primary & secondary within the same chart by attaching dataseries to them using axisYType & axisYIndex properties. Please take a look at this gallery page for an example along with source-code on the same.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@igroppe,

Axis minimum & maximum are auto-calculated based on the range of data being passed to the chart – which you can access using get method after rendering the chart. Or you can manually set minimum & maximum using set method. However, to set minimum / maximum of axis to the lowest / highest values of the datapoints passed, you can do so as addressed in the previous reply. Please find the code-snippet below.

var minY = Infinity, maxY = -Infinity;
var minimum = chart.axisX[0].get("minimum");
var maximum = chart.axisX[0].get("maximum");
for(var i = 0; i < chart.data[0].dataPoints.length; i++){
  if(chart.data[0].dataPoints[i].x >= minimum && chart.data[0].dataPoints[i].x <= maximum){
    if(chart.data[0].dataPoints[i].y < minY)
      minY = chart.data[0].dataPoints[i].y;

    if(chart.data[0].dataPoints[i].y > maxY)
      maxY = chart.data[0].dataPoints[i].y;
  }
}
chart.axisY[0].set("minimum", minY);
chart.axisY[0].set("maximum", maxY);

—
Vishwas R
Team CanvasJS

[Vishwas R]

@zlwestwood,

As mentioned in previous reply, 0 is not supported in logarithmic axis. However, as addressed in previously shared JSFiddle (line no 29), you can either set it to null or to some value like 0.1, 0.00001, etc. to keep the continuity in the line. Please take a look at this updated JSFiddle.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@zlwestwood,

In case of line / spline chart, by default line will be broken when datapoint with null value is present. You can connect the non-null values directly by setting connectNullData property to true – which draws a dashed line to connect non-null datapoints. The type of this line can be changed by setting nullDataLineDashType property. Please refer to the code-snippet below.

...
data: [{
	...
	type: "line",
	connectNullData: true,
	nullDataLineDashType: "solid",
	...
}]
...

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

—
Vishwas R
Team CanvasJS

[Vishwas R]

@zlwestwood,

As zero value is not supported in logarithmic axis, you can set the value to null by parsing through the datapoints before rendering. Please find the code-snippet below.

function parseZeroValue() {
  var data = chart.options.data;
  for(var i = 0; i < data.length; i++) {
    for(var j =0; j < data[i].dataPoints.length; j++) {
    var yValue = data[i].dataPoints[j].y;
      if(yValue === 0) {
        data[i].dataPoints[j].y = null; //Set this to some value like 0.01, if you like to show column
        data[i].dataPoints[j].toolTipContent = ("{x}: " + yValue);
      }
    }
  }
}

Please take a look at this JSFiddle for complete code. Also refer to this JSFiddle which shows how to set minimum height in column chart.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@zlwestwood,

A logarithmic axis can only plot positive values. There simply is no way to put negative values or zero on a logarithmic axis.

Fundamental: If 10L = Z, then L is the logarithm (base 10) of Z. If L is a negative value, then Z is a positive fraction less than 1.0. If L is zero, then Z equals 1.0. If L is greater than 0, then Z is greater than 1.0. Note that there no value of L will result in a value of Z that is zero or negative. Logarithms are simply not defined for zero or negative numbers.

—
Vishwas R
Team CanvasJS