[Manoj Mohan]

@bkshn,

Can you kindly create JSFiddle reproducing the issue you are facing and share it with us so that we can reproduce the issue at our end, understand the scenario better and help you out?

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@stefan-alfs,

Can you kindly create JSFiddle reproducing the issue you are facing and share it with us so that we can reproduce the issue at our end, understand the scenario better and help you out?

—
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@vaibhav6200,

Sorry, it is not possible to visualize tree data structure as of now.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@glowery,

It seems like you are using older version of CanvasJS Charts. We have updated the behaviour of tooltip to show content only for the dataseries that are visible in CanvasJS Charts v3.7. JSFiddle shared above uses the latest version of CanvasJS because of which tooltip shows the content of dataseries which are visible. Updating CanvasJS Chart version to latest will resolve the issue you are facing.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@ali136m,

To overcome the issue you are facing, you can hide the dataseries which are outside of the viewport range by setting visible property to ‘false’ in rangeChanging event handler. Please take a look at the code snippet below for the same.

rangeChanging: function(e) {
  if(e.stockChart.charts[0].data.length > 1) {
    var chart = e.stockChart.charts[0];
    for(i=1; i<chart.data.length; i++) {
      if(chart.options.data[i].minMaxXValue[0] > e.maximum || chart.options.data[i].minMaxXValue[1] < e.minimum)
        chart.data[i].get('visible') && chart.data[i].set('visible', false, false);
      else
        !chart.data[i].get('visible') && chart.data[i].set('visible', true, false);
    }
  }
}

Also, check out this updated JSFiddle for complete working code.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@ali136m,

The range of an axis depends on multiple factors like dataseries attached to it, the datapoint values of all the dataseries visible in the viewport, etc. In your case, the issue might be happening due to datapoint values in line series. Removing the line series seems to be working fine as shown in this updated JSFiddle.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@ravindu-dilhara,

The sample shared above seems to be working fine. If you are still facing issue, can you kindly share the sample reproducing the issue over Google-Drive or Onedrive so that we can look into your code, run it locally at our end to understand the scenario better and help you out?

https://imgur.com/a/5tQ4YHD

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@elitriona,

It seems like you are not rendering the chart after updating the datapoints on ajax request. Calling chart.render() after updating the datapoints will work fine in your case. Please take a look the code snippet below for the same.

$.getJSON('https://trionacgm.fly.dev/api/v1/entries.json?count=12', function(data) {
  chart.options.data[0].dataPoints = [];
  $.each(data, function(key, value) {
    chart.options.data[0].dataPoints.push({
      x: (value['date']),
      y: Number(value['sgv'])
    });
  });
  chart.render();
});

Also, check out this JSFiddle for complete working code.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@anu,

Can you kindly share sample data and brief us more about your requirement so that we can understand your scenario better and help you out?

—
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@mnair,

CanvasJS is a JavaScript library that render charts on the client-side. To expose API for downloading chart, you will have to run it in a headless browser & serve the captured screenshot on request. Please take a look at this sample project which uses puppeteer to save the image in the sever side.

If this doesn’t fulfill your requirement, kindly brief us further about your requirement or an example so that we can understand your scenario better and help you out.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@m-usman,

Can you please brief us further about your requirement along with a pictorial representation or an example so that we can understand your scenario better and help you out?

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@dpanscik,

Glad that you were able to get the desired solution.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@dpanscik,

You can get your extra data passed to datapoints using chart object as shown below

var pageName = chart.options.data[0].dataPoints[0].extraData[0].value
var alertMessage = chart.options.data[0].dataPoints[0].extraData[1].value

If you are still facing issue, kindly create a sample project reproducing the issue you are facing and share it with us over Google-Drive or Onedrive along with sample data so that we can look into your code, run it locally at our end to understand the scenario better and help you out?

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@jailangoju,

Thanks for the reporting the use-case. We will look into it further, understand the scenario better and get back to you at the earliest. Meanwhile, you can overcome this by setting y-axis interval to a value, 1 in this case. Please find the code-snippet below.

axisY:{
    title: "Axis Y Title",
    interval: 1
}

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

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@avb,

As mentioned in the previous reply, you can enable zooming in the individual charts of stockchart by setting zoomEnabled to true. Please take a look at code snippet below.

.
.
.
charts: [{
  zoomEnabled: true,
  axisX: {
    crosshair: {
      enabled: true,
      valueFormatString: "MMM DD, YYYY HH:mm:ss"
    }
  }
.
.
.

Also check out this updated JSFiddle for the example.

—
Manoj Mohan
Team CanvasJS