Stacked Column Charts are plotted when multiple Column Charts with aligned x-values are plotted on same axis. Adding x-values to the dataPoints and reversing x-axis using reversed property should work fine in your case. Please take a look at this updated JSFiddle.
___________
Indranil Deo
Team CanvasJS
Rendering multiple charts in a page seems to be working fine.
Can you kindly create a sample project reproducing the issue you are facing and share it with us over Google-Drive or Onedrive along with the sample database so that we can run it locally to understand your scenario better and help you out?
___________
Indranil Deo
Team CanvasJS
You can use HTML table to populate the data as shown in this JSFiddle.
___________
Indranil Deo
Team CanvasJS
You can use CanvasJS jQuery plugin in Angular to access the chart based on DOM element. Please download this sample project for an example.
___________
Indranil Deo
Team CanvasJS
It’s not possible to access chart based on the DOM element in angular, as of now.
___________
Indranil Deo
Team CanvasJS
How to apply this if i have more than one chart?
As shown in the shared JSFiddle, comparing viewportMinimum & minimum within rangeChanging event of the chart works for particular chart. Passing rangeChanging within options of all the charts where you like to check this logic should work fine.
And how to apply this if we have dates in axis X?
Comparing viewportMinimum & minimum within rangeChanging works fine irrespective of numeric or date-time axis.
___________
Indranil Deo
Team CanvasJS
It’s not possible to access chart based on the DOM element in angular. However if you are using jQuery plugin, you can do so using jQuery selector var c = $("#chartContainer").CanvasJSChart();
.
___________
Indranil Deo
Team CanvasJS
You can determine the left extreme of axis by comparing the minimum with viewportMinimum of axisX. Please take a look at this JSFiddle for an example.
___________
Indranil Deo
Team CanvasJS
z value sets the size of bubble which is used for visualizing the difference in value between the dataPoints. The size of the bubble depends on the difference in z value of dataPoints and has a max limit(which depends on multiple factors like minimum z value, maximum z value, etc.) on the size after which it won’t increase any further.
Considering this thread as a duplicate of Bubble graph-Overlapping and hence closing the same.
___________
Indranil Deo
Team CanvasJS
z value sets the size of bubble which is used for visualizing the difference in value between the dataPoints. The size of the bubble depends on the difference in z value of dataPoints and has a max limit(which depends on multiple factors like minimum z value, maximum z value, etc.) on the size after which it won’t increase any further.
Considering this thread as a duplicate of Bubble graph-Overlapping and hence closing the same.
___________
Indranil Deo
Team CanvasJS
z value sets the size of bubble which is used for visualizing the difference in value between the dataPoints. The size of the bubble depends on the difference in z value of dataPoints and has a max limit(which depends on multiple factors like minimum z value, maximum z value, etc.) on the size after which it won’t increase any further.
___________
Indranil Deo
Team CanvasJS
Please take a look at this documentation page for step to step tutorial on Syncing Zooming and Panning across multiple charts. Also, kindly check this JSFiddle for an example to position one chart on top of other with zooming and panning synced across the same.
___________
Indranil Deo
Team CanvasJS
In the code sample that you have shared, replacing this.chart.render()
with e.chart.render()
should work fine. Please take a look at this documentation page for more information to Hide Unhide Data Series on Legend Click.
If you are still facing any issue, kindly create a sample project reproducing the issue and share it with us over Google-Drive or Onedrive so that we can run the code locally, understand the scenario better and help you out.
___________
Indranil Deo
Team CanvasJS
On zooming/panning you can find the maximum and minimum value within the current viewport and update the stripLines with the same value using set(). Please take a look at this updated Stackblitz.
___________
Indranil Deo
Team CanvasJS