[Ananya]

@patdepri_new,

You are attempting to create a chart in the div with id “chartContainer1” which does not exist. So the code stops executing and does not render anything on screen. Please check browser console for the error. Not creating chart with the id that doesn’t exist should render all other charts in this case.

—
Ananya Deka
Team CanvasJS

[Ananya]

@patdepri_new,

Rendering multiple charts in a page seems to be working fine. Please refer to this documentation page for a step-to-step walkthrough of the same. If you are still facing issue, kindly create a JSFiddle reproducing the issue you are facing and share it with us so that we can look into the code, understand the scenario better and help you out.

—
Ananya Deka,
Team CanvasJS

[Ananya]

@intellicus,

Thank you for the valuable feedback. As a workaround, you can combine Stacked Bar 100 and Bar Chart to achieve Bullet Chart as shown in this JSFiddle. Similarly, you can use Doughnut Chart to create a Gauge Chart, as shown in this JSFiddle.

You can refer to this article for more information about creating Bullet Chart using our library.

—
Ananya Deka
Team CanvasJS

[Ananya]

@ss12,
You can add a dropdown to select the zoomtype as shown in this JSFiddle.

—
Ananya Deka
Team CanvasJS

[Ananya]

@himak,

Exporting chart data as CSV is not available as an in-built feature as of now. However, with few lines of code, you can achieve the same as shown in this JSFiddle. You can even use the export-canvasjs-chart-data-as-csv npm package to export chart data as CSV in Angular app. Please take a look at this Stackblitz project for an example of the same.

—
Ananya Deka
Team CanvasJS

[Ananya]

@murrayr,

Due to security measures, web browsers impose restrictions on reading local files & cross-origin requests. To work around this, one effective approach is to serve your JSON file from a local web server or utilize a CORS-enabled JSON hosting service like npoint.io. By doing so, you enable your web application to fetch data seamlessly without encountering the cross-origin limitations. Please take a look at this JSFiddle for an example of the same.

—
Ananya Deka,
Team CanvasJS

[Ananya]

sora,

To change the axis colour before exporting the chart, you can change the theme to a light theme before export and revert it back after. Please take a look at this JSFiddle for an example of the same.

—
Ananya Deka
Team CanvasJS

[Ananya]

@fdelvalle,

1) What is the difference between rangeChanging and rangeChanged then? They seem to fire just one after another.

rangeChanging is fired just before the range of the chart is about to be changed, i.e., before rendering takes place. rangeChanged is triggered after the chart has been rendered with the updated viewport range. rangeChanging can be useful for modifying chart options based on the new range before the chart updates, while rangeChanged is suitable for tasks that need to react to the finalized change in the range.

2) Is there a way to detect when the Pan ends? My intention is to query the database for new values only when Pan or Zoom ends.

You can check if panning has ended or not with the help of rangeChanged event and mouseup event. Please check the code-snippet below.

rangeChanged: function(e) {
      if(e.trigger === 'pan') {
        panning = true;
      }
    }

document.addEventListener('mouseup', function () {
    if(panning) {
      // query your database here
      panning = false;
    }
  });

Please take a look at this JSFiddle for an example of the same.
—
Ananya Deka
Team CanvasJS

[Ananya]

@fdelvalle,

While panning, the axis range is being changed as you move the mouse along the chart and hence rangeChanged will be fired at every instance. In contrast, while zooming the range is changed only once after the desired range has been selected, and as a result rangeChanged is fired only once. The sequence of fired events while panning, i.e., rangeChanging followed by rangeChanged, is the intended behaviour.

—
Ananya Deka
Team CanvasJS

[Ananya]

@kkoroleva,

We don’t have CanvasJS Charts TypeScript definition as of now. However, charts seems to work fine with TypeScript as well. You can ignore the corresponding error by adding //@ts-ignore above the import statement as shown in the code-snippet below:

//@ts-ignore
import * as CanvasJS from '@canvasjs/charts';

—
Ananya Deka
Team CanvasJS

[Ananya]

@kkoroleva,

You can import CanvasJS from @canvasjs/charts package directly in this case. Please find the code-snippet below.

import * as CanvasJS from '@canvasjs/charts';

Please check out CanvasJS npm package from this link.

—
Ananya Deka
Team CanvasJS

[Ananya]

Doug,

You can use rangeChanging event to update the data with a new set of datapoints based on the zoomed range. Please take a look at this JSFiddle for an example of the same.

—-
Ananya Deka
Team CanvasJS

[Ananya]

Aung,

Range Selector is a part of StockChart, and not Chart. Using StockChart instead of Chart should fulfill your requirement.

__
Ananya Deka
Team CanvasJS

[Ananya]

@lujakob

You can get base64 image data of a canvas by using toDataURL method. As CanvasJS charts are rendered on canvas, you can use toDataURL to get base64 image data of the chart. Please find the code-snippet below:

var base64Image = chart.canvas.toDataURL();

Please take a look at this JSFiddle for a working example.

—
Ananya Deka
Team CanvasJS

[Ananya]

@danura,

In case of Stacked Charts, datapoints across multiple dataseries are aligned based on x-values and not the labels. Passing x-value along with label should work fine in this case. Please take a look at this JSFiddle for an example.

—
Ananya Deka
Team CanvasJS