Can you kindly create a sample project reproducing the issue you are facing on adding CanvasJS in MainLayout.vue and share it over Google-Drive or Onedrive so that we can run it locally to understand your scenario better and help you out?
—-
Manoj Mohan
Team CanvasJS
Saurabh,
As of now, it is not possible to align axisY of multiple charts on zooming and panning.
—-
Manoj Mohan
Team CanvasJS
Yes, the dataPoint(12, 300) will be displayed irrespective of the chart width and other dataPoints with y value less than 100 might get overlap with each other in such scenarios.
—-
Manoj Mohan
Team CanvasJS
As mentioned earlier, we don’t filter or skip any dataPoint values to render chart. Consider this JSFiddle for an example. In the fiddle, you can observe that the dataPoints values { x: 1, y: 1 }, { x: 2, y: 2 }, { x: 3, y: 3 } are displayed in same pixel vertically. i.e if multiple dataPoints with different y-values end up sharing the same pixel co-ordinate vertically. In the case of dataPoints with same y value & different x value, it ends up overlapping each other and gets rendered in same pixel co-ordinate vertically & horizontally. Similarly, for same x and y values, dataPoints will be displayed one top of another (overlaps one on top of other).
In the shared example, even when 1000 datapoints are rendered within 600px chart width, you can clearly observe that we don’t group or skip any dataPoint irrespective of a large number of dataPoints to be displayed in the limited width available.
—-
Manoj Mohan
Team CanvasJS
Glad that you have figured it out. Thanks for sharing the solution it will be helpful to others.
—-
Manoj Mohan
Team CanvasJS
We don’t manipulate or skip any dataPoint values to render chart in a screen with lesser pixels. However, dataPoints might get overlapped with each other in case there is huge number of dataPoints compare to available pixels to display. For e.g., let’s say screen with 1000 pixels and chart with dataPoints ranging from 1 to 10000, there might be a possibility that dataPoints with values 10-19 be overlapped with each other and render in one pixel. Moreover, for such scenarios you can set zoomEnabled to true and zoom into a region of interest.
—-
Manoj Mohan
Team CanvasJS
Thanks for your feedback. We will look into this feature in our future releases.
—-
Manoj Mohan
Team CanvasJS
Please take a look at this gallery page for examples on integrating CanvasJS in Angular app.
If you are still facing the issue, kindly create a sample project reproducing the issue and share it with us over Google-Drive or Onedrive along with sample data so that we can look into the code, understand your scenario better and help you out.
—-
Manoj Mohan
Team CanvasJS
In the updated sample shared, flexbox properties are set to the div (.chart) which contains all the chart. This seems to be working fine, i.e. charts are positioned next to each other.
If you are still facing the issue, kindly brief us further about the issue you are facing so that we can help you out?
—-
Manoj Mohan
Team CanvasJS
Legend for a stripline is not possible as of now. As mentioned earlier, legends are used to represent dataSeries.
Based on the solution that you have shared, you need to update the legend items once the chart is re-rendered.
—-
Manoj Mohan
Team CanvasJS
Passing the width value as a property of containerProps should work fine in your case. Please take a look at this updated sample project for the same.
—-
Manoj Mohan
Team CanvasJS
@skp,
Re-rendering the chart on closing and opening the sidemenu should work fine in your case.
If you are still facing the issue, kindly create a sample project reproducing the issue and share it with us over Google-Drive or Onedrive along with sample data so that we can look into the code, understand your scenario better and help you out.
—-
Manoj Mohan
Team CanvasJS